<!--
@name: 证件资料
@author: 李恒
@time: 2021-10-17 19:38:19
-->
<template>
  <div>
    <p-card title='证件资料管理'>
      <div slot='extra' v-if='type !== "view"'>
        <p-button type='primary' @click='toEdit("add")'>新增</p-button>
      </div>
      <p-table ref='dataSourceRef'
               :autoLoad='false'
               :data-source.sync='dataSource'
               :remote-url='certificateRemoteUrl'
               :remoteData='listParams'
               :selectedRowKeys.sync='selectedRowKeys'
               bordered dragle row-key='id'>
        <p-table-column data-index='certificateNumber' title='证件号码' />
        <p-table-column data-index='certificateName' title='证件名称' />
        <p-table-column data-index='certificateCode' title='证件编码' />
        <p-table-column data-index='startDate' title='证件起始日期' />
        <p-table-column data-index='expireDate' title='证件截止日期' />
        <p-table-column :width='280' data-index='operation' title='操作'>
          <template slot-scope='text, record'>
            <a-space>
              <a v-if='type === "view"' @click='toEdit("view",record)'>查看</a>
              <a v-if='type !== "view"' @click='toEdit("edit",record)'>编辑</a>
              <a v-if='type !== "view"' @click='del(record)'>删除证件</a>
            </a-space>
          </template>
        </p-table-column>
      </p-table>
    </p-card>
    <edit v-if='showEditModalTag' :visible.sync='showEditModalTag'
          :mode='mode'
          :rootType='type'
          :consignorid='consignorid'
          :type='certificateEditType'
          :editData='certificateEditData'
          @ok='onSubmit' />
  </div>
</template>

<script>
import { certificateRemoteUrl, del } from './api'
import edit from './edit'

export default {
  components: { edit },
  inject: {
    getParentInfo: {
      default: () => Promise.reject('未提供getParentInfo方法,操作中断')
    },
    getConsignorid: {
      default: () => {
        console.error('未提供getConsignorid方法,操作未中断,但货主为空')
        return ''
      }
    }
  },
  props: {
    type: '',
    editData: {
      type: Object,
      default: () => ({})
    },
    mode: '', // "证件属性 1-货主 2-供应商 3-客户 4-物流商 5-商品 6-设备 7-受托生产企业 8-受托人"
    parentid: '',
    consignorid: ''
  },
  data() {
    return {
      // 证件资料
      certificateRemoteUrl,
      dataSource: [],
      selectedRowKeys: [],
      listParams: {},
      // 编辑modal
      showEditModalTag: false,

      certificateEditType: '',
      certificateEditData: {}
    }
  },
  computed: {
    enterpriseId() {
      return this.$store.state.user.info.enterpriseId
    }
  },
  mounted() {
    if (this.parentid) this.onSubmit()
  },
  methods: {
    async toEdit(type, row = {}) {
      try {
        const { parentcode, parentid, parentname, consignorcode, consignorid, consignorname } = await this.getParentInfo?.() || {}
        this.showEditModalTag = true
        this.certificateEditType = type
        this.certificateEditData = { ...row, parentcode, parentid, parentname, consignorcode, consignorid, consignorname }
      } catch (e) {
        console.error(e.message)
      }
    },
    // 删除证件
    del(row) {
      const self = this
      const { id } = row
      this.$confirm({
        title: '是否确认删除',
        onOk() {
          return new Promise((resolve, reject) => {
            del([{ id }]).then(res => {
              if (res.success) {
                self.onSubmit()
                resolve()
              } else {
                self.$message.error('服务忙，请稍后！')
                reject()
              }
            })
          })
        }
      })
    },
    onSubmit() {
      const consignorid = this.getConsignorid()
      let parentid = this.parentid
      if(this.mode === '1'){
        // 当货主新增证件时是没有parentid的 > 货主的主键并不是从号码管理器中获取而是取货主code
        parentid = consignorid
      }
      this.listParams = {
        parentid,
        type: this.mode,
        consignorid
      }
    }
  }
}
</script>

<style lang='less' scoped>
.upload-box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100px;
  height: 100px;
  margin-right: 8px;
  margin-bottom: 8px;
  text-align: center;
  vertical-align: top;
  border: 1px dashed #d9d9d9;
  border-radius: 2px;
  float: left;
  overflow: hidden;
  position: relative;

  .upload-box-del {
    position: absolute;
    top: 0;
    right: 0;
    cursor: pointer;
    transition: all 200ms;
    background: #ff4d4f;
  }

  .upload-box-img {
    width: 100%;
    height: 100%;
  }

  &.plus {
    cursor: pointer;
  }
}
</style>
