<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"  >{{
            yearData.unitNum
            }}</el-button>
          家单位开展安全生产事故隐患排查治理，排查出隐患
          <el-button type="text" @click="haddenClick(1,'')">{{
            yearData.hiddenDangerNum
            }}</el-button>
          项，已整改
          <el-button type="text" @click="haddenClick(2,'')">{{
            yearData.haveRectifiedNum
            }}</el-button>
          项( 整改率为
          <el-button type="text"  >{{
            yearData.rectifyRate
            }}</el-button>
          未整改
          <el-button type="text" @click="haddenClick(3,'')">{{
            yearData.notRectifiedNum
            }}</el-button>
          项，超期未整改
          <el-button type="text" @click="haddenClick(4,'')">{{
            yearData.exceedNotRectifiedNum
            }}</el-button>
          项，累计落实整改治理资金
          <el-button type="text"  >{{
            yearData.rectifyMoneySum
            }}</el-button>
          万元。
          <br />
          <br />

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

          其中，列入督办隐患治理项目
          <el-button type="text" @click="haddenClick(5,'')">{{
            collectData.hiddenDangerNum
            }}</el-button>
          项，已整改
          <el-button type="text" @click="haddenClick(6,'')">{{
            collectData.haveRectifiedNum
            }}</el-button>
          项(整改率为
          <el-button type="text"  >{{
            collectData.rectifyRate
            }}</el-button>
          未整改
          <el-button type="text" @click="haddenClick(7,'')">{{
            collectData.notRectifiedNum
            }}</el-button>
          项，超期未整改
          <el-button type="text" @click="haddenClick(8,'')">{{
            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>

      <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="hiddenDangerGrade">
          <template slot-scope="scope">
            <dict-tag :options="dict.type.hidden_danger_grade" :value="scope.row.hiddenDangerGrade"/>
          </template>
        </el-table-column>
        <el-table-column label="隐患类型" align="center" prop="hiddenDangerType">
          <template slot-scope="scope">
            <dict-tag :options="dict.type.hidden_danger_type" :value="scope.row.hiddenDangerType"/>
          </template>
        </el-table-column>
        <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" >
          <template slot-scope="scope">
            <dict-tag :options="dict.type.hidden_danger_status" :value="scope.row.status"/>
          </template>
        </el-table-column>

      </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";

  export default {
    name: "Index",
    dicts: ["hidden_danger_grade", "hidden_danger_status","hidden_danger_type" ],
    data() {
      return {
        showSearch: true,
        // 遮罩层
        loading: true,
        // 总条数
        total: 0,
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          isOverTime:null,
          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: {
      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(type,hiddenDangerGrade) {
        this.open = true;
        this.resetForm("queryForm");
        this.queryParams.isOverTime = null;
        this.queryParams.status = null;
        this.queryParams.hiddenDangerGrade = null;
        this.queryParams.isSupervise = null;
        if(hiddenDangerGrade != ""){
          this.queryParams.hiddenDangerGrade = hiddenDangerGrade;
        }
        if(type == 2){//已整改
          this.queryParams.status = "10";
        }else if(type == 3){//未整改isOverTime
          this.queryParams.status = "0";
        }else if(type == 4){//超期未整改
          this.queryParams.isOverTime = "1";
        }else if(type == 5){//列入督办隐患治理项目
          this.queryParams.isSupervise = 1;
        }else if(type == 6){//列入督办隐患治理项目 已整改
          this.queryParams.isSupervise = 1;
          this.queryParams.status = "10";
        }else if(type == 7){//列入督办隐患治理项目 未整改
          this.queryParams.isSupervise = 1;
          this.queryParams.status = "0";
        }else if(type == 8){//列入督办隐患治理项目 未整改
          this.queryParams.isSupervise = 1;
          this.queryParams.isOverTime = "1";
        }
        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;
      },
      /*statusToStr(value) {
        if(value=="0")
          return "未整改"
        else if(value=="10")
          return "已整改"
        else
          return "未知"
      },*/
    },
  };
</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>
