<template>
  <div class="box-center">
    <!-- 头 -->
    <div class="app-top">
      <div class="app-titel" style="margin-top: 10px">

        <div class="div-lab">
          <div class="label" style="min-width: 80px"> 日期： </div>
          <el-date-picker
            v-model="fromdata.datatime"
            class="div-inp"
            @change="timeChange"
            style="width: 250px"
            type="daterange"
            range-separator="-"
            :default-time="['00:00:00', '23:59:59']"
            value-format="yyyy-MM-dd"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          >
          </el-date-picker>
        </div>

        <div class="div-lab">
          <div class="label">运营：</div>
            <el-select
            v-model="fromdata.operationStaffId"
            placeholder="请选择"
            class="div-inp"
            filterable
            clearable
          >
            <el-option
              v-for="item in operaList"
              :key="item.accountId"
              :label="item.name"
              :value="item.accountId"
            >
            </el-option>
          </el-select>
        </div>
      </div>

      <div class="app-titel" style="margin-top: 10px">
        <div class="label" style="color: #ffffff">筛选相关：</div>
        <div style="margin-left: 5px">
          <el-button @click="screen" type="primary">筛选</el-button>
        </div>
        <div style="margin-left: 20px">
          <el-button @click="empty">清空筛选条件</el-button>
        </div>
      </div>
    </div>

    <!-- 表格 -->
    <div class="cen-tab">
      <el-table :data="tableData" stripe style="width: 100%" >
        <el-table-column prop="operationName" label="运营" align="center"></el-table-column>
        <el-table-column prop="houseQuantityInService" label="服务中项目数" width="120" align="center" sortable></el-table-column>
        <el-table-column prop="wrongWordAddCount" width="120" label="常错词添加数" align="center" sortable></el-table-column>
        <el-table-column prop="wrongWordUpdateCount" width="150" label="接待错词修改条数" align="center" sortable></el-table-column>
        <el-table-column prop="markAdviserCount" width="120" label="标记顾问数" align="center" sortable></el-table-column>
        <el-table-column prop="noMarkAdviserCount" width="140" label="未标顾问接待数" align="center" sortable></el-table-column>
        <el-table-column prop="prohibitedWordsAddCount" width="120" label="新增违禁词数" align="center" sortable></el-table-column>
        <el-table-column prop="CustomerLabelUpdateCount" width="140" label="客户标签修改次数" align="center" sortable></el-table-column>
        <el-table-column prop="ZkMarkingUpdateCount" width="140" label="销讲话术更新次数" align="center" sortable></el-table-column>
        <el-table-column prop="loginHouseCount" width="120" label="登录项目次数" align="center" sortable></el-table-column>
        <el-table-column prop="lastLoginTime"  width="180" label="最后一次登录项目时间" align="center" sortable></el-table-column>
        <el-table-column label="操作" align="center" width="120" fixed="right">
          <template slot-scope="{ row }">
            <el-button
              type="text"
              @click="toinfo(row)"
              >查看工作明细</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div style="display: flex; justify-content: flex-end; margin-top: 10px">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="fromdata.currentPage"
          :page-sizes="[10, 30, 50]"
          :page-size="fromdata.size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="fromdata.total"
        >
        </el-pagination>
      </div>
    </div>

   <el-dialog title="明细" :visible.sync="texteditorishow" center width="80%" :close-on-click-modal="false">
        <div class="dtit-box">
          <div class="div-lab1">
            <div class="label1" style="margin-left:0px;"> 日期： </div>
            <el-date-picker
              v-model="erfromdata.starTime"
              @change="timeChange1"
              style="width: 220px"
              type="daterange"
              range-separator="-"
              :default-time="['00:00:00', '23:59:59']"
              value-format="yyyy-MM-dd"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            >
            </el-date-picker>
          </div>
           <div class="div-lab1">
              <div class="label1"> 项目： </div>
               <el-input
                style="width: 180px"
                  maxlength="30"
                  clearable
                  v-model="erfromdata.houseName"
                  placeholder="请输入内容"
                ></el-input>
           </div>
             <div class="div-lab1">
              <div class="label1"> 操作类型： </div>
              <el-select v-model="erfromdata.operationTypeid" placeholder="请选择">
                <el-option
                  v-for="item in operationType"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
               </el-select>
           </div>
             <div class="div-lab1">
              <div class="label1"> 操作内容： </div>
               <el-input
                style="width:180px"
                  maxlength="30"
                  clearable
                  v-model="erfromdata.title"
                  placeholder="请输入内容"
                ></el-input>
           </div>
             <div class="div-lab1">
              <div class="label1" @click="operationStatisticsDetail()">搜索</div>
           </div>
        </div>
        <div style="width:100%;margin-top: 8px;">
          <el-table :data="infodata" stripe style="width: 100%;overflow-y:scroll;" height="340"
	        :header-cell-style="{background:'#E0E0E0'}">
            <el-table-column
              prop="createTime"
              label="操作时间"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="houseName"
              label="项目"
              align="center"
            >
            </el-table-column>
            <el-table-column prop="operationTypeName"  label="操作类型" align="center">
            </el-table-column>

            <el-table-column prop="title" label="操作内容"  align="center">
            </el-table-column>
          </el-table>
        </div>
        <div style="display: flex; justify-content: flex-end; margin-top: 10px">
        <el-pagination
          @size-change="handleSizeChange111"
          @current-change="handleCurrentChange111"
          :current-page="erfromdata.currentPage"
          :page-sizes="[10, 30, 50]"
          :page-size="erfromdata.size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="erfromdata.total"
        >
        </el-pagination>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import { mapGetters } from "vuex";
import { getAreaList } from "@/api/modules/api";
export default {
  data() {
    return {
      fromdata:{
         datatime:'',
         operationStaffId:'',
         currentPage:1,
         total:0,
         size:10,
         startDate:'',
         endDate:''
      },
      erfromdata:{
        houseName:'',
        title:'',
        starTime:"",
        statime:'',
        endtime:'',
        total:0,
        size:10,
        currentPage:1,
        operationTypeid:''
      },
      tableData:[],
      operaList:[],
      texteditorishow:false,
      orgType: localStorage.getItem("orgType"),
      operationType:[
        {
          value: "0",
          label: "添加常错词",
        },
        {
          value: "1",
          label: "接待错词修改",
        },
         {
          value: "2",
          label: "标记顾问",
        },
         {
          value: "3",
          label: "未标记顾问接待",
        },
         {
          value: "4",
          label: "新增违禁词条",
        },
         {
          value: "5",
          label: "客户标签修改 ",
        },
         {
          value: "6",
          label: "销讲话术修改",
        },
         {
          value: "7",
          label: "登录项目",
        },
      ],
      createBy:'',
      infodata:[]
    };
  },
  computed: {
    ...mapGetters(["permissions"]),
  },
  created() {
    this.cus_build_index_add = this.permissions["cus_build_index_add"];
  },
  mounted() {
    this.getOperaList()
    this.operationStatistics()
  },
  methods: {
    getOperaList() {
      if (this.orgType == 1) {
        this.$api.http
          .getAllOperationsStaffByAgent({
            agentId: localStorage.getItem("agentId"),
          })
          .then((res) => {
            this.operaList = res.data;
          });
      } else {
        this.$api.http.getAllOperationsStaff().then((res) => {
          this.operaList = res.data;
        });
      }
    },
    //获取列表
    operationStatistics(){
      let form={
        createBy:this.fromdata.operationStaffId,
        current:this.fromdata.currentPage,
        size:this.fromdata.size,
        startDate:this.fromdata.startDate,
        endDate:this.fromdata.endDate
      }
        this.$api.http.operationStatistics(form).then((res) => {
          this.tableData=res.data.records;
          this.fromdata.total=res.data.total;
        });
    },
    //查看工作明细
    toinfo(row){
      this.infodata=[]
      this.texteditorishow=true;
      this.erfromdata.starTime=this.fromdata.datatime;
      this.erfromdata.statime= this.fromdata.startDate;
      this.erfromdata.endtime= this.fromdata.endDate;
      this.erfromdata.houseName='';
      this.erfromdata.operationTypeid='';
      this.erfromdata.title='';
      this.createBy=row.createBy;
      this.erfromdata.total=0;
      this.erfromdata.size=10;
      this.erfromdata.currentPage=1;
      console.log(this.createBy)
      this.operationStatisticsDetail()
    },
    //获取工作明细表格
    operationStatisticsDetail(){
       this.infodata=[];
      let form={
          startDate:this.erfromdata.statime,
          endDate:this.erfromdata.endtime,
          houseName:this.erfromdata.houseName,
          operationType:this.erfromdata.operationTypeid,
          title:this.erfromdata.title,
          createBy: this.createBy
      }
      this.$api.http.operationStatisticsDetail(form).then((res) => {
        this.infodata=res.data.records;
         this.erfromdata.total=res.data.total;
      });
    },
    //清空
    empty(){
      this.fromdata.datatime='';
      this.fromdata.operationStaffId='';
      this.fromdata.size=10;
      this.fromdata.currentPage=1;
    },
    //筛选
    screen(){
        this.operationStatistics()
    },
    // 时间选择
    timeChange1(){
        this.erfromdata.statime=this.erfromdata.starTime[0]
        this.erfromdata.endtime=this.erfromdata.starTime[1]
    },
    timeChange(){
      this.fromdata.startDate=this.fromdata.datatime[0];
      this.fromdata.endDate=this.fromdata.datatime[1];
       this.operationStatistics()
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.fromdata.size = val;
      this.operationStatistics()
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.fromdata.currentPage = val;
      this.operationStatistics()
    },

    handleSizeChange111(val) {
      console.log(`每页 ${val} 条`);
      this.erfromdata.size = val;
      this.operationStatisticsDetail()
    },
    handleCurrentChange111(val) {
      console.log(`当前页: ${val}`);
      this.erfromdata.currentPage = val;
      this.operationStatisticsDetail()
    },
  },
};
</script>

<style scoped="scoped" lang="scss" >
.box-center {
  width: 100%;
  padding: 15px;
  min-width: 1000px;
  padding-bottom: 100px;
}
.cen-tab {
  width: 100%;
  padding: 15px;
  background: #ffffff;
  margin-top: 15px;
}
.tophove {
  color: #ffffff;
  background: #2671e2;
}
.dtit-box{
   width: 100%;
   display: flex;
   align-items: center;
   flex-wrap: wrap;
   .div-lab1{
      display: flex;
      align-items: center;
      margin: 5px;
      .label1{
      font-size: 14px;
      color: #32363d;
      line-height: 32px;
      margin-left: 6px;
    }
   }
}
.app-top {
  width: 100%;
  background: #ffffff;
  box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.04);
  border-radius: 4px;
  padding-top: 15px;
  padding-bottom: 15px;
  .app-titel {
    width: 100%;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    .label {
      font-size: 14px;
      font-weight: 400;
      color: #32363d;
      line-height: 32px;
      margin-left: 15px;
      min-width: 100px;
      text-align: right;
    }
    .toptimeqhuan {
      height: 30px;
      background: #ffffff;
      display: flex;
      align-items: center;
    }
    .toptimeqhuan div {
      padding-left: 20px;
      padding-right: 20px;
      text-align: center;
      line-height: 30px;
      font-size: 14px;
      margin-right: 15px;
      border-radius: 4px;
      border: 1px solid #e0e0e0;
    }
  }
}
.div-lab {
  display: flex;
  margin: 5px;
}
.div-inp {
  width: 250px;
}
</style>
