<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: "",
      },
    };
  },
  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;
      //行政区代码过滤
      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",
          },
        },
        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: 50,
            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",
            barMaxWidth: '60',
            data: this.chartData.map((item) => {
              return item.success;
            }),
          },
          {
            name: "失败",
            type: "bar",
            barMaxWidth: '60',
            data: this.chartData.map((item) => {
              return item.failure;
            }),
          },
          {
            name: "成功率",
            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>