<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="auto">
      <el-form-item label="工器具" prop="keyWord">
        <el-input
          v-model="queryParams.keyWord"
          placeholder="请输入工器具名称" v-no-whitespace
          maxlength="60"
          show-word-limit
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="工程：" prop="proName">
        <el-select v-model="queryParams.proName" placeholder="请选择工程名称" clearable>
          <el-option v-for="item in proOptions" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="承包商：" prop="consName">
        <el-select v-model="queryParams.consName" placeholder="请选择承包商" clearable>
          <el-option v-for="item in consOptions" :key="item.value" :label="item.label" :value="item.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 statusDict"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item style="display: flex; justify-content: flex-end;">
        <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-row :gutter="10" class="mb8">
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :data="contList">
      <el-table-column
        type="index"
        width="55"
        label="序号"
        align="center"
        :index="indexContinuous(queryParams.pageNum, queryParams.pageSize)"
      />
      <el-table-column label="工程名称" align="center" prop="proName" />
      <el-table-column label="承包商名称" align="center" prop="consName" />
      <el-table-column label="工器具名称" align="center" prop="equipName" />
      <el-table-column label="型号" align="center" prop="model" />
      <el-table-column label="单位" align="center" prop="unit" />
      <el-table-column label="数量" align="center" prop="num" />
      <el-table-column label="设备类型" align="center" prop="equipType" />
      <el-table-column label="检测时间" align="center" prop="detectionTime" />
      <el-table-column label="是否强制检验检测" align="center" prop="isForceDetection" />
      <el-table-column label="下次检测时间" align="center" prop="nextDetectionTime" />
      <el-table-column label="工器具文件" align="center">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleShow(scope.row)">查看</el-button>
        </template>
      </el-table-column>
      <el-table-column label="审批状态" align="center" prop="intoStatus">
        <template slot-scope="scope">
          <!-- 检查是否存在身份证号 -->
          <span v-if="scope.row.intoStatus">{{ updateStatus(scope.row.intoStatus)
            }}</span>
          <span v-else>-</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            @click="handleApprove(scope.row)"
            v-if="scope.row.status == '1'"
            v-hasPermi="['project:entranceOfEquipment:list']"
          >审批
          </el-button>
          <el-button
            size="mini"
            type="text"
            v-else
            @click="handleView(scope.row)"
            v-hasPermi="['project:entranceOfEquipment:list']"
          >查看
          </el-button>
          <el-button
            size="mini"
            type="text"
            @click="handleAuditRecord(scope.row)"
            v-hasPermi="['system:audit:query']"
          >审核记录
          </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"
    />

    <el-dialog title="工器具文件" :visible.sync="document" width="80%" top="5vh" append-to-body>
      <div style="width: 100%;height:720px">
        <bns-file-list-tabs :items="fileList" />
      </div>
    </el-dialog>
  </div>
</template>

<script>
import BnsFileListTabs from '@/components/pro-tabs/bns-file-list-tabs.vue'
import { entryOfUtensilsList } from '@/api/pro/cons/equip'
import { getConsOptions, getProOptions } from '@/api/pro/subManagement/approval/personApproval'
import { dictTableOption, selectFile } from '@/api/tool/select'
import { encryptCBC } from '@/utils/aescbc'
import { indexContinuous } from '@/utils/bonus'

export default {
  name: 'midEntryComponent',
  components: { BnsFileListTabs },
  data() {
    return {
      // 遮罩层
      loading: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 是否显示弹出层
      document: false,
      fileList: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        keyWord: undefined,
        proName: undefined,
        consName: undefined,
        status: '1'
      },
      // 承包商表格数据
      contList: [],
      //工程下拉选项
      proOptions: [],
      //承包商下拉选项
      consOptions: [],
      //审批状态下拉选
      statusDict: [],
      auditStatusDict: {
        '1': '待审批',
        '2': '审批中',
        '3': '已通过',
        '4': '已驳回',
        '5': '已撤销'
      }
    }
  },

  created() {
    this.getProOption()
    this.getConsOption()
    this.getStatus()
    this.getList()
  },

  methods: {
    indexContinuous,
    updateStatus(status) {
      return this.auditStatusDict[status]
    },
    /** 查询工程列表 */
    getList() {
      this.loading = true
      entryOfUtensilsList(this.queryParams).then(response => {
        this.contList = response.rows
        this.total = response.total
        this.loading = false
      })
    },
    //获取工程下拉选项
    getProOption() {
      const params = {
        id: ''
      }
      getProOptions(params).then(res => {
        this.proOptions = res.data
      })
    },
    //获取承包商下拉选项
    getConsOption() {
      const params = {
        id: ''
      }
      getConsOptions(params).then(res => {
        this.proOptions = res.data
      })
    },
    //获取工程类型下拉选
    getStatus() {
      const params = {
        dictType: 'sys_approval_state',
        dictValue: ''
      }
      dictTableOption(params).then(response => {
        this.statusDict = response.data
      })
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.loading  = true
      this.queryParams.pageNum = 1
      this.getList()
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm('queryForm')
      this.handleQuery()
    },
    /** 查看按钮操作 */
    handleView(row) {
      this.$router.push('/project/midEntry-component-auth/toolEntryReviewComponent/' + encryptCBC(JSON.stringify({
        uuid: row.uuid,
        taskId: row.taskId,
        procInstId: row.procInsId,
        finalCheck: row.finalCheck,
        isExamine: false,
        btnShow: false,
        showType: 1
      })))
    },
    /** 审批按钮操作 */
    handleApprove(row) {
      this.$router.push('/project/midEntry-component-auth/toolEntryReviewComponent/' + encryptCBC(JSON.stringify({
        uuid: row.uuid,
        taskId: row.taskId,
        procInstId: row.procInsId,
        finalCheck: row.finalCheck,
        isExamine: true,
        btnShow: true,
        showType: 2
      })))
    },
    /** 审核记录按钮操作 */
    handleAuditRecord(row) {
      this.$router.push('/flow/auditRecord/' + encryptCBC(JSON.stringify({
        taskId: row.taskId,
        checkType:'2'
      })))
    },

    /** 文件查看按钮操作 */
    handleShow(row) {
      // this.reset();
      const params = {
        uuid: row.uuid,
        classification: '9',
        fromType: '4',
        informationType: '4'
      }
      selectFile(params).then(response => {
        this.fileList = response.data
      })
      this.document = true
    }
  }
}
</script>

<style lang="scss">

</style>
