<template>
  <!-- 监控日志 -->
  <div class="jktjDetail form-clues">
    <!-- 头部搜索 -->
    <el-form
      ref="form"
      :model="form"
      :inline="true"
      class="from-clues-header"
      label-width="100px"
    >
      <el-row class="rows">
        <el-col :span="8">
          <el-form-item label="开始日期">
            <el-date-picker
              v-model="valueTime"
              value-format="yyyy/MM/dd HH:mm:ss"
              type="datetimerange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            >
            </el-date-picker>
          </el-form-item>
        </el-col>
        <!-- 操作按钮 -->
        <el-col :span="3" class="btnColRight">
          <btn nativeType="cz" @click="resetForm">重置</btn>
          <btn nativeType="cx" @click="getProcessCounts">查询</btn>
        </el-col>
      </el-row>
    </el-form>
    <!-- 表格 -->
    <div class="form-clues-content echarts-box" v-if="pieChartsData.length">
      <div id="myChart" class="chart"></div>
      <div id="myChart-bar" class="chart-bar"></div>
    </div>
    <div class="form-clues-content echarts-box center" v-else>暂无数据</div>
  </div>
</template>
<script>
import { mapGetters } from "vuex";
import efficient from "@/api/efficient";
import { getFirstDayOfSeason, timeFormat } from "@/utils/operation";
export default {
  name: "jktj",
  data() {
    return {
      // 开始结束日期限制
      pickerOptionsStart: {
        disabledDate: (time) => {
          if (this.form.endTime) {
            return time.getTime() >= new Date(this.form.endTime).getTime();
          }
        },
      },
      // 结束日期限制
      pickerOptionsEnd: {
        disabledDate: (time) => {
          if (this.form.startTime) {
            return time.getTime() <= new Date(this.form.startTime).getTime();
          }
        },
      },
      // 搜索表单
      valueTime: [getFirstDayOfSeason(), timeFormat(new Date(),true)],
      // valueTime: ["2022/01/01 00:00:00", timeFormat(new Date())],
      pieChartsData: [],
    };
  },
  created() {
    this.getProcessCounts();
  },
  mounted() {},
  computed: {
    ...mapGetters(["dicData"]),
  },
  methods: {
    //查询各区县办件数量
    async getProcessCounts() {
      this.pieChartsData = [];
      let { result: res } = await efficient.getProcessCounts(
        this.valueTime[0],
        this.valueTime[1]
      );
      //获取图表配置项需要的数据
      res.length > 0 &&
        res.forEach((item) => {
          this.pieChartsData.push({
            //登记数量
            value: item.counts,
            //登记数量
            name: item.recTypeName,
            //登记类型代码
            groupId: item.recType,
          });
        });
      // 初始化图表
      this.echartInit();
      this.barChartInit(res[0].recType);
    },
    // 重置
    resetForm() {
      this.valueTime = [getFirstDayOfSeason(), timeFormat(new Date(),true)];
      this.getProcessCounts();
    },
    //玫瑰图初始化
    echartInit() {
      let _this = this;
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById("myChart"));
      // 绘制图表
      myChart.setOption({
        legend: {
          bottom: "6%",
          left: "center",
          textStyle: {
            color: "#fff",
          },
        },
        tooltip: {
          trigger: "item",
          formatter: "{b} : {c}",
        },
        series: [
          {
            name: "各业务类型办理数量",
            type: "pie",
            radius: [0, 250],
            center: ["50%", "30%"],
            roseType: "area",
            itemStyle: {
              borderRadius: 8,
            },
            label: {
              show: false,
            },
            data: this.pieChartsData,
          },
        ],
      });
      //添加点击事件
      myChart.on("click", function (param) {
        _this.barChartInit(param.data.groupId);
      });
      //默认选中第一个
      let index = 1;
      myChart.dispatchAction({
        type: "highlight",
        seriesIndex: 0,
        dataIndex: 0,
      });
      myChart.on("mouseover", function (e) {
        if (e.dataIndex != index) {
          myChart.dispatchAction({
            type: "downplay",
            seriesIndex: 0,
            dataIndex: index,
          });
        }
      });
      myChart.on("mouseout", function (e) {
        index = e.dataIndex;
        myChart.dispatchAction({
          type: "highlight",
          seriesIndex: 0,
          dataIndex: e.dataIndex,
        });
      });
    },
    //柱图初始化
    async barChartInit(recType) {
      //请求recType对应业务的各区县数据
      let { result: res } = await efficient.getProcessDays(
        recType,
        this.valueTime[0],
        this.valueTime[1]
      );
      let xzqArr = [];
      //行政区代码过滤
      res.length > 0 &&
        res.forEach((item) => {
          xzqArr.push(
            this.dicData["A20"].filter((i) => {
              return i.DCODE == item.qxdm;
            })[0].DNAME
          );
        });
      let myChartBar = this.$echarts.init(
        document.getElementById("myChart-bar")
      );
      myChartBar.setOption({
        color: ["#00bdb1", "#ff6e6e", "#3f99ff", "#ffaf48"],
        tooltip: {
          show: true,
          trigger: "axis",
          textStyle: {
            fontSize: 16, // 字体大小
          },
          extraCssText: "width:220px;height:160px;", // 背景色
        },
        grid: {
          top: 120,
        },
        legend: {
          data: ["最短用时", "平均用时", "最长用时"],
          top: 20,
          textStyle: {
            show: true,
            color: "#fff",
            fontSize: "16",
          },
        },
        xAxis: [
          {
            type: "category",
            data: xzqArr,
            axisLabel: {
              interval: 0,
              textStyle: {
                show: true,
                color: "#fff",
                fontSize: "20",
              },
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            name: "单位：天",
            nameTextStyle: {
              color: "#fff",
              fontSize: "16",
            },
            axisLabel: {
              textStyle: {
                show: true,
                color: "#fff",
                fontSize: "16",
              },
            },
          },
        ],
        series: [
          {
            type: "bar",
            name: "最短用时",
            data: res.map((item) => item.minDay),
          },
          {
            type: "bar",
            name: "平均用时",
            data: res.map((item) => item.avgDay),
          },
          {
            type: "bar",
            name: "最长用时",
            data: res.map((item) => item.maxDay),
          },
        ],
      });
    },
  },
};
</script>
<style scoped lang="scss">
@import "~@/styles/public.scss";

.jktjDetail {
  height: 100%;
  display: flex;
  flex-direction: column;
  .rows {
    margin-left: 100px;
  }
  .center {
    line-height: 50vh;
    text-align: center;
  }
  .echarts-box {
    display: flex;
    justify-content: center;
    .chart {
      width: 40%;
      height: 100%;
      float: left;
    }
    .chart-bar {
      width: 60%;
    }
  }

  .form-clues-content {
    flex: 1;
    height: 100%;
    color: #b6b5b5;
  }
}
</style>
<style scoped lang="scss">
@import "~@/styles/public.scss";
</style>