<template>
  <el-container>
    <el-header v-if="isSearch">
      <el-form style="margin: 10px 0" :inline="true">
        <el-form-item label="排查状态：">
          <el-select v-model="search.checkType" clearable>
            <el-option
              :label="item.label"
              :value="item.value"
              v-for="item in checkCycleOptions"
              :key="item.value"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="时间：">
          <el-date-picker
            clearable
            v-model="search.time"
            type="datetimerange"
            value-format="yyyy-MM-dd HH:mm:ss"
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button
            style="margin-left: 10px"
            type="primary"
            icon="el-icon-search"
            @click="initList"
          >
            搜索
          </el-button>
          <el-button class="commonBtn" icon="el-icon-refresh" @click="reset">
            重置
          </el-button>
        </el-form-item>
      </el-form>
    </el-header>
    <el-main>
      <div class="headerTop">
        <div>
          <!-- <el-button type="primary" class="el-icon-plus" @click="doAdd(1)">
            新增</el-button
          > -->
        </div>
        <div>
          <right-toolbar
            @queryTable="initList"
            :search="true"
            @update:showSearch="isSearch = !isSearch"
          ></right-toolbar>
        </div>
      </div>

      <el-table
        height="calc(100% - 200px)"
        :data="list"
        :row-style="{ height: '0px' }"
        :header-cell-style="{ 'text-align': 'center', padding: '0px' }"
        :cell-style="{ 'text-align': 'center', padding: '2px' }"
        style="width: 100%"
      >
        <el-table-column label="序号" align="center" width="50">
          <template slot-scope="scope">
            <span> {{ (pageNum - 1) * pageSize + (scope.$index + 1) }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="隐患排查要求名称"
          align="center"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <span>{{ scope.row.troubleshootContentTask || '-' }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="区域名称"
          align="center"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <span>{{ scope.row.areaName || '-' }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="分析单元名称"
          align="center"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <span>{{ scope.row.riskUnitName || '-' }}</span>
          </template>
        </el-table-column>

        <el-table-column
          label="管控措施名称"
          align="center"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <span>{{ scope.row.riskMeasureDesc }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="开始时间"
          align="center"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <span>{{ scope.row.startDate || '-' }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="结束时间"
          align="center"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <span>{{ scope.row.endDate || '-' }}</span>
          </template>
        </el-table-column>
        <el-table-column label="排查状态" align="center" show-overflow-tooltip>
          <template slot-scope="scope">
            <span>{{ !scope.row.status ? '未排查' : scope.row.status === 1 ? '已排查' : '漏检'}}</span>
          </template>
        </el-table-column>
        <el-table-column label="巡检用户姓名" align="center" show-overflow-tooltip>
          <template slot-scope="scope">
            <span>{{ scope.row.checkUserNickName || '-' }}</span>
          </template>
        </el-table-column>
        <el-table-column label="巡检时间" align="center" show-overflow-tooltip>
          <template slot-scope="scope">
            <span>{{ scope.row.checkTime || '-' }}</span>
          </template>
        </el-table-column>
        <!-- <el-table-column label="操作" fixed="right" align="center" width="120">
          <template slot-scope="scope">
            <el-button type="text" size="mini" @click="doAdd(2, scope.row)">
              编辑
            </el-button>
            <el-button type="text" size="mini" @click="doDelete(scope.row)">
              删除
            </el-button>
          </template>
        </el-table-column> -->
      </el-table>
      <pagination
        v-show="total > 0"
        :page.sync="pageNum"
        :limit.sync="pageSize"
        :page-sizes="[10, 20, 30, 50]"
        :total="total"
        @pagination="initList"
      />
    </el-main>

  </el-container>
</template>
<script>
import {
  getList
} from "@/api/risk/analyse.js";
export default {
  name: "RuoyiAnalyse",

  data() {
    return {
      isSearch: false,
      search: {
        checkType: "",
        time: "",
      },
      // 巡查类型的下拉
      checkCycleOptions: [
        { label: "未排查", value: '0' },
        { label: "已排查", value: '1' },
        { label: "漏检", value: '2' },
      ],

      pageNum: 1,
      pageSize: 10,
      total: 0,
      list: [],
    };
  },

  mounted() {
    this.initList();
  },

  methods: {
    async initList() {
      console.log(this.search.checkType)
      const res = await getList({
        status:this.search.checkType || '',
        startDate: this.search.time[0] || null,
        endDate: this.search.time[1] || null,
        pageNum: this.pageNum,
        pageSize: this.pageSize,
      });
      console.log(res)
      this.list = res.rows;
      this.total = res.total;
    },
    // 重置
    reset() {
      this.search = {
        checkType: "",
        time: "",
      };
      this.pageNum = 1;
      this.initList();
    },
  },
};
</script>

<style lang="scss" scoped></style>
