<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="行政区">
              <el-select v-model="form.qxdm" class="width100" clearable placeholder="行政区">
                <el-option v-for="item in dicData['A20']" :key="item.DCODE" :label="item.DNAME" :value="item.DCODE">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <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 type="date" :clearable="false" class="width100" 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="12" class="btnColRight">
            <btn nativeType="cz" @click="resetForm">重置</btn>
            <btn nativeType="cx" @click="getSuucessRate">查询</btn>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <!-- 图表 -->
    <div class="form-clues-content echarts-box" v-if="chartData.length">
      <div id="myChart" class="chart"></div>
    </div>
    <div class="form-clues-content echarts-box center" v-else>暂无数据</div>
  </div>
</template>

<script>
  import { mapGetters } from "vuex";
  import { getFirstDayOfSeason, timeFormat } from "@/utils/operation";
  import business from "@/api/business";
  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();
            }
          },
        },
        recTypeArr: [],
        chartData: [],
        // 搜索表单
        form: {
          startTime: getFirstDayOfSeason(),
          endTime: timeFormat(new Date(), true),
          qxdm: "",
        },
        interval: 50
      };
    },
    mounted () {
      // 查询成功率
      this.getSuucessRate();
    },
    computed: {
      ...mapGetters(["dicData"]),
    },
    methods: {
      endTimeChange (val) {
        this.form.endTime = timeFormat(new Date(val), true)
      },
      async getSuucessRate () {
        this.recTypeArr = [];
        this.chartData = [];
        let { result: res } = await business.getSuucessRate(
          this.form.startTime,
          this.form.endTime,
          this.form.qxdm
        );
        this.chartData = res;

        let maxData = Math.max.apply(Math, this.chartData.map(item => { return item.failure }))
        this.interval = Math.ceil(maxData / 10)
        //行政区代码过滤
        res.length > 0 &&
          res.forEach((item) => {
            this.recTypeArr.push(item.recTypeName);
          });
        this.$nextTick(() => {
          // 初始化图表
          this.chartData.length && this.echartInit();
        });
      },
      // 重置
      resetForm () {
        this.form = {
          startTime: getFirstDayOfSeason(),
          endTime: timeFormat(new Date(), true),
          qxdm: "",
        };
        this.getSuucessRate();
      },
      echartInit () {
        let _this = this;
        // 基于准备好的dom，初始化echarts实例
        let myChart = this.$echarts.init(document.getElementById("myChart"));
        // 绘制图表
        myChart.setOption({
          color: ["#13E5FF", "#C99E68", "#E873B2", "#ffaf48"],
          tooltip: {
            trigger: "axis",
            formatter: '{b}<br/>{a0}：{c0}个<br/>{a1}：{c1}个<br/>{a2}：{c2}%',
            axisPointer: {
              type: "cross",
              crossStyle: {
                color: "#fff",
              },
            },
          },
          legend: {
            data: ["成功", "失败", "成功率"],
            top: '16',
            textStyle: {
              show: true,
              color: "#fff",
              fontSize: "16",
            },
          },
          label: {
            color: 'inherit',
          },
          xAxis: [
            {
              type: "category",
              data: _this.recTypeArr,
              axisPointer: {
                type: "shadow",
              },
              axisLabel: {
                textStyle: {
                  show: true,
                  color: "#fff",
                  fontSize: "16",
                },
                formatter: function (val) {
                  let c = document.createElement("canvas");
                  const ctx = c.getContext("2d");
                  const arr = val.split("");
                  arr
                    .map((item) => ctx.measureText(item).width)
                    .reduce((pre, next, index) => {
                      const nLen = pre + next;
                      if (nLen > 40) {
                        arr[index - 1] += "...";
                        return next;
                      } else {
                        return nLen;
                      }
                    });
                  c = null;
                  let ind = arr.findIndex((i) => {
                    return i.indexOf("...") > -1;
                  });
                  let newArr = ind > 0 ? arr.splice(0, ind + 1) : arr;
                  return newArr.join("");
                },
              },
            },
          ],
          yAxis: [
            {
              type: "value",
              name: "数量/个",
              nameTextStyle: {
                color: "#fff",
                fontSize: "16",
              },
              // interval: this.interval,
              axisLabel: {
                formatter: "{value}",
                textStyle: {
                  show: true,
                  color: "#fff",
                  fontSize: "16",
                },
              },
            },
            {
              type: "value",
              name: "成功率",
              nameTextStyle: {
                color: "#fff",
                fontSize: "16",
              },
              splitNumber: 2,
              axisLabel: {
                formatter: "{value} %",
                textStyle: {
                  show: true,
                  color: "#fff",
                  fontSize: "16",
                },
              },
            },
          ],
          series: [
            {
              name: "成功",
              type: "bar",
              //显示数值
              itemStyle: {
                normal: {
                  label: {
                    show: true, //开启显示
                    position: "top", //在上方显示
                  },
                },
              },
              barMaxWidth: '60',
              data: this.chartData.map((item) => {
                return item.success;
              }),
            },
            {
              name: "失败",
              type: "bar",
              //显示数值
              itemStyle: {
                normal: {
                  label: {
                    show: true, //开启显示
                    position: "top", //在上方显示
                  },
                },
              },
              barMaxWidth: '60',
              data: this.chartData.map((item) => {
                return item.failure;
              }),
            },
            {
              name: "成功率",
              //显示数值
              itemStyle: {
                normal: {
                  label: {
                    show: true, //开启显示
                    position: "top", //在上方显示
                  },
                },
              },
              type: "line",
              barMaxWidth: '60',
              yAxisIndex: 1,
              data: this.chartData.map((item) => {
                return item.rate;
              }),
            },
          ],
        });
      },
    },
  };
</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;
      color: #b6b5b5;
    }

    .echarts-box {
      display: flex;
      justify-content: center;
      height: 500px;

      .chart {
        width: 100%;
        height: 100%;
      }
    }

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