<template>
  <div class="statistics">
    <div class="select-gird">
      <AiPagePicker type="gird" valueObj nodeKey="id" @select="handleSelectGird" class="right-span"
        :params="{formType:2, axiosUrl:'/app/apppatrolreportinfo/listByInfo'}">
        <!-- <AiMore v-model="selectGird.girdName" icon="arrow-right" placeholder="选择网格"/> -->
        <div class="gird-content">
          <div class="gird-name">
            <img src="https://cdn.sinoecare.com/i/2024/07/17/6697868b9170c.png" alt="">
            <span>{{selectGird.girdName || '所属网格'}}</span>
          </div>
          <u-icon name="arrow-down" color="#666" size="24" style="margin-left: 4px" />
        </div>
      </AiPagePicker>
    </div>
    <div class="statstics-content">
      <div class="el-row">
        <div class="item" v-for="(item, index) in todayList" :key="index" @click="toList(item)">
          <div class="label"><span></span>{{ item.label }}</div>
          <h2>{{ item.value }}</h2>
        </div>
      </div>
      <div class="title">事件办结率</div>
      <div class="info-content">
        <canvas canvas-id="finish" id="finish" class="echart-content e-canvas" v-if="showFinish"/>
        <AiEmpty v-else></AiEmpty>
      </div>
      <div class="title">上报趋势图</div>
      <div class="info-content">
        
        <AiEmpty v-if="!trendData.length"></AiEmpty>
        <canvas canvas-id="trend" id="trend" class="echart-content" v-else/>
      </div>
      <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('clapEventStatusHistory')" value-name="dictValue"
          label-name="dictName" @confirm="selectStatus"></u-select>
      </div>
      <div class="info-content">
        <AiEmpty v-if="!typeData.length"></AiEmpty>
        <canvas canvas-id="type" id="type" class="echart-content" v-else/>
      </div>
      <div class="pad-b120"></div>
    </div>
  </div>
</template>

<script>
import {mapState} from 'vuex'
// import echarts from 'echarts'
import uCharts from "./components/echarts/u-charts.min.js";
var uChartsInstance = {};
export default {
  data() {
    return {
      todayList: [],
      selectGird: {id: '', girdName: ''},
      finishChart: null,
      trendChart: null,
      typeChart: null,
      show: false,
      finishData: [],
      showFinish: false,
      finshNum: '',
      trendData: [],
      trendDataX: [],
      typeData: [],
      statusInfo: {name: '', eventStatus: ''},
    }
  },
  computed: {
    ...mapState(['user']),
  },

  mounted() {
    this.getGirdInfo()
  },
  methods: {
    getStatistics() {
      this.todayList = [], this.finishData = [], this.trendDataX = [], this.trendData = [], this.typeData = [], this.showFinish = false
      this.$instance.post(`/app/apppatrolreportinfov2/countByGirdId?girdId=${this.selectGird.id}&eventStatus=${this.statusInfo.eventStatus}`).then((res) => {
        if (res.code == 0) {

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

          Object.keys(res.data.finishCountMap).forEach((key) => {
            var info = {
              'name': key,
              'value': Number(res.data.finishCountMap[key])
            }
            this.finishData.push(info)

            if (res.data.finishCountMap[key] > 0) {
              this.showFinish = true
            }
          })

          console.log(this.finishData)

          if (this.showFinish) {
            var num = res.data.finishCountMap['累计事件办结'] / res.data.finishCountMap['累计事件上报']
            this.finshNum = Number(num * 100).toFixed(2)
          }
          res.data.dateCountList.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)
          })

          console.log(this.finishData)
          if (this.showFinish) {
            this.$nextTick(() => {
              this.finishChartInit('finish')
            })
          }
          if (this.trendData.length) {
            this.$nextTick(() => {
              this.trendChartInit('trend')
            })
          }
          if (this.typeData.length) {
            this.$nextTick(() => {
              this.typeChartInit('type')
            })
          }

        }
      })
    },

    getGirdInfo() {
      this.$instance.post(`/app/apppatrolreportinfo/getRootByGirdMember`).then((res) => {
        if (res.code == 0) {
          this.selectGird.girdName = res.data.girdName
          this.selectGird.id = res.data.id
          this.$dict.load('clapEventStatusHistory').then(() => {
            this.getStatistics()
          })
        }
      })
    },
    finishChartInit(id) {
      // console.log(this.finishData)
      var ctx = uni.createCanvasContext(id, this);
      uChartsInstance[id] = new uCharts({
        type: "ring",
        width: 350,
        height: 250,
        context: ctx,
        series: [
          {
            data: this.finishData
          }
        ],
        animation: true,
        rotate: false,
        rotateLock: false,
        background: "#FFFFFF",
        color: ['#7E94F6', '#85E3D5', '#2891FF'],
        padding: [5,5,5,5],
        dataLabel: true,
        enableScroll: false,
        legend: {
          show: true,
          position: "bottom",
          lineHeight: 25
        },
        title: {
          name: "办结率",
          fontSize: 12,
          color: "#222"
        },
        subtitle: {
          name: this.finshNum+'%',
          fontSize: 20,
          color: "#5C8FFA"
        },
        extra: {
          ring: {
            ringWidth: 40,
            activeOpacity: 0.5,
            activeRadius: 10,
            offsetAngle: 0,
            labelWidth: 5,
            border: false,
            borderWidth: 2,
            borderColor: "#FFFFFF"
          }
        }
      })

      // const query = uni.createSelectorQuery().in(this);
      // query.select('#' + id).fields({ node: true, size: true }).exec(res => {
      //   console.log(res)
      //   if (res[0]) {
      //     const canvas = res[0].node;
      //     const ctx = canvas.getContext('2d');
      //     canvas.width = 350
      //     canvas.height = 250
      //     uChartsInstance[id] = new uCharts({
      //       type: "ring",
      //       width: 350,
      //       height: 250,
      //       context: ctx,
      //       series: [
      //         {
      //           data: this.finishData
      //         }
      //       ],
      //       animation: true,
      //       rotate: false,
      //       rotateLock: false,
      //       background: "#FFFFFF",
      //       color: ['#7E94F6', '#85E3D5', '#2891FF'],
      //       padding: [5,5,5,5],
      //       dataLabel: true,
      //       enableScroll: false,
      //       legend: {
      //         show: true,
      //         position: "bottom",
      //         lineHeight: 25
      //       },
      //       title: {
      //         name: "办结率",
      //         fontSize: 12,
      //         color: "#222"
      //       },
      //       subtitle: {
      //         name: this.finshNum+'%',
      //         fontSize: 20,
      //         color: "#5C8FFA"
      //       },
      //       extra: {
      //         ring: {
      //           ringWidth: 40,
      //           activeOpacity: 0.5,
      //           activeRadius: 10,
      //           offsetAngle: 0,
      //           labelWidth: 5,
      //           border: false,
      //           borderWidth: 2,
      //           borderColor: "#FFFFFF"
      //         }
      //       }
      //     });
      //   }else{
      //     console.error("[uCharts]: 未获取到 context");
      //   }
      // });
    },
    trendChartInit(id) {
      const ctx = uni.createCanvasContext(id, this);
      uChartsInstance[id] = new uCharts({
        type: "line",
        context: ctx,
        width: 346,
        height: 232,
        categories: this.trendDataX,
        series: [
          {
            name: '',
            data: this.trendData
          }
        ],
        animation: true,
        background: "#FFFFFF",
        color: ["#2891FF"],
        padding: [15, 10, 0, 15],
        enableScroll: false,
        legend: {
          show: false
        },
        xAxis: {
          disableGrid: true,
        },
        yAxis: {
          gridType: "dash",
          dashLength: 2,
        },
        linearType: 'custom',
        serie: {
          linearColor: '#5B8FF9'
        },
        extra: {
          line: {
            type: "straight",
            width: 2,
            activeType: "hollow",
          },
        }
      })
    },
    typeChartInit(id) {
      var ctx = uni.createCanvasContext(id, this);
      uChartsInstance[id] = new uCharts({
        type: "ring",
        width: 350,
        height: 250,
        context: ctx,
        series: [
          {
            data: this.typeData
          }
        ],
        animation: true,
        rotate: false,
        rotateLock: false,
        background: "#FFFFFF",
        color: ['#2891FF', '#FF8700', '#83B5F7', '#7E94F6', '#85E3D5', '#2891FF'],
        padding: [5,5,5,5],
        dataLabel: true,
        enableScroll: false,
        legend: {
          show: true,
          position: "bottom",
          lineHeight: 25
        },
        extra: {
          ring: {
            ringWidth: 40,
            activeOpacity: 0.5,
            activeRadius: 10,
            offsetAngle: 0,
            labelWidth: 5,
            border: false,
            borderWidth: 2,
            borderColor: "#FFFFFF"
          }
        }
      })
    },
    selectStatus(e) {
      this.statusInfo.name = e[0].label
      this.statusInfo.eventStatus = e[0].value
      this.getStatistics()
    },
    handleSelectGird(v) {
      this.selectGird = v || {}
      this.getStatistics()
    },
    toList(row) {
      var searchType = '', typeList = ['', '', '累计上报', '今日上报', '今日办结', '办理中']
      typeList.map((item, index) => {
        if (item == row.label) {
          return searchType = index
        }
      })
      uni.navigateTo({url: `./StatisticsList?searchType=${searchType}&girdId=${this.selectGird.id}`})
    }
  },
}
</script>

<style scoped lang="scss">
.statistics {
  .select-gird {
    width: calc(100% - 64px);
    box-sizing: border-box;
    position: fixed;
    left: 32px;
    z-index: 9;
    padding: 24px;
    background-color: #fff;
    border-radius: 16px;
    .gird-content {
      display: flex;
      justify-content: space-between;
      .gird-name {
        width: calc(100% - 60px);
        font-family: PingFangSC-Medium;
        font-weight: 500;
        font-size: 32px;
        color: #333;
        line-height: 48px;
        img {
          width: 28px;
          height: 28px;
          margin-right: 20px;
        }
      }
    } 
  }
  .statstics-content {
    padding: 128px 30px 200px;
    .el-row {
      .item {
        display: inline-block;
        width: calc(50% - 9px);
        padding: 24px;
        box-sizing: border-box;
        background-color: #fff;
        border-radius: 16px;
        margin: 0 16px 16px 0;
        .label {
          line-height: 40px;
          font-family: PingFangSC-Regular;
          font-size: 28px;
          color: #666;
          margin-bottom: 8px;
          span {
            display: inline-block;
            width: 16px;
            height: 16px;
            margin-right: 8px;
            border-radius: 50%;
          }
        }
        h2 {
          line-height: 64px;
          font-family: PingFangSC-SNaNpxibold;
          font-weight: 600;
          font-size: 48px;
          color: #333;
          padding-left: 24px;
        }
      }
      .item:nth-of-type(1) {
        .label {
          span {
            border: 4px solid #7A8EC5;
          }
        }
      }
      .item:nth-of-type(2) {
        margin-right: 0;
        .label {
          span {
            border: 4px solid #F6BD15;
          }
        }
      }
      .item:nth-of-type(3) {
        .label {
          span {
            border: 4px solid #5C8FFA;
          }
        }
      }
      .item:nth-of-type(4) {
        margin-right: 0;
        .label {
          span {
            border: 4px solid #60DCAA;
          }
        }
      }
    }
  }
  .title {
    font-size: 32px;
    font-family: PingFangSC-Regular, PingFang SC;
    color: #333;
    line-height: 48px;
    padding: 24px;
    .type-select {
      font-size: 26px;
      position: absolute;
      top: 20px;
      right: 32px;
      width: calc(100% - 250px);
      text-align: right;
      line-height: 48px;
    }
  }
  .info-content {
    width: 100%;
    background: #FFF;
    border-radius: 16px;
    margin-bottom: 32px;
    position: relative;
    padding-bottom: 32px;
    img {
      float: right;
      width: 40px;
      height: 40px;
    }

    .echart-content {
      width: 100%;
      height: 500px;
      padding: 0 32px;
      box-sizing: border-box;
    }

    .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>
