<template>
  <div class="app-container">
    <div class="app-content">
      <div class="title">
        通话统计
      </div>
      <el-form class="search-form" :inline="true" >
        <el-form-item >
          <el-select style="width: 220px" v-model="value" placeholder="请选择日期">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="公司名" prop="companyId">
          <el-select filterable style="width: 220px" v-model="companyId" @change="companyChange" placeholder="请选择公司名" clearable size="small">
            <el-option
              v-for="item in companys"
              :key="item.companyId"
              :label="item.companyName"
              :value="item.companyId"
            />
          </el-select>
        </el-form-item>
        <el-form-item >
          <treeselect style="width: 220px" :clearable="false"  v-model="deptId"  :options="deptOptions" :show-count="true" placeholder="请选择归属部门" />
        </el-form-item>
        <el-form-item>
          <el-select style="width: 220px" v-model="userIds" multiple  placeholder="请选择员工">
            <el-option
              v-for="item in users"
              :key="item.userId"
              :label="item.nickName"
              :value="item.userId">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="cyan" icon="el-icon-search"   @click="getVoiceLogs">搜索</el-button>
        </el-form-item>
      </el-form>
      <div class="data-box">
        <div class="echart-box">
          <div id="echart-customer"></div>
        </div>
        <div class="table-box">
          <el-button class="export" size="small"  @click="handleExport"   v-hasPermi="['statistics:customer:index']">导出</el-button>
          <el-table
            :data="list"
            border
            :summary-method="getSummaries"
            show-summary
            max-height="500"
            style="width: 100%;">
            <el-table-column
              prop="nickName"
              label="员工姓名">
            </el-table-column>
            <el-table-column
              prop="callCount"
              label="拨打数">
            </el-table-column>
            <el-table-column
              prop="callSuccessCount"
              label="接通数">
            </el-table-column>
            <el-table-column
              prop="callRate"
              label="接通率(%)">
            </el-table-column>
            <el-table-column
              prop="times"
              label="通话时长(秒)">
            </el-table-column>
            <el-table-column
              prop="billingTime"
              label="消耗分钟(分)">
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
import { voiceLogs,exportVoiceLogs } from "@/api/company/statistics";
import { getUserListByDeptId} from "@/api/company/companyUser";
import echarts from 'echarts'
import resize from '../../dashboard/mixins/resize'
import { treeselect } from "@/api/company/companyDept";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import { getCompanyList } from "@/api/company/company";
export default {
  name: 'Index',
  mixins: [resize],
  components: { Treeselect },
  watch: {
    // 监听deptId
    'deptId': 'currDeptChange'
  },
  data() {
    return {
      companys:[],
      deptOptions:[],
      companyId:undefined,
      deptId:undefined,
      userIds:undefined,
      users:[],
      chart: null,
      options: [{
        value: '1',
        label: '今天'
      }, {
        value: '2',
        label: '昨天'
      }, {
        value: '3',
        label: '本周'
      }, {
        value: '4',
        label: '上周'
      }, {
        value: '5',
        label: '本月'
      }
        , {
          value: '6',
          label: '上月'
        }
        , {
          value: '7',
          label: '本季度'
        }
        , {
          value: '8',
          label: '上季度'
        }
        , {
          value: '9',
          label: '本年'
        }
        , {
          value: '10',
          label: '上年'
        }],
      value: '5',
      list:[],
      dates:[],
      billingTime:[],
      callCount:[],
      callSuccessCount:[],
      times:[]

    }
  },
  created() {
    getCompanyList().then(response => {
      this.companys = response.data;
      if(this.companys!=null&&this.companys.length>0){
        this.companyId=this.companys[0].companyId;
        this.getTreeselect();
      }
    });
  },
  methods: {
    companyChange(val){
      console.log(val);
      this.companyId=val;
      this.getTreeselect();
    },
    currDeptChange(val){
      console.log(val)
      this.deptId=val;
      this.getUserListByDeptId();
    },
    /** 查询部门下拉树结构 */
    getTreeselect() {
      var that=this;
      var param={companyId:this.companyId}
      treeselect(param).then((response) => {
        this.deptOptions = response.data;
        console.log(this.deptOptions)
        if(response.data!=null&&response.data.length>0){
          this.deptId=response.data[0].id;
          that.getVoiceLogs()
        }
      });
    },
    handleExport(){
      var data;
      if(this.userIds!=undefined){
        data={type:this.value,userIds:this.userIds+"",deptId:this.deptId}
      }
      else{
        data={type:this.value,deptId:this.deptId}
      }
      exportVoiceLogs(data).then((response) => {
        console.log(response)
        this.download(response.msg);
      });

    },
    getUserListByDeptId() {
      this.userIds=undefined;
      var data={deptId:this.deptId};
      getUserListByDeptId(data).then(response => {
        this.users = response.data;

      });
    },
    getVoiceLogs(){
      var data;
      if(this.userIds!=undefined){
        data={type:this.value,userIds:this.userIds+"",deptId:this.deptId}
      }
      else{
        data={type:this.value,deptId:this.deptId}
      }
      voiceLogs(data).then((response) => {
        this.list=response.list;
        this.dates=response.dates;
        this.callCount=response.callCount;
        this.callSuccessCount=response.callSuccessCount;
        this.billingTime=response.billingTime;
        this.times=response.times;
        setTimeout(() => {
          this.initEchart();
        }, 500);
      });
    },
    initEchart(){
      var option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {            // 坐标轴指示器，坐标轴触发有效
            type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        legend: {
          data: ['通话时长', '消耗分钟','拨打数','接通数']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: this.dates
          }
        ],
        yAxis: [
          {
            type: 'value',
            axisLabel:{
              formatter:'{value}个'
            }
          }
        ],
        series: [
          {

            name: '通话时长',
            type: 'bar',
            emphasis: {
              focus: 'series'
            },
            data: this.times
          },
          {

            name: '消耗分钟',
            type: 'bar',
            emphasis: {
              focus: 'series'
            },
            data: this.billingTime
          },
          {
            name: '拨打数',
            type: 'bar',
            emphasis: {
              focus: 'series'
            },
            data: this.callCount
          },
          {
            name: '接通数',
            type: 'bar',
            emphasis: {
              focus: 'series'
            },
            data: this.callSuccessCount
          }
        ]
      };
      this.chart=echarts.init(document.getElementById("echart-customer"));
      this.chart.setOption(option,true);
    },
    getSummaries(param) {
      const { columns, data } = param;
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '总计';
          return;
        }
        const values = data.map(item => Number(item[column.property]));
        if (!values.every(value => isNaN(value))) {
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr);
            if (!isNaN(value)) {
              return prev + curr;
            } else {
              return prev;
            }
          }, 0);
          sums[index] += ' ';
        } else {
          sums[index] = '';
        }
      });

      return sums;
    }
  }
}
</script>

<style lang="scss" scoped>
.app-container{
  border: 1px solid #e6e6e6;
  padding: 12px;

  .app-content{
    background-color: white;
    .title{
      padding: 20px 30px 0px 30px;
      font-size: 18px;
      font-weight: bold;
      color: black;

    }
    .search-form{
      margin: 20px 30px 0px 30px;
    }
    .data-box{
      padding: 30px;
      background-color:  rgb(255, 255, 255);
      height: 100%;

      .echart-box{
        margin: 0 auto;
        text-align: center;
      }
      .el-select{
        margin: 5px 10px;
      }
      .table-box{
        margin-top: 15px;
        .export{
          float: right;
          margin: 10px 0px;
        }
      }
    }
  }
}
#echart-customer{
  width:100%;
  height:320px
}
.vue-treeselect{
  width: 217px;
  height: 36px;
}

</style>
<style>
.vue-treeselect__control{
  display: block;
}
</style>
