<template>
  <el-dialog
    title="个案办理"
    :visible.sync="visible"
    width="90vw"
    top="153px"
    custom-class="dialog-abnormal-list"
  >
    <edit-table
      v-if="visible"
      v-model="tableData"
      :table-prop="tableProp"
      :fields="fields"
      :show-search-form="true"
      row-key="revokeListId"
      :search-form-prop="searchFormProp"
      :search-loader="searchLoader"
      :selected.sync="selected"
    />
    <div class="cancel-reason-row">
      <span class="cancel-reason-label">撤销吊销原因：</span>
      <el-input
        v-model="cancelRevokeReason"
        type="textarea"
        :rows="3"
        size="mini"
        placeholder="请输入撤销吊销原因"
        maxlength="200"
        show-word-limit
      />
    </div>
    <div slot="footer">
      <el-button type="primary" plain @click="visible = false">取消</el-button>
      <el-button type="primary" @click="confirm">确认</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { apiCancelRevoke, apiCancelRevokeRevokedList } from '@/api/auto-baseapi'

export default {
  data() {
    return {
      visible: false,
      tableData: [],
      selected: [],
      searchFormProp: {
        formConfig: {
          labelWidth: '100px',
          labelPosition: 'right',
          gutter: 32
        }
      },
      cancelRevokeReason: '',
      tableProp: {
        emitLoadOnCreate: true,
        tableConfig: {
          rowKey: 'revokeListId',
          selection: true,
          tableSelectionProps: {
            reserveSelection: true,
            selectable: (row) => {
              return this.selected.length === 0 || this.selected[0] === row
            }
          },
          disableSelectAll: false,
          showIndex: true,
          indexWidth: '100px',
          showPagination: true,
          tableProps: {
            headerCellStyle: { background: '#F5F5F5!important', color: '#333333!important', padding: '0px' },
            headerRowStyle: { height: '48px' },
            rowStyle: { height: '48px' },
            cellStyle: { padding: '16px 0', color: '#333' }
          }
        }
      }
    }
  },
  computed: {
    fields() {
      return [
        {
          type: 'input',
          label: '统一社会信用代码/注册号',
          prop: 'searchUscc',
          span: 8,
          tableProps: {
            showOverflowTooltip: true,
            formatter: (row) => {
              return `${row.uniscid || row.regno || ''}`
            }
          }
        },
        {
          type: 'input',
          label: ({ meta }) => {
            return meta.isSearchForm ? '主体名称（精确）' : '主体名称'
          },
          prop: 'entname',
          span: 8,
          tableProps: {
            showOverflowTooltip: true
          }
        },
        {
          type: 'buttons',
          showInTable: false,
          hiddenLabel: true,
          label: '搜索操作',
          prop: '搜索操作',
          span: 8,
          formItemProp: {
            labelWidth: '0px'
          },
          buttons: [
            {
              label: '查询',
              type: 'primary',
              handler: (scope) => {
                const { meta } = scope
                const { _editTable } = meta
                const { editTableInstance } = _editTable
                editTableInstance.search()
              }
            },
            {
              label: '重置',
              type: 'primary',
              buttonProps: {
                plain: true
              },
              handler: (scope) => {
                const { meta } = scope
                const { _editTable } = meta
                const { editTableInstance } = _editTable
                editTableInstance.search({ reset: true })
              }
            }
          ]
        },
        {
          type: 'input',
          label: '吊销原因',
          prop: 'revokeReason',
          span: 8,
          showInForm: false,
          tableProps: {
            showOverflowTooltip: true
          }
        },
        {
          type: 'date-picker',
          label: '吊销日期',
          prop: 'revokeDate',
          showInForm: false
        }
      ]
    }
  },
  methods: {
    open() {
      this.selected = []
      this.cancelRevokeReason = ''
      this.visible = true
    },
    searchLoader(pageParam, parseSearchFormData) {
      return apiCancelRevokeRevokedList({
        pageNum: pageParam.current,
        pageSize: pageParam.size,
        ...parseSearchFormData
      }).then((res) => {
        if (res.code !== 0) {
          this.$message.error(res.msg || '查询失败')
          return {
            tableData: [],
            total: 0
          }
        }
        const data = res.data || {}
        return {
          tableData: data.list || [],
          total: data.total || 0
        }
      })
    },
    confirm() {
      if (this.selected.length !== 1) {
        this.$message.warning('只能选择一家吊销主体发起业务')
        return
      }
      if (!this.cancelRevokeReason || !this.cancelRevokeReason.trim()) {
        this.$message.warning('请先填写撤销吊销原因')
        return
      }
      const row = this.selected[0]
      const payload = {
        approvalDept: '',
        approvalDeptId: '',
        approvalDocNo: '',
        cancelRevokeReason: this.cancelRevokeReason.trim(),
        entname: row.entname,
        pripid: row.pripid,
        regno: row.regno,
        remarks: '',
        revokeListId: row.revokeListId,
        revokeReason: row.revokeReason,
        uniscid: row.uniscid
      }
      apiCancelRevoke(payload).then((res) => {
        if (res.code !== 0) {
          this.$message.error(res.msg || '撤销吊销业务发起失败')
          return
        }
        this.$message.success('撤销吊销业务发起成功')
        this.$emit('started', res.data || {})
        this.visible = false
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.cancel-reason-row {
  display: flex;
  align-items: center;
  margin-top: 8px;
  margin-bottom: 12px;

  .cancel-reason-label {
    width: 110px;
    text-align: right;
    margin-right: 10px;
    color: #606266;
    font-size: 14px;
  }

  .el-input {
    flex: 1;
  }
}
</style>
