<template>
  <modulen>
    <template #title>巡查巡检</template>
    <template #end>
      <date-switcher
        :type="2"
        :showDateNum="true"
        :selectTime="1"
        v-model="selectType"
        @change="handleChangeDate"
      ></date-switcher>
    </template>
    <div class="cur-xcxjcont">
      <!-- <div class="cxj-item">
        <div class="ejbt">重点设施巡检</div>
        <div class="cxj-charts"></div>
      </div> -->
      <div class="cxj-item">
        <div class="ejbt">日常巡检（个）</div>
        <div class="cxj-charts">
          <Ect :options="dlectOpts" v-if="dlcategoryData?.length" />
          <empty v-else/>
        </div>
      </div>
      <div class="cxj-item">
        <div class="ejbt">定期/经常检查（个）</div>
        <div class="cxj-charts">
          <Ect :options="rgectOpts"/>
        </div>
      </div>
    </div>
  </modulen>
</template>

<script>
import { dailyInspectCount, regularInspectCount } from "@/api/curingBusiness";
import moment from "moment";
export default {
  data() {
    return {
      color:['#00dcff','#00f3df'],
      selectType: 1,
      // 日常巡检
      dlectOpts: {},
      dlcategoryData: [],
      // 定期/经常检查
      rgectOpts: {},
      rgcategoryData: [],
      query: {
        level: 0,
        dimension: "",
        timeType: "year", //year-年 month-月
        timeFlag: moment(new Date()).format("yyyy"), //年-yyyy  月=yyyYMM
      },
      terminal: {
        level: 0,
        dimension: "",
        timemode: "year", //year-年 month-月
        timeflag: moment(new Date()).format("yyyy"), //年-yyyy  月=yyyYMM
      },
    };
  },
  computed: {
    getDate() {
      return this.$store.state.appDate;
    },
    selectRoad() {
      return this.$store.state.road.selectRoadId;
    },
  },
  watch: {
    getDate(newVal) {
      if (this.selectType == 1) {
        this.query.timeFlag = moment(newVal).format("yyyy");
        this.terminal.timeflag = moment(newVal).format("yyyy");
      } else {
        this.query.timeFlag = moment(newVal).format("yyyyMM");
        this.terminal.timeflag = moment(newVal).format("yyyyMM");
      }
      this.getData();
    },
    selectRoad(newVal) {
      const level = this.$store.state.road.selectLevel;
      const roadId = newVal ? newVal[level - 1] : "";
      this.query.level = level;
      this.query.dimension = roadId;
      this.terminal.level = level;
      this.terminal.dimension = roadId;
      this.getData();
    },
  },
  mounted() {
    // this.getData();
  },
  methods: {
    handleChangeDate(value) {
       this.selectType = value
      // 年
      if (value === 1) {
        this.query.timeType = "year";
        this.query.timeFlag = moment(this.getDate).format("yyyy");
        this.terminal.timemode = "year";
        this.terminal.timeflag = moment(this.getDate).format("yyyy");
      } else if (value === 2) {
        // 月
        this.query.timeType = "month";
        this.query.timeFlag = moment(this.getDate).format("yyyyMM");
        this.terminal.timemode = "month";
        this.terminal.timeflag = moment(this.getDate).format("yyyyMM");
      }
      this.getData();
    },
    async getData() {
      //日巡检 、夜巡检
      try {
        this.dlcategoryData = [];
        const data = await dailyInspectCount(this.query);
        if (data.msgContent) {
          const list = []
          data.msgContent.forEach((ele) => {
            const val = [
              ele.orgName,
              ele.dayInspectCount,
              ele.nightInspectCount,
            ];
            list.push(val);
          });
          this.dlcategoryData = list
        }
      } catch (err) {}
      try {
        // 定期经常检查
        const data2 = await regularInspectCount(this.terminal);
        this.rgcategoryData = [];
        if (data2.msgContent) {
          const list = []
          data2.msgContent.forEach((ele) => {
            const textval = ele.inspectCount == 0 ? 0 : 0.1;
            const val = [
              ele.faciType,
              ele.inspectCount,
              textval,
              ele.regularCount,
            ];
            list.push(val);
          });
          this.rgcategoryData = list
        }
      } catch (err) {}
      this.getCharts();
    },
    getCharts() {
      // 日巡检、夜巡检
      this.dlectOpts = {
        dataset: {
          dimensions: ["orgName", "dayInspectCount", "nightInspectCount"],
          source: this.dlcategoryData,
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
          },
        },
        grid: {
          left: 60,
          right: 0,
          bottom: 20,
        },
        color: ["#00C8FF", "#00ddcb"],
        legend: {
          // data: ["收入", "车流量"],
          data: ["日巡检", "夜巡检"],
          textStyle: {
            fontSize: 11, //字体大小
            color: "#CBE7FF", //字体颜色
          },
          left: "center",
          borderRadius: 0,
          itemWidth: 17,
          itemHeight: 3,
        },
        xAxis: {
          type: "category",
          // data:   this.dlcategoryData,
          splitLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: "#778FA4",
            },
          },
        },
        yAxis: {
          type: "value",
          name: "巡检个数(个)",
          nameTextStyle: {
            color: "#909FAC",
            fontSize: 12,
            fontWeight: "bold",
          },
          min: 0,
          // max: 250,
          position: "left",
          axisLine: {
            show: true,
          },
          axisLabel: {
            textStyle: {
              color: "#778FA4",
            },
          },
          splitLine: {
            show: false,
          },
        },
        series: [
          {
            name: "日巡检",
            // data: [11, 17, 18, 23, 18],
            itemStyle: {
              normal: {
                color: function (params) {
                  return {
                    type: "linear",
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [
                      {
                        offset: 0,
                        color: "#FFFFFF",
                      },
                      {
                        offset: 0.5,
                        color: "#4999FF",
                      },
                      {
                        offset: 1,
                        color: "#4999FF",
                      },
                    ],
                  };
                },
                barBorderRadius: [10, 10, 0, 0],
              },
            },
            type: "bar",
            barMaxWidth: "10",
            showBackground: true,
            backgroundStyle: {
              color: "rgba(59, 152, 219, 0)",
              borderWidth: 20,
              borderColor: "rgba(59, 152, 219, 0.1)",
            },
            label: {
              show: true,
              position: "top",
              color:'#fff',
              fontFamily: "DinNextRegular",
              fontSize: 13,
            },
          },
          {
            name: "夜巡检",
            // data: [8, 14, 7, 9, 8],
            itemStyle: {
              normal: {
                color: function (params) {
                  return {
                    type: "linear",
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [
                      {
                        offset: 0,
                        color: "#FFFFFF",
                      },
                      {
                        offset: 0.5,
                        color: "#00ddcb",
                      },
                      {
                        offset: 1,
                        color: "#00ddcb",
                      },
                    ],
                  };
                },
                barBorderRadius: [10, 10, 0, 0],
              },
            },
            type: "bar",
            barMaxWidth: "10",
            showBackground: true,
            backgroundStyle: {
              color: "rgba(59, 152, 219, 0)",
              borderWidth: 20,
              borderColor: "rgba(59, 152, 219, 0.1)",
            },
            label: {
              show: true,
              position: "top",
              color: "#fff",
              fontFamily: "DinNextRegular",
              fontSize: 13,
            },
            barGap: "2",
            barCategoryGap: "30px",
          },
        ],
      };
      // 定期经常检查
      this.rgectOpts = {
        dataset: {
          dimensions: [
            "orgName",
            "inspectCount",
            "test",
            "regularCount",
          ],
          source: this.rgcategoryData,
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
          },
          formatter: (params) =>
            `${params[0].axisValue}</br>定期检查：${params[0].data[1]}</br>经常检查：${params[0].data[3]}`,
        },
        grid: {
          left: 40,
          right: 40,
          bottom: 20,
        },
        color: ["#3CAEFF", "#00E3FF"],
        legend: {
          data: ["定期检查", "经常检查"],
          textStyle: {
            fontSize: 11, //字体大小
            color: "#CBE7FF", //字体颜色
          },
          left: "center",
          borderRadius: 0,
          itemWidth: 17,
          itemHeight: 3,
        },
        xAxis: {
          type: "category",
          data: ['桥梁', "涵洞", '边坡', '隧道'],
          splitLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: "#778FA4",
            },
          },
        },
        yAxis: [
          {
            type: "value",
            name: "定期检查",
            nameTextStyle: {
              color: "#909FAC",
              fontSize: 12,
              fontWeight: "bold",
            },
            min: 0,
            // max: 250,
            position: "left",
            axisLine: {
              show: true,
            },
            axisLabel: {
              textStyle: {
                color: "#778FA4",
              },
            },
            splitLine: {
              show: false,
            },
          },
          {
            type: "value",
            name: "经常检查",
            nameTextStyle: {
              color: "#909FAC",
              fontSize: 12,
              fontWeight: "bold",
            },
            min: 0,
            // max: 250,
            position: "right",
            offset: 0,
            axisLine: {
              show: true,
            },
            axisLabel: {
              formatter: "{value}",
              textStyle: {
                color: "#778FA4",
              },
            },
            splitLine: {
              show: false,
            },
          },
        ],
        series: [
          {
            name: "定期检查",
            type: "bar",
            stack: "test",
            // data: [0, 0, 0, 0],
            itemStyle: {
              normal: {
                color: function (params) {
                  return {
                    type: "linear",
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [
                      {
                        offset: 0,
                        color: "rgba(60, 174, 255, 1)",
                      },
                      {
                        offset: 0.5,
                        color: "rgba(60, 174, 255, 1)",
                      },
                      {
                        offset: 1,
                        color: "rgba(60, 174, 255, 0)",
                      },
                    ],
                  };
                },
              },
            },
            showBackground: true,
            backgroundStyle: {
              color: "rgba(59, 152, 219, 0)",
              borderWidth: 40,
              borderColor: "rgba(59, 152, 219, 0.1)",
            },
            barWidth: 8,
            label: {
              show: true,
              position: "top",
              color: "#fff",
              offset: [0, -10],
              fontFamily: "DinNextRegular",
              fontSize: 13,
            },
          },
          {
            name: "test",
            type: "bar",
            stack: "test",
            // data: [0, 0, 0, 0],
            itemStyle: {
              normal: {
                color: "#fff",
                borderWidth: 4,
                borderColor: "#fff",
              },
            },
            barWidth: 20,
          },
          {
            name: "经常检查",
            yAxisIndex: 1,
            // data: [23, 67, 33, 45],
            type: "line",
            smooth: true,
            showSymbol: false,
            itemStyle: {
              color: "#00E3FF",
            },
            lineStyle: {
              width: 2,
              color: "#00E3FF", //折线颜色
              shadowOffsetX: 0, // 折线的X偏移
              shadowOffsetY: 0, // 折线的Y偏移
              shadowBlur: 20, // 折线模糊
              shadowColor: "#00E3FF", //折线颜色
            },
          },
        ],
      };
    },
  },
};
</script>

<style lang="scss" scoped>
@import "~/styles/viewport-convert.scss";
.cur-xcxjcont {
  width: 100%;
  display: flex;
  justify-content: space-between;
  margin-top: 15px;
  .cxj-item {
    flex: 1;
    width: 32%;
    height: vh(300);
  }
  .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;
  }
  .cxj-charts {
    width: 100%;
    height: vh(280);
    position: relative;
    margin-top: 15px;
    // background: chartreuse;
  }
}
</style>
