<template>
  <div class="app-container">
    <el-form v-show="showSearch" :model="queryParams" ref="queryForm" size="small" inline>
      <!-- <el-form-item label="关键字" prop="keyWord">
        <el-input
          v-model="queryParams.keyWord"
          placeholder="请输入关键字"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item> -->
      <el-form-item label="隐患问题编号" prop="pitfallCode">
        <el-input
          v-model="queryParams.pitfallCode"
          placeholder="请输入隐患问题编号"
          clearable v-no-whitespace
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="隐患问题类别" prop="pitfallTypeId" v-if="this.isType == 1">
        <el-select v-model="queryParams.pitfallTypeId" placeholder="请选择隐患问题类别" clearable>
          <el-option
            v-for="item in hazardIssueCategoriesOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="隐患问题级别" prop="pitfallLevelId">
        <el-select v-model="queryParams.pitfallLevelId" placeholder="请选择隐患问题级别" clearable>
          <el-option
            v-for="item in hazardIssueLevelOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <!-- 日期范围 -->
      <el-form-item label="发现日期" prop="findTimeRange">
        <el-date-picker
          v-model="queryParams.findTimeRange"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          clearable
          value-format="yyyy-MM-dd"
          format="yyyy-MM-dd"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="handleQuery">查询</el-button>
        <el-button icon="el-icon-refresh" @click="handleReset">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport">导出数据</el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table :data="tableList" fit highlight-current-row style="width: 100%">
      <!-- 多选 -->
      <el-table-column type="selection" width="55" align="center" @selection-change="selectionChange" />
      <el-table-column
        type="index"
        width="55"
        label="序号"
        align="center"
        :index="indexContinuous(queryParams.pageNum, queryParams.pageSize)"
      />
      <el-table-column
        v-for="(column, index) in tableColumns"
        show-overflow-tooltip
        :key="column.prop"
        :label="column.label"
        :prop="column.prop"
        align="center"
      ></el-table-column>
      <!-- 操作 -->
      <el-table-column label="操作" align="center" width="150">
        <template slot-scope="scope">
          <el-button type="text" size="mini" @click="handleRectify(scope.row)">查看</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
  </div>
</template>

<script>
import { dictTableOption } from '@/api/tool/select'
import {
  getHiddenProblemsFixList,
  getTypeOfViolationSelect,
  exportHiddenProblemsFixList,
  getHiddenProblemCategoryDetailsList,
  exportHiddenProblemCategoryDetailsList,
} from '@/api/hiddenDangerManagement'
import { indexContinuous } from '@/utils/bonus'

export default {
  data() {
    return {
      showSearch: true,
      row: {},
      isType: 1, // 1: 工程隐患统计 2: 隐患问题类别统计
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        // keyWord: '', // 关键字
        pitfallCode: '', // 隐患问题编号
        pitfallTypeId: '', // 隐患问题类别id
        pitfallLevelId: '', // 隐患问题级别id
        findTimeRange: [], // 发现时间范围
      },
      // 隐患问题类别-下拉
      hazardIssueCategoriesOptions: [],
      // 隐患问题级别-下拉
      hazardIssueLevelOptions: [],
      total: 0, // 总条数
      // 表头
      tableColumns: [
        { label: '隐患问题编号', prop: 'pitfallCode' },
        { label: '隐患工程', prop: 'proName' },
        { label: '整改责任承包商', prop: 'subName' },
        { label: '隐患问题类别', prop: 'pitfallTypeName' },
        { label: '隐患问题级别', prop: 'pitfallLevelName' },
        { label: '隐患采集来源', prop: 'isFrom' },
        { label: '发现时间', prop: 'findTime' },
        { label: '隐患整改状态', prop: 'checkStatus' },
        { label: '创建时间', prop: 'createTime' },
        { label: '创建人', prop: 'createUserName' },
      ],
      // 表格数据
      tableList: [],
    }
  },
  created() {
    this.row = this.$route.query
    this.isType = this.row.type
    console.log('🚀 ~ created ~ this.row:', this.row)
    if (this.isType == 1) {
      // tableColumns 删除 proName
      this.tableColumns = this.tableColumns.filter(item => item.prop !== 'proName')
    } else {
      // tableColumns 删除 pitfallTypeName
      this.tableColumns = this.tableColumns.filter(item => item.prop !== 'pitfallTypeName')
    }
    this.getList()
    this.getTroubleType()
    this.getTroubleLevel()
  },
  methods: {
    indexContinuous,
    // 隐患问题类别-下拉
    async getTroubleType() {
      try {
        const res = await getTypeOfViolationSelect({ type: '1' })
        this.hazardIssueCategoriesOptions = res.data
      } catch (error) {
        console.log('获取隐患问题类别-下拉失败', error)
      }
    },
    // 隐患问题级别-yn_trouble_level
    async getTroubleLevel() {
      try {
        const params = {
          dictType: 'yn_trouble_level',
          dictValue: '',
        }
        const res = await dictTableOption(params)
        this.hazardIssueLevelOptions = res.data
      } catch (error) {
        console.log('获取隐患问题级别-下拉失败', error)
      }
    },
    // 查询
    handleQuery() {
      console.log('查询', this.queryParams)
      this.getList()
    },
    // 重置
    handleReset() {
      console.log('重置')
      this.$refs.queryForm.resetFields()
      this.getList()
    },
    // 获取列表
    async getList() {
      try {
        let startTime = ''
        let endTime = ''
        if (this.queryParams.findTimeRange.length) {
          startTime = this.queryParams.findTimeRange[0]
          endTime = this.queryParams.findTimeRange[1]
        } else {
          startTime = ''
          endTime = ''
        }
        const params = { ...this.queryParams, startTime, endTime, proId: this.row.proId, id: this.row.id }
        delete params.findTimeRange
        console.log('🚀 ~ getList ~ params:', params)
        let res = {}
        if (this.isType == 1) {
          res = await getHiddenProblemsFixList(params)
        } else {
          res = await getHiddenProblemCategoryDetailsList(params)
        }
        console.log('🚀 ~ getList ~ res:', res)
        this.tableList = res.rows
        this.total = res.total
      } catch (error) {}
    },
    // 多选
    selectionChange(val) {
      console.log('selectionChange', val)
    },
    // 整改回传单
    handleRectify(row, type) {
      console.log('🚀 ~ 隐患整改单', row)
      let isApprove = false // 审批
      let isRectify = false // 整改
      let isDelay = false // 延期
      let isRecord = false // 记录
      let isAcceptance = false // 验收
      let active = '1'
      let title = '隐患整改详情'

      this.$router.push({
        path: '/hiddenDangerManagement/hazardRectificationManagement/components/hazardApprove',
        query: {
          ...row,
          title,
          isApprove,
          isRectify,
          isDelay,
          isRecord,
          isAcceptance,
          active,
        },
      })
    },
    // 撤回
    handleRevocation(row) {
      console.log('撤回', row)
      // 弹框
      this.$confirm('是否确认撤回?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        // 撤回操作
      })
    },
    // 开关
    changeSwitch(row) {
      console.log('开关', row)
    },
    // 导出数据
    handleExport() {
      try {
        let fileName = `工程隐患详情_${new Date().getTime()}.xLsx`
        let url = ''
        let startTime = ''
        let endTime = ''
        if (this.queryParams.findTimeRange.length) {
          startTime = this.queryParams.findTimeRange[0]
          endTime = this.queryParams.findTimeRange[1]
        } else {
          startTime = ''
          endTime = ''
        }
        const params = { ...this.queryParams, startTime, endTime, proId: this.row.proId, id: this.row.id }
        delete params.findTimeRange
        console.log('🚀 ~ getList ~ params:', params)
        if (this.isType == 1) {
          url = exportHiddenProblemsFixList()
        } else {
          url = exportHiddenProblemCategoryDetailsList()
        }
        this.derive(url, params, fileName)
      } catch (error) {
        console.log('导出数据失败', error)
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.ipt-width {
  width: 220px;
}
</style>
