<template>
  <modulen>
    <template #title>病害</template>
    <template #end>
      <date-switcher
        :type="2"
        :selectTime="1"
        :showDateNum="true"
        v-model="selectType"
        @change="handleChangeDate"
      ></date-switcher>
    </template>
    <div class="bh-cont">
      <div class="wt-cont-item" >
        <div class="ejbt">病害数量（个） <span class="total">总数:&nbsp;&nbsp;&nbsp;{{total}}</span></div>
        <div class="bh-left-charts" >
          <div class="pie-charts1">
            <Ect :options="ectOpts1" :default='0' v-if="opDataNum?.length"/>
            <empty v-else/>
          </div>
          <div class="ectOpts1-leng">
            <div
              v-for="(item, index) in opDataNum"
              :key="index"
              class="ect-lecell"
            >
              <div class="elcll-left">
                <span
                  class="colorbox"
                  :style="{ background: opNumColor[index] }"
                ></span>
                <span class="elcll-text1">{{ item.name }}</span>
              </div>
              <div class="elcll-right">{{ item.value }}</div>
              <span class="ect-lecell-icon"
                ><i class="el-icon-caret-top"></i
              ></span>
            </div>
          </div>
        </div>
      </div>
   
      <div class="wt-cont-item"  >
        <div class="ejbt">病害类型比较  <span class="detail" @click="goDetail">病害明细<i class="el-icon-caret-right"></i></span></div>
        <div class="pie-charts2">
          <Ect :options="ectOpts2" :default='1' v-if="opDataNum?.length"/>
          <empty v-else/>
        </div>
      </div>
   
    </div>
  </modulen>
</template>

<script>
import { diseaseCount, diseaseCountType } from "@/api/curingBusiness";
import { generateKey } from "@/api/operation";
import { format } from "echarts";
import moment from "moment";
export default {
  data() {
    return {
      total:0,
      selectType: 1,
      ectOpts1: {},
      opDataNum: [],
      opNumColor: ["#98A2A6", "#3DC6FF", "#FFCE5A", "#00DDCC", "#da63a1"],
      ectOpts2: {},
      opDataType: [
        {
          name: "交通安全",
          value: 45,
        },
        {
          name: "总则",
          value: 12,
        },
        {
          name: "计日工",
          value: 55,
        },
        {
          name: "站房",
          value: 21,
        },
        {
          name: "路面",
          value: 21,
        },
        {
          name: "保洁",
          value: 21,
        },
        {
          name: "桥梁",
          value: 21,
        },
        {
          name: "路基",
          value: 21,
        },
        {
          name: "绿化",
          value: 21,
        },
        {
          name: "隧道",
          value: 21,
        },
      ],
      query: {
        orgLevel: 0,
        filterOrgVal: "",
        timeLevel: 0, //0-年 1-月
        timeVal: moment(new Date()).format("yyyy"), //年-yyyy  月=yyyYMM
      },
      query2: {
          timemode:"year",
          timeflag:moment(new Date()).format('yyyy'), //年-yyyy
          level:0,
          dimension:""
      },
    };
  },
  computed: {
    getDate() {
      return this.$store.state.appDate;
    },
    selectRoad() {
      return this.$store.state.road.selectRoadId;
    },
  },
  watch: {
    getDate(newVal) {
      // 年
      if (this.selectType === 1) {
        this.query.timeVal = moment(newVal).format("yyyy");
        this.query2.timemode = 'year'
        this.query2.timeflag =  moment(newVal).format("yyyy")
      } else if (this.selectType === 2) {
        // 月
        this.query.timeVal = moment(newVal).format("yyyyMM");
        this.query2.timemode = 'month'
        this.query2.timeflag =  moment(newVal).format("yyyyMM")
      } else {
        // 日
        this.query.timeVal = moment(newVal).format("yyyyMMDD");
      }

      this.getData();
    },
    selectRoad(newVal) {
      const level = this.$store.state.road.selectLevel;
      const roadId = newVal ? newVal[level - 1] : "";
      this.query.orgLevel = level;
      this.query.filterOrgVal = roadId;
      this.query2.level = level;
      this.query2.dimension = roadId
      this.getData();

    },
  },
  mounted() {
    // this.getData();
  },
  methods: {
// 跳转明细
goDetail(){
  generateKey().then((res) => {
    window.open(`http://183.64.175.153:8888/fvue/login?tokenKey=${res.data}&routerName=virusManagementChild`)
     });
},
    handleChangeDate(value) {
      this.selectType = value;
      // 年
      if (value === 1) {
        this.query.timeLevel = 0;
        this.query.timeVal = moment(this.getDate).format("yyyy");
        // this.query2.level = 0;
        this.query2.timemode = 'year'
        this.query2.timeflag =  moment(this.getDate).format("yyyy")
      } else if (value === 2) {
        // 月
        this.query.timeLevel = 1;
        this.query.timeVal = moment(this.getDate).format("yyyyMM");
        // this.query2.level = 1;
        this.query2.timemode = 'month'
        this.query2.timeflag =  moment(this.getDate).format("yyyyMM")
      } else {
        // 日
      }
      this.getData();
    },
    async getData() {
      // 病害数量
      const data = await diseaseCount(this.query);
      this.opDataNum = [];
      if (data.msgContent) {
        data.msgContent.forEach((ele) => {
          this.opDataNum.push({
            name: ele.orgName,
            value: ele.diseaseCount,
            disFinishedCount: ele.disFinishedCount,
            disUnfinishedCount: ele.disUnfinishedCount,
          });
        });
      }
      this.total = 0
      this.opDataNum.forEach((item)=>{
      this.total += item.value
     })
      // 病害类型
      const data1 = await diseaseCountType(this.query2);
      this.opDataType = [];
      if (data1.msgContent) {
        data1.msgContent.forEach((ele) => {
          // if (ele.diseaseCount !== 0) {
          this.opDataType.push({
            name: ele.subjectName,
            value: ele.diseaseCount,
          });
          // }
        });
      }
      this.getCharts();
    },
    getCharts() {
      // 病害数量
      this.ectOpts1 = {
    //     title: {
    //   show: true,
    //   text: "病害总数", //主标题
    //   subtext:  this.total , //副标题：企业数量值，此处用标题方式来显示
    //   left: "center",
    //   top: "35%",
    //   z: 0,
    //   zlevel: 100,
    //   textStyle: { //设置主标题的 样式
    //     textAlign: "center",
    //     color: "rgba(145,213,255,0.85)",
    //     fontSize: 14
    //   },
    //   subtextStyle: { //设置副标题的样式
    //     textAlign: "center",
    //     color: "#fff",
    //     fontSize: 30,
    //     fontWeight: 600
    //   }
    // },
        // tooltip: {
        //            trigger: 'item'
        //          },
        color: this.opNumColor,
        series: [
          {
            name: "病害数量",
            type: "pie",
            radius: ["65%", "80%"],
            emphasis: {
              label: {
                show: true,
                formatter: function (val) {
                  return [
                    "{a|" + val.data.name + "}",
                    "",
                    "{a|处理中" + val.data.disUnfinishedCount +  "}",
                    "{a|已处理" + val.data.disFinishedCount +  "}",
                    "{a|总数" + (val.data.disUnfinishedCount+val.data.disFinishedCount) + "}",
                  ].join("\n");
                },
                rich: {
                  a: {
                    color: "#fff",
                    fontSize: 16,
                    height: 22,
                  },
                  b: {
                    color: "#fff",
                    lineHeight: 30,
                    fontSize: 36,
                    // fontWeight: 800,
                    marginTop: 10,
                    fontFamily: "DinNextRegular",
                  },
                },
                // fontSize: '40',
                // fontWeight: 'bold'
              },
            },
            label: {
              show: false,
              position: "center",
            },
            labelLine: {
              show: false,
            },
            itemStyle: {
              borderColor: "#030E15",
              borderWidth: 5,
            },
            data: this.opDataNum,
          },
        ],
      };
      // 病害类型
      this.ectOpts2 = {
        tooltip: {
          show: false,
        },
        legend: [
          {
            orient: "vertical",
            itemGap: 30,
            formatter: function (name) {
              let formatData = format.truncateText(name, 50, "overflow", "...");
              return formatData;
            },
            top: "3%",
            left: "50%",
            textStyle: {
              width: 30,
              color: "#fff",
            },
            // data: this.opDataType.slice(0, 5)
            data: this.opDataType,
          },
        ],
        color: [
          "#4999FF",
          "#00DDCC",
          "#98A2A6",
          "#FFCE5A",
          "#FFFFFF",
          "#00E3FF",
          "#4999FF",
          "#A646FF",
          "#FF5757",
          "#58D9EE",
        ],
        series: [
          {
            legendHoverLink: false,
            avoidLabelOverlap: true,
            name: "病害类型",
            type: "pie",
            center: ["21%", "40%"],
            radius: ["45%", "60%"],
            emphasis: {
              label: {
                show: true,
                formatter: function (val) {
                  return [
                    "{a|" + val.data.value + "}",
                    "",
                    "{b|" + val.data.name + "}",
                  ].join("\n");
                },
                rich: {
                  a: {
                    color: "#fff",
                    lineHeight: 30,
                    fontSize: 36,
                    fontWeight: 800,
                    fontFamily: "DinNextRegular",
                  },
                  b: {
                    color: "#fff",
                    fontSize: 16,
                    height: 20,
                  },
                },
                // fontSize: '40',
                // fontWeight: 'bold'
              },
            },
            label: {
              show: false,
              position: "center",
            },
            labelLine: {
              show: false,
            },
            itemStyle: {
              borderColor: "#030E15",
              borderWidth: 5,
            },
            data: this.opDataType,
          },
        ],
      };
    },
  },
};
</script>

<style lang="scss" scoped>
@import "~/styles/viewport-convert.scss";
.bh-cont {
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding-top: 15px;
  .wt-cont-item {
    width: 48%;
  }
  .ejbt {
    width: 100%;
    height: 15px;
    background: url("@/assets/images/curingBussiness/sectitbg.png");
    background-size: 100% 100%;
    font-size: vw(11);
    padding-left: vw(23);
    line-height: 15px;
  }
  .wtc-charts {
    width: 100%;
    height: vh(280);
    position: relative;
    margin-top: 15px;
  }
  .bh-left-charts {
    display: flex;
    justify-content: space-around;
    margin-top: vh(35);
  }
  .pie-charts1 {
    width: vw(210);
    height: vw(210);
    background: url("@/assets/images/curingBussiness/pie-bg.png");
    background-size: 100% 100%;
    position: relative;
  }
  .ectOpts1-leng {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: vw(205);
    height: vh(250);
  }
  .ect-lecell {
    width: 100%;
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(59, 152, 219, 0.2);
    padding: 0 vw(13);
    margin-bottom: vh(15);
  }
  .elcll-left {
    display: flex;
    align-items: center;
  }
  .colorbox {
    display: block;
    width: vw(10);
    height: vh(7);
    background: #3dc6ff;
    margin-right: 15px;
  }
  .elcll-text1 {
    font-size: vw(12);
    color: #909fac;
  }
  .elcll-right {
    font-size: vw(18);
    font-family: "DinNextRegular";
  }
  .ect-lecell-icon {
    font-size: 13px;
    color: #3dc6ff;
    position: absolute;
    transform: rotate(45deg);
    right: -5px;
    top: -8px;
  }
  .pie-charts2 {
    width: vw(440);
    height: vw(200);
    margin: auto;
    margin-top: vh(45);
    position: relative;
  }
}
.total{
  position: absolute;
  left: vw(400);
  display: inline-block;
  font-size: 14px;
}
.detail{
  position: absolute;
  right: vw(25);
  display: inline-block;
  font-size: 14px;
  cursor: pointer;
}
</style>
