<template>
  <section class="AppWorkStatistics">
    <ai-detail list>
      <ai-title slot="title" title="工单统计">
        <template #rightBtn>
          <el-row type="flex" align="middle">
            <el-cascader ref="cascader1" clearable v-model="totalDeptList" :options="deptOptions" placeholder="所属部门" size="small"
              :props="defaultProps" :show-all-levels="false" @visible-change="totalDeptSelect"></el-cascader>
          </el-row>
        </template>
      </ai-title>
      <template #content>
        <div class="card_list">
          <div class="card">
            <h2>累计上报</h2>
            <p class="color1">{{ totalInfo['累计上报'] || 0 }}</p>
          </div>
          <div class="card">
            <h2>今日上报</h2>
            <p class="color1">{{ totalInfo['今日上报'] || 0 }}</p>
          </div>
          <div class="card">
            <h2>办理中</h2>
            <p class="color1">{{ totalInfo['办理中'] || 0 }}</p>
          </div>
          <div class="card">
            <h2>今日办结</h2>
            <p class="color1">{{ totalInfo['今日办结'] || 0 }}</p>
          </div>
        </div>
        <ai-title slot="title" title="工单分析">
          <template #rightBtn>
            <el-row type="flex" align="middle">
              <span class="shortcut" v-for="(item,i) in timeCheck" :key="i" :class="{active:type==i}"
                @click="timeChange(i)" v-text="item"/>
              <el-cascader ref="cascader2" clearable v-model="deptList" :options="deptOptions" placeholder="所属部门" size="small"
                :props="defaultProps" :show-all-levels="false" @change="deptSelect"></el-cascader>
            </el-row>
          </template>
        </ai-title>
        <el-row type="flex" class="mar-t4 gap-20">
          <div class="chartBox fill">
            <b>事件办结率</b>
            <div>
              <div class="end-num" v-if="endData.length">{{endNum}}%</div>
              <div id="endChart" style="height: 260px; width: 100%;" v-if="endData.length"></div>
              <ai-empty v-else style="height: 200px; width: 100%;" id="empty"/>
            </div>
          </div>
          <div class="chartBox fill">
            <b>工单上报趋势</b>
            <div>
              <div id="trendChart" style="height: 260px; width: 100%;" v-if="trendData.length"></div>
              <ai-empty v-else style="height: 200px; width: 100%;" id="empty"/>
            </div>
          </div>
        </el-row>
        <el-row type="flex" class="mar-t4 gap-20">
          <div class="chartBox fill">
            <div class="title-flex">
              <b>工单分类</b>
              <ai-select v-model="eventStatus" :selectList="dict.getDict('xbotEventStatusSearch')" @change="statusChange"/>
            </div>
            <div>
              <div id="typeChart" style="height: 270px; width: 100%;" v-if="typeData.length"></div>
              <ai-empty v-else style="height: 200px; width: 100%;" id="empty"/>
            </div>
          </div>
          <div class="chartBox fill">
            <b>工单排名</b>
            <div>
              <ai-table v-if="tableData.length"
                :tableData="tableData"
                :col-configs="colConfigs"
                :isShowPagination="false"
                style="margin-top: 6px; width: 100%;">
              </ai-table>
              <ai-empty v-else style="height: 200px; width: 100%;" id="empty"/>
            </div>
          </div>
        </el-row>
        <ai-dialog :visible.sync="dialogDate" title="选择时间" width="500px" customFooter>
          <el-date-picker v-model="timeList" size="small" type="daterange" value-format="yyyy-MM-dd"
            range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
          </el-date-picker>
          <el-button slot="footer" @click="selectDete" type="primary">确认</el-button>
        </ai-dialog>
      </template>
    </ai-detail>
  </section>
</template>

<script>
import {mapState} from "vuex"
import * as echarts from 'echarts';
import AiDetail from "dui/packages/layout/AiDetail.vue";
import AiTitle from "dui/packages/basic/AiTitle.vue";
import "echarts-wordcloud";

export default {
  name: "AppWorkStatistics",
  components: {AiTitle, AiDetail},
  label: "工单统计",
  props: {
    instance: Function,
    dict: Object,
    permissions: Function,
  },
  data() {
    return {
      defaultProps: {
        label: 'name',
        value: 'id',
        checkStrictly: true,
      },
      deptOptions: [],
      info: {},
      trendData: [],
      trendChart: null,
      endData: [],
      endChart: null,
      typeData: [],
      typeChart: null,
      tableData: [],
      totalInfo: {},
      type: '2',
      timeCheck: ['昨日', '近7天', '近30天', '自定义'],
      dialog: false,
      dialogDate: false,
      timeList: [],
      startTime: '',
      endTime: '',
      totalDeptList: [],
      deptList: [],
      time: [],
      endNum: 0,
      eventStatus: '',
      isTypeInit: false, //true分类请求不重新重置其它chart
    }
  },
  computed: {
    ...mapState(['user']),
    colConfigs() {
      return [
        {prop: "rank", label: '排名', align: "center", width: "80px"},
        {prop: "roomName", label: '群名称', align: "center"},
        {prop: "ownerName", label: '群主', align: "center", width: "100px"},
        {prop: "c", label: '工单数', align: "center", width: "100px"},
      ]
    },
  },
  created() {
    this.$dict.load('xbotEventStatusSearch')
    this.getDeptList()
    this.getTotal()
    this.getStatistics()
  },
  methods: {
    getTotal() {
      var totalDepartmentId = this.totalDeptList.length ? this.totalDeptList[this.totalDeptList.length-1] : ''
      this.instance.post(`/app/appsessionarchivereportinfo/statistics1?departmentId=${totalDepartmentId}`).then(res => {
        if (res?.data) {
          console.log(res)
          this.totalInfo = res.data
        }
      })
    },
    getStatistics() {
      if(!this.isTypeInit) {
        this.trendData = [], this.endData = [], this.typeData = [], this.tableData = []
      }else {
        this.typeData = []
      }
      var departmentId = this.deptList.length ? this.deptList[this.deptList.length-1] : ''
      this.instance.post('/app/appsessionarchivereportinfo/statistics2', null, {
        params: {
          departmentId,
          type: this.type,
          startTime: this.startTime,
          endTime: this.endTime,
          eventStatus: this.eventStatus
        }
      }).then(res => {
        if (res?.data) {
          this.info = res.data
          if(this.isTypeInit) { //只刷新分类
            this.info.groupList.map((item) => {
              var i = { name: item.groupName, value: item.totalNum };
              this.typeData.push(i);
            })
            if(this.typeData.length) {
              this.$nextTick(() => {
                this.typeChartInit(this.typeData)
              })
            }
            return
          }


          var trendX = []
          this.info.trend.map((item) => {
            trendX.push(item.ymd)
            this.trendData.push(item.ecount)
          })
          if(this.trendData.length) {
            this.$nextTick(() => {
              this.trendChartInit(trendX, this.trendData)
            })
          }


          Object.keys(res.data.allCountMap).forEach((key) => {
            var info = {
              name: key,
              value: res.data.allCountMap[key]
            }
            this.endData.push(info)
          })
          if(this.endData.length) {
            this.$nextTick(() => {
              this.endChartInit(this.endData)
            })
          }
          var num = res.data.allCountMap['累计办结']/res.data.allCountMap['累计上报']
          this.endNum = Number(num*100).toFixed(2)
          

          this.info.groupList.map((item) => {
            var i = { name: item.groupName, value: item.totalNum };
            this.typeData.push(i);
          })
          if(this.typeData.length) {
            this.$nextTick(() => {
              this.typeChartInit(this.typeData)
            })
          }

          this.info.ranking.map((item, index)=> {
            if(index < 5) {
              item.rank = index+1
              this.tableData.push(item)
            }
          })
        }
      })
    },
    trendChartInit(xData, yData) {
      this.trendChart = echarts.init(document.getElementById('trendChart'))
      let option = {
        xAxis: {
          type: 'category',
          data: xData
        },
        yAxis: {
          type: 'value'
        },
        grid: {
          left: '10px',
          right: '28px',
          bottom: '14px',
          top: '30px',
          containLabel: true
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          type: "plain"
        },
        color: '#2891FF',
        series: [
          {
            data: yData,
            type: 'line'
          }
        ]
      }
      this.trendChart.setOption(option)
    },
    endChartInit(data) {
      this.endChart = echarts.init(document.getElementById('endChart'))
      var option = {
        tooltip: {
          trigger: 'item'
        },
        series: [
          {
            type: 'pie',
            radius: ['60%', '90%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'
            },
            
            labelLine: {
              show: false
            },
            data,
          }
        ]
      }
      this.endChart.setOption(option)
    },
    typeChartInit(data) {
      this.typeChart = echarts.init(document.getElementById('typeChart'))
      var option = option = {
        tooltip: {
          trigger: 'item'
        },
        // legend: {
        //   bottom: '0%',
        //   left: 'center'
        // },
        series: [
          {
            type: 'pie',
            radius: '76%',
            data,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      }
      this.typeChart.setOption(option)
    },
    getDeptList() {
      this.instance.post(`/app/wxcp/wxdepartment/listAll`).then((res) => {
        if (res.code == 0) {
          this.deptOptions = this.toTree(res.data)
        }
      })
    },
    toTree(data) {
      let result = [];
      if (!Array.isArray(data)) {
        return result
      }
      let map = {};
      data.forEach(item => {
        map[item.id] = item;
      });
      data.forEach(item => {
        let parent = map[item.parentid];
        if (parent) {
          (parent.children || (parent.children = [])).push(item);
        } else {
          result.push(item);
        }
      });
      return result;
    },
    statusChange() {
      this.isTypeInit = true
      this.getStatistics()
    },
    totalDeptSelect(val) {
      if(!val) {
        this.getTotal()
      }
    },
    deptSelect(val) {
      this.deptList = val
      this.isTypeInit = false
      this.getStatistics()
    },
    timeChange(index) {
      this.type = index
      if (index == 3) {
        this.dialogDate = true
      } else {
        this.startTime = ''
        this.endTime = ''
        this.isTypeInit = false
        this.getStatistics()
      }
    },
    selectDete() {
      if (!this.timeList || !this.timeList.length) {
        return this.$message.error('请选择自定义时间');
      }
      this.startTime = this.timeList?.[0]
      this.endTime = this.timeList?.[1]
      this.dialogDate = false
      this.isTypeInit = false
      this.getStatistics()
    },
  },
}
</script>

<style lang="scss" scoped>
.AppWorkStatistics {
  height: 100%;
  box-sizing: border-box;

  .shortcut {
    display: inline-block;
    width: 70px;
    height: 32px;
    line-height: 32px;
    border-radius: 2px;
    border: 1px solid #D0D4DC;
    margin-right: 8px;
    text-align: center;
    cursor: pointer;

    &.active {
      color: #2266FF;
      border: 1px solid #2266FF;
    }
  }

  .chartBox {
    background: #F9F9F9;
    box-shadow: 0px 4px 6px -2px rgba(15, 15, 21, 0.1500);
    border-radius: 4px;
    padding: 16px;
    box-sizing: border-box;
    margin-top: 6px;
    position: relative;
    
    .title-flex {
      display: flex;
      justify-content: space-between;
    }
    .chart {
      width: 100%;
      height: 300px;
    }

    .end-num {
      position: absolute;
      top: 50%;
      left: 50%;
      margin: -10px 0 0 -70px;
      height: 44px;
      line-height: 44px;
      width: 140px;
      text-align: center;
      font-size: 40px;
    }
  }

  .card_list {
    display: flex;
    margin-bottom: 4px;

    .card {
      flex: 1;
      height: 76px;
      background: #F9F9F9;
      border-radius: 2px;
      margin-right: 20px;
      padding: 8px 24px;
      box-sizing: border-box;

      h2 {
        color: #888888;
        font-weight: 600;
        font-size: 16px;
      }

      p {
        margin-top: 8px;
        font-size: 24px;
        font-weight: 600;
      }

      .color1 {
        color: #2891FF;
      }

      .color2 {
        color: #22AA99;
      }

      .color3 {
        color: #F8B425;
      }
    }

    .card:last-child {
      margin-right: 0;
    }
  }


  :deep( .el-dialog__footer ) {
    text-align: center;
  }

  :deep( .el-dialog__header ) {
    border-bottom: 1px solid #DDD;
  }

  :deep( .ai-detail ) {
    background: #FFF;
  }
}
</style>
