<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 v-no-whitespace
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <!--      <el-form-item label="处罚单号" prop="punishCode">-->
      <!--        <el-input-->
      <!--          v-model="queryParams.punishCode"-->
      <!--          placeholder="请输入处罚单号"-->
      <!--          clearable-->
      <!--          @keyup.enter.native="handleQuery"-->
      <!--        />-->
      <!--      </el-form-item>-->
      <el-form-item label="违章编号" prop="violationCode">
        <el-input
          v-model="queryParams.violationCode"
          placeholder="请输入违章编号"
          clearable v-no-whitespace
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="签发人姓名" prop="signerName">
        <el-input
          v-model="queryParams.signerName"
          placeholder="请输入签发人姓名"
          clearable v-no-whitespace
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="审批状态" prop="status">
        <el-select v-model="queryParams.status" placeholder="请选择审批状态" clearable>
          <el-option v-for="item in approvalStatusOpts" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </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, 3)">查看</el-button>
          <el-button
            type="text"
            size="mini"
            style="color: #67c23a"
            @click="handlePostBack(scope.row)"
            v-if="scope.row.intoStatus == '0' || scope.row.intoStatus == '4' || scope.row.intoStatus == '5'"
          >
            回传
          </el-button>
          <el-button
            type="text"
            size="mini"
            style="color: #f56c6c"
            @click="handleRevocation(scope.row)"
            v-if="scope.row.intoStatus == '1'"
          >
            撤回
          </el-button>
          <el-button type="text" size="mini" style="color: #e6a23c" @click="handleRectify(scope.row, 2)">
            审批记录
          </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"
    />

    <!-- 回传 -->
    <PostBack ref="postBack" @getList="getList" />
  </div>
</template>

<script>
import PostBack from './components/PostBack'
import { exportViolationInfo, exportViolationPunishInfo, getViolationPunishList } from '@/api/violation/violation'
import { parseTime } from '@/utils/bonus'
import { retractApproval } from '@/api/terminalEquipment/deviceInformation'
import { encryptCBC } from '@/utils/aescbc'

export default {
  components: {
    PostBack,
  },
  data() {
    return {
      showSearch: true,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        keyWord: '', // 关键字
        violationCode: '', // 违章编号
        signerName: '', // 签发人姓名
        status: '', // 审批状态
      },
      // 审批状态-下拉
      approvalStatusOpts: [
        { label: '未提交', value: '0' },
        { label: '待审批', value: '1' },
        { label: '审批中', value: '2' },
        { label: '已审批', value: '3' },
        { label: '已驳回', value: '4' },
        { label: '已撤回', value: '5' },
      ],
      total: 0, // 总条数
      // 表头
      tableColumns: [
        { label: '违章编号', prop: 'violationCode' },
        { label: '受罚工程', prop: 'proName' },
        { label: '受罚承包商', prop: 'consName' },
        { label: '承包商负责人', prop: 'personName' },
        { label: '签发人', prop: 'signerName' },
        { label: '责任人', prop: 'directorName' },
        { label: '发现人', prop: 'findName' },
        { label: '接收人', prop: 'receiveName' },
        { label: '审批状态', prop: 'status' },
        { label: '驳回原因', prop: 'rejectReason' },
      ],
      // 表格数据
      tableList: [],
    }
  },
  created() {
    this.getList()
  },
  methods: {
    // 查询
    handleQuery() {
      console.log('查询', this.queryParams)
      this.getList()
    },
    // 重置
    handleReset() {
      console.log('重置')
      this.$refs.queryForm.resetFields()
      this.getList()
    },
    // 获取列表
    async getList() {
      try {
        // const res = await
        // this.tableList = res.rows
        // this.total = res.total
        this.queryParams.userType = this.$store.state.user.userType
        this.queryParams.personId = this.$store.state.user.userData.userId
        this.queryParams.proId = this.$store.state.user.thisIds.proId
        getViolationPunishList(this.queryParams).then(res => {
          console.log('🚀 ~ 违章列表 ~ res:', res)
          this.tableList = res.rows
          this.total = res.total
        })
      } catch (error) {}
    },
    // 多选
    selectionChange(val) {
      console.log('selectionChange', val)
    },
    // 回传
    handlePostBack(row) {
      console.log('回传', row)
      this.$refs.postBack.openDialog(row)
    },
    handleRectify(row, type) {
      console.log('🚀 ~ 隐患整改单', row)
      let isApprove = false // 审批
      let isRecord = false // 记录
      let active = '1'
      let title = ''
      if (type === 1) {
        isApprove = true
        title = '违章处罚审批'
      } else if (type === 2) {
        isRecord = true
        active = '2'
        title = '审批记录'
        this.$router.push(
          '/flow/auditRecord/' +
            encryptCBC(
              JSON.stringify({
                taskId: row.taskId,
              })
            )
        )
        return
      } else if (type === 3) {
        title = '违章处罚详情'
      }
      this.$router.push({
        path: '/violationManagenment/violation/violationApprove',
        query: {
          ...row,
          title,
          isApprove,
          isRecord,
          active,
        },
      })
    },
    // 撤回
    handleRevocation(row) {
      console.log('撤回', row)
      const params = {
        uuid: row.violationId,
        taskId: row.taskId,
        procInstId: row.procInsId,
        taskType: '13',
      }
      let text = '是否撤回当前违章回传的数据项？'
      this.$modal
        .confirm(text)
        .then(function () {
          return retractApproval(params)
        })
        .then(() => {
          this.getList()
          this.$modal.msgSuccess('撤回成功')
        })
        .catch(() => {})
    },
    // 导出数据
    handleExport() {
      try {
        let fileName = `违章处罚记录_${new Date().getTime()}.xLsx`
        let url = exportViolationPunishInfo()
        const params = { ...this.queryParams }
        console.log('🚀 ~ 导出 ~ params:', params)
        this.derive(url, params, fileName)
      } catch (error) {
        console.log('导出数据失败', error)
      }
    },
  },
}
</script>

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