<template>
  <div>
    <el-row :gutter="24">
      <el-col :span="2"></el-col>
      <el-col :span="22">
      <el-form
        :model="queryParams"
        ref="queryRef"
        :inline="true"
        v-show="showSearch"
        label-width="100px"
      >
        <el-form-item label="隐患类别" prop="declarationType" style="width: 308px">
          <el-select v-model="queryParams.declarationType" placeholder="请选择隐患类别" clearable>
            <el-option
              v-for="dict in hs_declaration_type"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="发生时间" style="width: 308px">
          <el-date-picker
            v-model="daterangeOccurTime"
            value-format="YYYY-MM-DD"
            type="daterange"
            range-separator="-"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          ></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
          <el-button icon="Refresh" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
    </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="6"></el-col>
      <el-col :span="4">
        <div class="box1">
          <p class="p1">总上报数</p>
          <p class="p2">{{total}}</p>
        </div>
      </el-col>
      <el-col :span="3"></el-col>
      <el-col :span="4">
        <div class="box1">
          <p class="p1">本月上报数</p>
          <p class="p2">{{ monthTotal }}</p>
        </div>
      </el-col>
      <!-- <el-col :span="3"></el-col>
      <el-col :span="4"></el-col>
      <el-col :span="4"></el-col>-->
    </el-row>
    <el-row :gutter="20">
      <el-col :span="2"></el-col>
      <el-col :span="10">
        <lineChart></lineChart>
      </el-col>
      <el-col :span="12">
        <CircularDiagram :data="propData"></CircularDiagram>
      </el-col>
    </el-row>
    <!-- <el-row>
      <el-col :span="24">
        <Histogram></Histogram>
      </el-col>
    </el-row>-->
  </div>
</template>
  
  <script setup>
import * as echarts from "echarts";
// 折线图
import lineChart from "./../../../components/ReportAnalytics/lineChart.vue";
//环形图
import CircularDiagram from "./../../../components/ReportAnalytics/CircularDiagram.vue";
//柱状图
import Histogram from "./../../../components/ReportAnalytics/Histogram.vue";

import { listCircularDiagram } from "@/api/sidebar/reportAnalytics.js";
const showSearch = ref(true);
const { proxy } = getCurrentInstance();
const { hs_declaration_type } = proxy.useDict("hs_declaration_type");

  const total = ref(0);
  const monthTotal = ref(0);

//时间集合
const daterangeOccurTime = ref([]);
//传值到圆环图
const propData = ref({});
//查询
const data = reactive({
  queryParams: {
    declarationType: null
  }
});

const { queryParams } = toRefs(data);

function getList() {
  queryParams.value.params = {};
  if (null != daterangeOccurTime && "" != daterangeOccurTime) {
    queryParams.value.params["beginOccurTime"] = daterangeOccurTime.value[0];
    queryParams.value.params["endOccurTime"] = daterangeOccurTime.value[1];
  }
  listCircularDiagram(queryParams.value).then(response => {
    propData.value = response.data.beCurrentTableList;
    total.value = response.data.total;
    monthTotal.value = response.data.monthTotal;
  });
}
/** 搜索按钮操作 */
function handleQuery() {
  getList();
}

/** 重置按钮操作 */
function resetQuery() {
  daterangeOccurTime.value = [];
  proxy.resetForm("queryRef");
  handleQuery();
}

getList();
</script>
  
<style lang="scss" scoped>
.el-row {
  margin-bottom: 20px;
  margin-top: 50px;
}
.box1 {
  background-color: rgb(187, 187, 187);
  width: 200px;
  height: 100px;
  .p1 {
    display: inline-block;
    color: #fff;
    font-weight: 900;
    font-size: larger;
    margin-bottom: auto;
    margin-top: 20px;
    margin-left: 30%;
  }
  .p2 {
    text-align: center;
    color: #fff;
    margin: auto;
    font-size:22px;
  }
}
</style>