<template>
  <el-dialog
    :title="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="id"
      :search-form-prop="searchFormProp"
      :search-loader="searchLoader"
      :selected.sync="selected"
    />
    <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 { eOtIlldisdetailGetEnteredRecords } from '@/api/auto-baseapi'
export default {
  props: {
    type: {
      type: String,
      default: () => {
        return ''
      }
    }
  },
  data() {
    return {
      visible: false,
      tableData: [],
      selected: [],
      title: '严重违法失信外单位名单',
      fields: [
        {
          type: 'input',
          label: '统一码',
          prop: 'uniscid',
          span: 8,
          tableProps: {
            showOverflowTooltip: true
          }
        },
        {
          type: 'input',
          label: ({ meta }) => {
            return meta.isSearchForm ? '单位名称（模糊）' : '单位名称'
          },
          prop: 'entname',
          span: 8,
          tableProps: {
            showOverflowTooltip: true
          }
        },
        {
          type: 'date-picker',
          label: '列入日期',
          prop: 'abntime',
          tableSort: 4,
          formProps: ({ meta }) => {
            return meta.isSearchForm ? {
              type: 'daterange',
              rangeSeparator: '至'
            } : {}
          },
          span: 8
        },
        {
          type: 'select',
          label: '列入原因',
          prop: 'serillrea',
          optionsBaseCode: 'CD73',
          tableSort: 5,
          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
                })
              }
            }
          ]
        }
      ],
      searchFormProp: {
        formConfig: {
          labelWidth: '100px',
          labelPosition: 'right',
          gutter: 32
        }
      },
      tableProp: {
        emitLoadOnCreate: true,
        tableConfig: {
          selection: true,
          tableSelectionProps: {
            selectable: (row, index) => {
              return this.selected.length === 0 || this.selected[0] === row
            }
          },
          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' }
          }
        }
      }
    }
  },
  methods: {
    open() {
      this.selected = []
      this.visible = true
    },
    searchLoader(pageParam, parseSearchFormData, instance) {
      return eOtIlldisdetailGetEnteredRecords({
        size: pageParam.size,
        current: pageParam.current,
        entity: {
          ...parseSearchFormData,
          entname: parseSearchFormData.entname || undefined,
          uniscid: parseSearchFormData.uniscid || undefined,
          abnDateStart: parseSearchFormData.abntime?.[0] || undefined,
          abnDateEnd: parseSearchFormData.abntime?.[1] || undefined,
          serillrea: parseSearchFormData.serillrea || undefined,
          busType: this.type || undefined
        }
      }).then((response) => {
        if (response.code !== 0) {
          this.$message.error(response.msg || '查询失败')
          return { tableData: [], total: 0 }
        }
        const data = response.data || {}
        return {
          tableData: (data.records || []).map((item) => {
            return {
              ...item,
              entNo: item.pripid || item.pripId,
              // 适配字段名
              illegalListId: item.illid || item.illegalListId,
              cerType: item.certype || item.cerType,
              uniscid: item.uniscid || item.uniScid
            }
          }),
          total: data.total || 0
        }
      })
    },
    confirm() {
      this.$emit('confirm', this.selected)
      this.visible = false
    }
  }
}
</script>
