<template>
  <div class="app-container home">
    <el-row :gutter="20">
      <el-col :sm="24" :lg="24">
        <blockquote style="font-size: 14px">
          本年度共有
          <el-button type="text" @click="haddenClick">{{
            yearData.unitNum
            }}</el-button>
          家单位开展安全生产事故隐患排查治理，排查出隐患
          <el-button type="text" @click="haddenClick">{{
            yearData.hiddenDangerNum
            }}</el-button>
          项，已整改
          <el-button type="text" @click="haddenClick">{{
            yearData.haveRectifiedNum
            }}</el-button>
          项( 整改率为
          <el-button type="text" @click="haddenClick">{{
            yearData.rectifyRate
            }}</el-button>
          未整改
          <el-button type="text" @click="haddenClick">{{
            yearData.notRectifiedNum
            }}</el-button>
          项，超期未整改
          <el-button type="text" @click="haddenClick">{{
            yearData.exceedNotRectifiedNum
            }}</el-button>
          项，累计落实整改治理资金
          <el-button type="text" @click="haddenClick">{{
            yearData.rectifyMoneySum
            }}</el-button>
          万元。
          <br />
          <br />

          <div v-for="(item, i) in hiddenList" :key="i">
            累计排查出{{ item.name }}
            <el-button type="text" @click="haddenClick">{{
              item.hiddenDangerNum
              }}</el-button>
            项，已整改
            <el-button type="text" @click="haddenClick">{{
              item.haveRectifiedNum
              }}</el-button>
            项(整改率为
            <el-button type="text" @click="haddenClick">{{
              item.rectifyRate
              }}</el-button>
            )，未整改
            <el-button type="text" @click="haddenClick">{{
              item.notRectifiedNum
              }}</el-button>
            项，超期未整改
            <el-button type="text" @click="haddenClick">{{
              item.exceedNotRectifiedNum
              }}</el-button>
            项
            <br />
            <br />
          </div>

          其中，列入督办隐患治理项目
          <el-button type="text" @click="haddenClick">{{
            collectData.hiddenDangerNum
            }}</el-button>
          项，已整改
          <el-button type="text" @click="haddenClick">{{
            collectData.haveRectifiedNum
            }}</el-button>
          项(整改率为
          <el-button type="text" @click="haddenClick">{{
            collectData.rectifyRate
            }}</el-button>
          未整改
          <el-button type="text" @click="haddenClick">{{
            collectData.notRectifiedNum
            }}</el-button>
          项，超期未整改
          <el-button type="text" @click="haddenClick">{{
            collectData.exceedNotRectifiedNum
            }}</el-button>
          项)
          <br />
        </blockquote>
        <el-divider />
        <el-table :data="hiddenList" style="width: 100%">
          <el-table-column prop="name" align="center" label="隐患级别" />
          <el-table-column
            prop="hiddenDangerNum"
            align="center"
            label="隐患事故"
          />
          <el-table-column
            prop="haveRectifiedNum"
            align="center"
            label="已整改"
          />
          <el-table-column prop="rectifyRate" align="center" label="整改率" />
          <el-table-column
            prop="notRectifiedNum"
            align="center"
            label="未整改"
          />
          <el-table-column
            prop="exceedNotRectifiedNum"
            align="center"
            label="整改超期"
          />
        </el-table>
      </el-col>
    </el-row>

    <!--公文借出会话框-->
    <el-dialog
      title="隐患查询"
      :visible.sync="open"
      width="1200px"
      append-to-body
    >
      <el-form
        :model="queryParams"
        ref="queryForm"
        size="small"
        :inline="true"
        v-show="showSearch"
        label-width="68px"
      >
        <el-form-item label="单位名称" prop="enterpriseName">
          <el-input
            v-model="queryParams.enterpriseName"
            placeholder="请输入单位名称"
            clearable
          />
        </el-form-item>
        <el-form-item label="隐患等级" prop="hiddenDangerGrade">
          <el-select
            v-model="queryParams.hiddenDangerGrade"
            placeholder="请选择隐患等级"
            clearable
          >
            <el-option
              v-for="dict in dict.type.hidden_danger_grade"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="整改情况" prop="status">
          <el-select
            v-model="queryParams.status"
            placeholder="请选择整改情况"
            clearable
          >
            <el-option
              v-for="dict in dict.type.hidden_danger_status"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="整改期限">
          <el-date-picker
            v-model="queryParams.params.qxStartTime"
            type="date"
            placeholder="选择开始时间"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd 00:00:00"
          >
          </el-date-picker
          >至
          <el-date-picker
            v-model="queryParams.params.qxEndTime"
            type="date"
            placeholder="选择结束时间"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd 23:59:59"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="排查日期">
          <el-date-picker
            v-model="queryParams.params.pcStartTime"
            type="date"
            placeholder="选择开始时间"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd 00:00:00"
          >
          </el-date-picker
          >至
          <el-date-picker
            v-model="queryParams.params.pcEndTime"
            type="date"
            placeholder="选择结束时间"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd 23:59:59"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="整改完成日期">
          <el-date-picker
            v-model="queryParams.params.wcStartTime"
            type="date"
            placeholder="选择开始时间"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd 00:00:00"
          >
          </el-date-picker
          >至
          <el-date-picker
            v-model="queryParams.params.wcEndTime"
            type="date"
            placeholder="选择结束时间"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd 23:59:59"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            icon="el-icon-search"
            size="mini"
            @click="handleQuery"
          >搜索</el-button
          >
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
          >重置</el-button
          >
        </el-form-item>
      </el-form>

      <el-table v-loading="loading" border :data="detailsList">
        <!--<el-table-column label="主键" align="center" prop="id" />-->
        <el-table-column label="序号" align="center">
          <template slot-scope="scope">
            <span>{{ Number(scope.$index) + 1 }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="隐患内容"
          align="center"
          prop="hiddenDangerDesc"
        />
        <el-table-column
          label="单位名称"
          align="center"
          prop="enterpriseName"
        />
        <el-table-column
          label="隐患类别"
          align="center"
          prop="hiddenDangerType"
        />
        <el-table-column
          label="隐患级别"
          align="center"
          prop="hiddenDangerGrade"
        />
        <el-table-column label="公文编号" align="center" prop="docNumber" />
        <el-table-column label="排查出隐患日期" align="center" prop="checkTime">
          <template slot-scope="scope">
            <span>{{
              parseTime(scope.row.checkTime, "{y}-{m}-{d} {h}:{i}:{s}")
            }}</span>
          </template>
        </el-table-column>
        <el-table-column label="整改期限" align="center" prop="rectifyTermTime">
          <template slot-scope="scope">
            <span>{{
              parseTime(scope.row.rectifyTermTime, "{y}-{m}-{d} {h}:{i}:{s}")
            }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="整改责任人"
          align="center"
          prop="principalName"
        />
        <el-table-column label="整改情况" align="center" prop="status" />
      </el-table>

      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import {
    getEhsIndexStatistics,
    getSuperviseAndHandle,
    getEhsIndexStatisticsList,
    detailslist,
  } from "@/api/ehs/IndexStatistics";
  import { parseTime } from "@/utils/ruoyi";
  import dict from "@/utils/dict";
  export default {
    name: "Index",
    dicts: ["hidden_danger_grade", "hidden_danger_status"],
    data() {
      return {
        showSearch: true,
        // 遮罩层
        loading: true,
        // 总条数
        total: 0,
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          params: {
            qxStartTime: null,
            qxEndTime: null,
            pcStartTime: null,
            pcEndTime: null,
            wcStartTime: null,
            wcEndTime: null,
          },
        },
        open: false,
        yearData: {
          unitNum: "",
          hiddenDangerNum: "",
          haveRectifiedNum: "",
          notRectifiedNum: "",
          exceedNotRectifiedNum: "",
          rectifyMoneySum: "",
          rectifyRate: "",
        },
        collectData: {
          hiddenDangerNum: "",
          haveRectifiedNum: "",
          notRectifiedNum: "",
          exceedNotRectifiedNum: "",
          rectifyMoneySum: "",
          rectifyRate: "",
        },
        hiddenList: [],
        detailsList: [],
        // 日期范围
        dateRange: [],
      };
    },
    created() {
      this.getIndexDetails();
    },
    methods: {
      dict,
      parseTime,
      /** 获取拟稿部门下拉列表 */
      getIndexDetails() {
        getEhsIndexStatistics().then((res) => {
          this.yearData.unitNum = res.data.unitNum;
          this.yearData.hiddenDangerNum = res.data.hiddenDangerNum;
          this.yearData.haveRectifiedNum = res.data.haveRectifiedNum;
          this.yearData.notRectifiedNum = res.data.notRectifiedNum;
          this.yearData.exceedNotRectifiedNum = res.data.exceedNotRectifiedNum;
          this.yearData.rectifyMoneySum = res.data.rectifyMoneySum;
          this.yearData.rectifyRate = res.data.rectifyRate;
        });
        getSuperviseAndHandle().then((res) => {
          this.collectData.hiddenDangerNum = res.data.hiddenDangerNum;
          this.collectData.haveRectifiedNum = res.data.haveRectifiedNum;
          this.collectData.notRectifiedNum = res.data.notRectifiedNum;
          this.collectData.exceedNotRectifiedNum = res.data.exceedNotRectifiedNum;
          this.collectData.rectifyRate = res.data.rectifyRate;
        });
        getEhsIndexStatisticsList().then((res) => {
          console.log(res);
          this.hiddenList = res.data;
        });
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1;
        this.getList();
      },
      haddenClick() {
        this.open = true;
        this.handleQuery();
      },
      getList() {
        this.loading = true;
        console.log(this.queryParams);
        detailslist(this.queryParams).then((response) => {
          this.detailsList = response.rows;
          this.total = response.total;
          this.loading = false;
        });
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.queryParams.params.qxStartTime = null;
        this.queryParams.params.qxEndTime = null;
        this.queryParams.params.pcStartTime = null;
        this.queryParams.params.pcEndTime = null;
        this.queryParams.params.wcStartTime = null;
        this.queryParams.params.wcEndTime = null;
        this.resetForm("queryForm");
        this.handleQuery();
      },
      // 取消按钮
      cancel() {
        this.open = false;
      },
    },
  };
</script>

<style scoped lang="scss">
  .home {
    blockquote {
      padding: 10px 20px;
      margin: 0 0 20px;
      font-size: 17.5px;
      border-left: 5px solid #eee;
    }
    hr {
      margin-top: 20px;
      margin-bottom: 20px;
      border: 0;
      border-top: 1px solid #eee;
    }
    .col-item {
      margin-bottom: 20px;
    }

    ul {
      padding: 0;
      margin: 0;
    }

    font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 13px;
    color: #676a6c;
    overflow-x: hidden;

    ul {
      list-style-type: none;
    }

    h4 {
      margin-top: 0px;
    }

    h2 {
      margin-top: 10px;
      font-size: 26px;
      font-weight: 100;
    }

    p {
      margin-top: 10px;

      b {
        font-weight: 700;
      }
    }

    .update-log {
      ol {
        display: block;
        list-style-type: decimal;
        margin-block-start: 1em;
        margin-block-end: 1em;
        margin-inline-start: 0;
        margin-inline-end: 0;
        padding-inline-start: 40px;
      }
    }
  }
</style>
