<template>
  <div class="statistics">
    <AiTopFixed>
      <div class="select-gird">
        <AiPagePicker type="dept" v-model="selectDept" valueObj nodeKey="fullId" formType="2" class="right-span" @change="changeDept">
          <AiMore v-model="selectDept.fullName"/>
        </AiPagePicker>
      </div>
    </AiTopFixed>
    <div class="statstics-content">
      <div class="info-content">
        <div class="title">概况总览</div>
        <div class="el-row">
          <div class="item" v-for="(item, index) in todayList" :key="index" v-if="item.label != '累计办结'">
            <h2>{{item.value}}</h2>
            <p>{{item.label}}</p>
          </div>
        </div>
      </div>
      <div class="info-content">
        <div class="title">事件办结率</div>
        <div class="echart-content" id="finish"></div>
        <div class="num" v-if="finishData">{{finshNum}}%</div>
        <AiEmpty v-else></AiEmpty>
      </div>

      <div class="info-content">
        <div class="title">工单上报趋势图</div>
        <div class="echart-content" id="trend"></div>
        <AiEmpty v-if="!trendData.length"></AiEmpty>
      </div>

      <div class="info-content">
        <div class="title">工单事件分类
          <div class="type-select" :style="statusInfo.name ? '' : 'color:#999;'" @click="show=true">{{statusInfo.name || '请选择'}}<u-icon name="arrow-right"></u-icon></div>
          <u-select v-model="show" :list="$dict.getDict('xbotEventStatusSearch')" value-name="dictValue" label-name="dictName" @confirm="selectStatus"></u-select>
        </div>
        <div class="echart-content" id="type"></div>
        <AiEmpty v-if="!typeData.length"></AiEmpty>
      </div>
      <div class="pad-b120"></div>
    </div>
  </div>
</template>

<script>
import {mapState} from 'vuex'
import echarts from 'echarts'
export default {
  props: {},
  data() {
    return {
      todayList: [],
      selectDept: {fullId: '', fullName: ''},
      finishChart: null,
      trendChart: null,
      typeChart: null,
      show: false,
      finishData: [],
      finshNum: '',
      trendData: [],
      trendDataX: [],
      typeData: [],
      statusInfo: {name: '', eventStatus: ''}
    }
  },
  computed: {
    ...mapState(['user']),
  },
  
  mounted() {
    // this.selectGird.girdName = this.user.girdName
    // this.selectGird.girdId = this.user.girdId
    this.$dict.load('xbotEventStatusSearch').then(() => {
      this.getStatistics()
    })
  },
  methods: {
    changeDept(e) {
      this.selectDept = e[0]
      this.getStatistics()
    },
    getStatistics() {
      this.todayList = [], this.finishData = [], this.trendDataX = [], this.trendData = [], this.typeData = []
      this.$http.post(`/app/appsessionarchivereportinfo/countByDeptId?deptFullId=${this.selectDept.fullId}&eventStatus=${this.statusInfo.eventStatus}`).then((res) => {
        if (res.code == 0) {
          this.$nextTick(() => {
            this.chartInit()
          })

          Object.keys(res.data.allCountMap).forEach((key) => {
            var info = {
              label: key,
              value: res.data.allCountMap[key]
            }
            this.todayList.push(info)
          })

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

          res.data.trend.map((item) => {
            this.trendData.push(item.ecount)
            this.trendDataX.push(item.ymd)
          })

          res.data.groupList.map((item) => {
            var info = {
              name: item.groupName,
              value: item.totalNum
            }
            this.typeData.push(info)
          })

          this.chartInit()
        }
      })
    },

    chartInit() {
      this.finishChart = echarts.init(document.getElementById('finish'))
      this.trendChart = echarts.init(document.getElementById('trend'))
      this.typeChart = echarts.init(document.getElementById('type'))

      var option = {
        tooltip: {
          trigger: 'item'
        },
        series: [
          {
            name: '事件办结率',
            type: 'pie',
            radius: ['30%', '60%'],
            itemStyle: {
              normal: {
                color: function (colors) {
                  var colorList = ['#83B5F7', '#7E94F6', '#85E3D5', '#2891FF'];
                  return colorList[colors.dataIndex];
                }
              },
            },
            data: this.finishData,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)',
              }
            }
          }
        ]
      };
      this.finishChart.setOption(option)

      var option2 = {
        grid: {
          left: '5%',
          right: '5%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          axisLine: {
            lineStyle: {
              color: '#E1E5EF', //x轴的颜色
              width: 1, //轴线的宽度
            },
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: '#666',
            },
          },
          data: this.trendDataX
        },
        yAxis: {
          axisLine:{       //y轴
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: '#666',
            },
          },
          type: 'value',
        },
        tooltip: {
          trigger: 'axis'
        },
        series: [
          {
            data: this.trendData,
            type: 'line',
            areaStyle: {//覆盖区域的渐变色
            	normal: {
            		color: {
                  type: 'linear',x: 0,y: 0,x2: 0,y2: 1,
                  colorStops: [
                    {
                      offset: 0, color: 'rgba(58,132,255, 0.8)' // 0% 处的颜色
                    },
                    {
                      offset: 1, color: 'rgba(58,132,255, 0)' // 100% 处的颜色
                    }
                  ],
                  global: false // 缺省为 false
		       		  },
            	}
            },
            lineStyle: {
              normal: {
                color: '#2891FF'
              }
            },
            itemStyle : {
              normal : {
                color:'#2891FF',
              }
            }
          }
        ]
      };
      this.trendChart.setOption(option2)

      var option3 = {
        tooltip: {
          trigger: 'item'
        },
        series: [
          {
            name: '工单事件分类',
            type: 'pie',
            radius: ['0%', '70%'],
            itemStyle: {
              normal: {
                color: function (colors) {
                  var colorList = ['#2891FF', '#FF8700', '#83B5F7', '#7E94F6', '#85E3D5', '#2891FF'];
                  return colorList[colors.dataIndex];
                }
              },
            },
            data: this.typeData,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)',
              }
            }
          }
        ]
      };
      this.typeChart.setOption(option3)
    },

    selectStatus(e) {
      this.statusInfo.name = e[0].label
      this.statusInfo.eventStatus = e[0].value
      this.getStatistics()
    },
  },
}
</script>

<style scoped lang="scss">
.statistics {
  background-color: #F3F7F8;
  
  .statstics-content {
    padding: 30px 30px 0;
  }
  ::v-deep .AiTopFixed {
    .content {
      background-color: #3975C6;
      color: #fff;
    }
    .icon-img{
      width: 48px;
      height: 48px;
    }
  }
  ::v-deep .AiMore{
    span{
      color: #fff;
    }
  }
  .info-content{
    width: 100%;
    background: #FFF;
    border-radius: 16px;
    margin-bottom: 24px;
    position: relative;
    padding-bottom: 32px;
    .title{
      font-size: 32px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #333;
      line-height: 48px;
      padding: 24px 16px 24px 24px;
      img{
        float: right;
        width: 40px;
        height: 40px;
      }
      .type-select {
        font-size: 26px;
        position: absolute;
        top: 20px;
        right: 32px;
        width: calc(100% - 250px);
        text-align: right;
        line-height: 48px;
      }
    }
    .el-row{
      display: flex;
      padding: 32px 0 60px 0;
      .item{
        flex: 1;
        text-align: center;
        h2{
          font-size: 64px;
          font-family: DINAlternate-Bold, DINAlternate;
          font-weight: bold;
          color: #3B424A;
          line-height: 64px;
          margin-bottom: 8px;
        }
        p{
          font-size: 28px;
          font-family: PingFangSC-Regular, PingFang SC;
          color: #999;
          line-height: 40px;
        }
      }
    }
    .echart-content {
      width: 100%;
      height: 500px;
    }
    .num {
      position: absolute;
      left: 50%;
      top: 320px;
      margin-left: -100px;
      font-size: 40px;
      font-weight: 600;
      width: 200px;
      text-align: center;
    }
  }
  .pad-b120{
    background-color: #F3F7F8;
    padding-bottom: 120px;
  }
}
</style>
