<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 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 >
          <treeselect :clearable="false"  v-model="deptId"  :options="deptOptions" :show-count="true" placeholder="请选择归属部门" />
        </el-form-item>
        <el-form-item>
          <el-select filterable v-model="userIds" placeholder="请选择员工" clearable size="small">
            <el-option
              v-for="item in userList"
              :key="item.userId"
              :label="item.nickName"
              :value="item.qwId">
            </el-option>
          </el-select>
        </el-form-item>
        <!--         <el-form-item label="筛选日期" prop="createTime">-->
        <!--                  <el-date-picker clearable size="small" style="width: 205.4px"-->
        <!--                    v-model="dateRange"-->
        <!--                    type="daterange"-->
        <!--                    value-format="yyyy-MM-dd"-->
        <!--                    start-placeholder="开始日期" end-placeholder="结束日期"-->
        <!--                    >-->
        <!--                  </el-date-picker>-->
        <!--          </el-form-item>-->
        <el-form-item>
          <el-button type="cyan" icon="el-icon-search"   @click="handleQuery">搜索</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="['qw:statistic:export']">导出</el-button>
          <el-table
            :data="userBehaviorDataList"
            border
            :summary-method="getSummaries"
            show-summary
            max-height="500"
            style="width: 100%;">
            <el-table-column
              prop="ownerName"
              label="群主昵称">
            </el-table-column>
            <el-table-column
              prop="newChatCnt"
              label="新客户群数">
            </el-table-column>
            <el-table-column
              prop="chatTotal"
              label="客户群总数">
            </el-table-column>
            <el-table-column
              prop="chatHasMsg"
              label="发过消息的客户群数">
            </el-table-column>
            <el-table-column
              prop="newMemberCnt"
              label="客户群新增群人数">
            </el-table-column>
            <el-table-column
              prop="memberTotal"
              label="客户群总人数">
            </el-table-column>
            <el-table-column
              prop="memberHasMsg"
              label="发过消息的群成员数">
            </el-table-column>
            <el-table-column
              prop="msgTotal"
              label="客户群消息总数">
            </el-table-column>
            <el-table-column
              prop="convertedDate"
              label="时间">
            </el-table-column>

          </el-table>
        </div>
      </div>
    </div>

  </div>
</template>

<script>

import { listUserBehaviorData, getUserBehaviorData, delUserBehaviorData, addUserBehaviorData, updateUserBehaviorData, exportUserBehaviorData } from "@/api/qw/userBehaviorData";

import { getUserListByDeptId, getUserListByDeptIdToQwId } 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 { listStatistic } from '@/api/qw/groupChatStatistic'

export default {
  name: 'Index',
  mixins: [resize],
  components: { Treeselect },
  watch: {
// 监听deptId
    'deptId': 'currDeptChange'
  },
  data() {
    return {
      deptOptions:[],
      deptId:undefined,
      userIds:undefined,
      userList:[],
      dateRange:[],
      chart: null,
      options: [ {
        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',
      userBehaviorDataList:[],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        userid: null,
        statTime: null,
        chatCnt: null,
        messageCnt: null,
        replyPercentage: null,
        avgReplyTime: null,
        negativeFeedbackCnt: null,
        newApplyCnt: null,
        newContactCnt: null,
        companyid: null,
        type:null,
        userIds:null,
        deptId:null,
        startTime:null,
        endTime:null,
      },
      qgcsCount:[],
      newChatCntAll:[],
      chatTotalAll:[],
      chatHasMsgAll :[],
      newMemberCntAll :[],
      memberTotalAll :[],
      memberHasMsgAll :[],
      msgTotalAll :[],
      time:[],
    }
  },
  created() {
    this.getTreeselect();
  },
  methods: {
    currDeptChange(val){
      console.log(val)
      this.deptId=val;
      this.getUserListByDeptId();
    },
    /** 查询部门下拉树结构 */
    getTreeselect() {
      var that=this;
      treeselect().then((response) => {
        this.deptOptions = response.data;

        if(response.data!=null&&response.data.length>0){
          this.deptId=response.data[0].id;
          that.handleQuery()
        }
      });
    },

    /** 导出按钮操作 */
    handleExport() {
      const queryParams = this.queryParams;
      this.$confirm('是否确认导出所有企微联系客户统计数据数据项?', "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        this.exportLoading = true;
        return exportUserBehaviorData(queryParams);
      }).then(response => {
        this.download(response.msg);
        this.exportLoading = false;
      }).catch(() => {});
    },

    //获取用户列表
    getUserListByDeptId() {
      this.userIds=undefined;
      var data={deptId:this.deptId};
      getUserListByDeptIdToQwId(data).then(response => {
        this.userList = response.data;

      });
    },

    handleQuery(){

      if(this.userIds!=undefined){
        this.queryParams.type=this.value;
        this.queryParams.userIds=this.userIds+"";
        this.queryParams.deptId=this.deptId;
      }
      else{
        this.queryParams.type=this.value;
        this.queryParams.deptId=this.deptId;
      }

      listStatistic(this.queryParams).then((response) => {
        this.qgcsCount = response.charts.map(item => item.qgcsCount);
        this.newChatCntAll = response.charts.map(item => item.newChatCntAll);
        this.chatTotalAll = response.charts.map(item => item.chatTotalAll);
        this.chatHasMsgAll = response.charts.map(item => item.chatHasMsgAll);
        this.newMemberCntAll = response.charts.map(item => item.newMemberCntAll);
        this.memberTotalAll = response.charts.map(item => item.memberTotalAll);
        this.memberHasMsgAll = response.charts.map(item => item.memberHasMsgAll);
        this.msgTotalAll = response.charts.map(item => item.msgTotalAll);
        this.time = response.charts.map(item => item.time);
        this.userBehaviorDataList=response.list;
        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.time
          }
        ],
        yAxis: [
          {
            type: 'value',
            axisLabel:{
              formatter:'{value}'
            }
          }
        ],

        series: [
          {
            name: '新客户群数',
            type: 'line',
            emphasis: {
              focus: 'series'
            },
            data: this.newChatCntAll
          },
          {

            name: '客户群总数',
            type: 'line',
            emphasis: {
              focus: 'series'
            },
            data: this.chatTotalAll
          },
          {

            name: '发过消息的客户群数',
            type: 'line',
            emphasis: {
              focus: 'series'
            },
            data: this.chatHasMsgAll
          },
          {

            name: '客户群新增群人数',
            type: 'line',
            emphasis: {
              focus: 'series'
            },
            data: this.newMemberCntAll
          },
          {

            name: '客户群总人数',
            type: 'line',
            emphasis: {
              focus: 'series'
            },
            data: this.memberTotalAll
          },
          {

            name: '发过消息的群成员数',
            type: 'line',
            emphasis: {
              focus: 'series'
            },
            data: this.memberHasMsgAll
          },
          {

            name: '客户群消息总数',
            type: 'line',
            emphasis: {
              focus: 'series'
            },
            data: this.msgTotalAll
          }

        ]
      };
      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>
