<template>
  <!-- 监控日志 -->
  <div class="jktjDetail form-clues">
    <!-- 头部搜索 -->
    <div class="from-clues-header">
      <el-form ref="form" :model="form" label-width="100px">
        <el-form-item>
          <Breadcrumb />
        </el-form-item>
        <el-row>
          <el-col :span="4">
            <el-form-item label="开始日期" prop="startTime">
              <el-date-picker type="date" :clearable="false" class="width100" placeholder="开始日期"
                :picker-options="pickerOptionsStart" v-model="form.startTime"
                value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="结束日期" prop="endTime">
              <el-date-picker class="width100" :clearable="false" type="date" placeholder="结束日期"
                :picker-options="pickerOptionsEnd" v-model="form.endTime" value-format="yyyy-MM-dd HH:mm:ss"
                @change="endTimeChange"></el-date-picker>
            </el-form-item>
          </el-col>
          <!-- 操作按钮 -->
          <el-col :span="16" class="btnColRight">
            <btn nativeType="cz" @click="resetForm">重置</btn>
            <btn nativeType="cx" @click="getProcessCounts">查询</btn>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <!-- 表格 -->
    <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();
            }
          },
        },
        form: {
          startTime: getFirstDayOfSeason(),
          endTime: timeFormat(new Date(), true),
        },
        // 搜索表单
        pieChartsData: [],
      };
    },
    created () { },
    mounted () {
      this.getProcessCounts();
    },
    computed: {
      ...mapGetters(["dicData"]),
    },
    methods: {
      endTimeChange (val) {
        this.form.endTime = timeFormat(new Date(val), true);
      },
      //查询各区县办件数量
      async getProcessCounts () {
        this.pieChartsData = [];
        let { result: res } = await efficient.getProcessCounts(
          this.form.startTime,
          this.form.endTime
        );
        //获取图表配置项需要的数据
        res.length > 0 &&
          res.forEach((item) => {
            this.pieChartsData.push({
              //登记数量
              value: item.counts,
              //登记数量
              name: item.recTypeName,
              //登记类型代码
              groupId: item.recType,
            });
          });
        res.length &&
          this.$nextTick(() => {
            // 初始化图表
            this.echartInit();
            this.barChartInit(res[0].recType);
          });
      },
      // 重置
      resetForm () {
        this.form = {
          startTime: getFirstDayOfSeason(),
          endTime: timeFormat(new Date(), true),
        };
        this.getProcessCounts();
      },
      //玫瑰图初始化
      echartInit () {
        let _this = this;
        // 基于准备好的dom，初始化echarts实例
        let myChart = this.$echarts.init(document.getElementById("myChart"));
        // 绘制图表
        myChart.setOption({
          legend: {
            bottom: "2%",
            left: "center",
            textStyle: {
              color: "#fff",
            },
          },
          tooltip: {
            trigger: "item",
            formatter: "{b} : {c}",
          },
          label: {
            color: 'inherit',
          },
          series: [
            {
              name: "各业务类型办理数量",
              type: "pie",
              radius: [0, 250],
              center: ["50%", "45%"],
              roseType: "area",
              itemStyle: {
                borderRadius: 8,
              },
              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.form.startTime,
          this.form.endTime
        );
        //行政区数组
        let xzqArr = [];
        this.dicData["A20"].forEach((item) => {
          xzqArr.push(item.DNAME);
          let tempArr = res.filter((i) => {
            return i.qxdm == item.DCODE;
          });
          if (tempArr.length) {
            item.avgDay = tempArr[0].avgDay;
            item.maxDay = tempArr[0].maxDay;
            item.minDay = tempArr[0].minDay;
          } else {
            item.avgDay = 0;
            item.maxDay = 0;
            item.minDay = 0;
          }
        });
        //补全无数据行政区后的结果数组
        let dealArr = [...this.dicData["A20"]];
        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: "16",
                },
              },
            },
          ],
          yAxis: [
            {
              type: "value",
              name: "单位：天",
              nameTextStyle: {
                color: "#fff",
                fontSize: "16",
              },
              axisLabel: {
                textStyle: {
                  show: true,
                  color: "#fff",
                  fontSize: "16",
                },
              },
            },
          ],
          label: {
            color: 'inherit',
          },
          series: [
            {
              type: "bar",
              //显示数值
              itemStyle: {
                normal: {
                  label: {
                    show: true, //开启显示
                    position: "top", //在上方显示

                  },
                },
              },
              barMaxWidth: "60",
              name: "最短用时",
              data: dealArr.map((item) => item.minDay),
            },
            {
              type: "bar",
              //显示数值
              itemStyle: {
                normal: {
                  label: {
                    show: true, //开启显示
                    position: "top", //在上方显示

                  },
                },
              },
              barMaxWidth: "60",
              name: "平均用时",
              data: dealArr.map((item) => item.avgDay),
            },
            {
              type: "bar",
              //显示数值
              itemStyle: {
                normal: {
                  label: {
                    show: true, //开启显示
                    position: "top", //在上方显示

                  },
                },
              },
              barMaxWidth: "60",
              name: "最长用时",
              data: dealArr.map((item) => item.maxDay),
            },
          ],
        });
      },
    },
  };
</script>
<style scoped lang="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>