<template>
  <!-- 监控日志 -->
  <div class="ccdjqk from-clues">
    <!-- 头部搜索 -->
    <div class="from-clues-header">
      <el-form ref="form" :model="form" label-width="100px">
        <Breadcrumb />
        <el-row class="mb-5">
          <el-col :span="4">
            <el-form-item label="开始日期" class="d-flex">
              <el-date-picker class="width100" :clearable="false" type="date" placeholder="开始日期"
                :picker-options="pickerOptionsStart" v-model="form.startDate"
                value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="结束日期" class="d-flex">
              <el-date-picker class="width100" :clearable="false" type="date" placeholder="结束日期"
                :picker-options="pickerOptionsEnd" v-model="form.endDate" value-format="yyyy-MM-dd HH:mm:ss"
                @change="endDateChange"></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="from-clues-content echarts-box" v-if="chartData.length">
      <div id="myChart" class="chart" style="height:100%;width:100%;"></div>
    </div>
    <div class="from-clues-content echarts-box center" v-else>暂无数据</div>
  </div>
</template>
<script>
  import { mapGetters } from "vuex";
  import { djqk } from "@/api/searchRecord.js";
  import { getFirstDayOfSeason, timeFormat } from "@/utils/operation";
  export default {
    name: "jktj",
    data () {
      return {
        // 开始日期限制
        pickerOptionsStart: {
          disabledDate: (time) => {
            if (this.form.endDate) {
              return time.getTime() > new Date(this.form.endDate).getTime();
            }
          },
        },
        // 结束日期限制
        pickerOptionsEnd: {
          disabledDate: (time) => {
            if (this.form.startDate) {
              return time.getTime() < new Date(this.form.startDate).getTime();
            }
          },
        },
        // 搜索表单
        form: {
          startDate: getFirstDayOfSeason(),
          endDate: timeFormat(new Date(), true),
        },
        chartData: []
      };
    },
    mounted () {
      // 财产登记情况
      this.getProcessCounts();
    },
    computed: {
      ...mapGetters(["dicData"]),
    },
    methods: {
      endDateChange (val) {
        this.form.endDate = timeFormat(new Date(val), true)
      },
      async getProcessCounts () {
        this.chartData = [];
        let { result: res } = await djqk(this.form)
        //获取图表配置项需要的数据
        this.chartData = res;
        this.$nextTick(() => {
          // 初始化图表
          this.chartData.length && this.echartInit(this.chartData)
        });

      },
      // 重置
      resetForm () {
        this.form = {
          startDate: getFirstDayOfSeason(),
          endDate: timeFormat(new Date(), true)
        };
        this.getProcessCounts();
      },
      //图表渲染
      echartInit (chartArr) {
        // 基于准备好的dom，初始化echarts实例
        let myChart = this.$echarts.init(document.getElementById("myChart"));
        // 绘制图表
        myChart.setOption({
          color: ["#13E5FF"],
          tooltip: {
            show: true,
            trigger: "axis",
            textStyle: {
              fontSize: 16, // 字体大小
            },
          },
          grid: {
            top: 120,
            bottom: 100,
          },
          label: {
            color: 'inherit',
          },
          xAxis: [
            {
              type: "category",
              data: chartArr.map(item => item.name),
              axisLabel: {
                textStyle: {
                  show: true,
                  color: this.BASE_API.echartTextColor,
                  fontSize: "16"
                }
              }
            }
          ],
          yAxis: [
            {
              type: "value",
              name: "数量/个",
              nameTextStyle: {
                color: this.BASE_API.echartTextColor,
                fontSize: "16",
              },
              axisLabel: {
                textStyle: {
                  show: true,
                  color: this.BASE_API.echartTextColor,
                  fontSize: "16",
                },
              },
            },
          ],
          series: [
            {
              type: "bar",
              //显示数值
              itemStyle: {
                normal: {
                  label: {
                    show: true, //开启显示
                    position: "top", //在上方显示
                  },
                },
              },
              barMaxWidth: '60',
              data: chartArr.map(item => item.count),
            },
          ],
        });
      },
    },
  };
</script>
<style scoped lang="scss">
  .ccdjqk {
    flex-direction: column;

    .rows {
      margin-left: 100px;
    }

    .center {
      line-height: 50vh;
      text-align: center;
      color: #b6b5b5;
    }
  }
</style>