<!--
@name: 托盘管理
@author: 李恒
@time: 2022-06-22 16:18:24
-->
<template>
  <div>
    <p-card title="主单信息" v-show="!editType">
      <div slot="extra">
        <p-button icon="filter" @click="toggleFormTag = !toggleFormTag">{{ toggleFormTag ? '隐藏' : '显示' }}</p-button>
      </div>
      <p-grid-form v-show="toggleFormTag" ref="formTarget" :span="6" :labelCol="{ span: 6 }" :items="items"
                   @submit="handleSubmit"
      />
      <p-table
          ref="masterTable"
          dragle
          bordered
          :scroll="{ x: true }"
          row-key="id"
          :autoLoad="false"
          :columns="masterColumns"
          :dataSource.sync="masterDataList"
          :remoteUrl="masterRemoteUrl"
          :remoteData="masterRemoteData"
          :selectedRowKeys.sync="selectedRowKeys"
      >
          <span slot="action" slot-scope="text, record">
            <div>
              <a @click="toEdit('edit',record)">修改</a>
              <a class="ml-10" @click="onNullify(record)">作废</a>
            </div>
          </span>
      </p-table>
    </p-card>
    <edit v-if="editType" :editData="editData" :type="editType" @back="back"/>
  </div>
</template>

<script>
import {masterColumns, items} from './js/config'
import {cancelTray, masterRemoteUrl} from './api'
import edit from './edit'
import {getDefaultCargoOwner} from "@/views/kzyWMS/utils/setCargoOwner";

export default {
  components: {edit},
  data() {
    return {
      toggleFormTag: true,
      form: {},
      items: items(this),
      // 页面状态
      editType: '',
      businessType: '',
      editData: {},
      // 订单列表
      masterColumns,
      masterDataList: [
        {id: '11'}
      ],
      masterRemoteUrl,
      selectedRowKeys: [],
      masterRemoteData: {},
    }
  },
  mounted() {
    this.setDefaultData()
  },
  methods: {
    // 设置默认数据
    async setDefaultData() {
      // 设置仓库
      const {warehouseId, warehouseCode, warehouseName} = this.$store.getters.warehouse || {}
      this.$refs.formTarget.form.setFieldsValue({
        warehouseId: warehouseId,
        warehouseCode: warehouseCode,
        warehouseName: warehouseName
      })
      // 设置货主
      const cargoOwner = await getDefaultCargoOwner()
      if (!!cargoOwner) {
        const {companyCode, companyId, companyName} = cargoOwner
        this.$refs.formTarget.form.setFieldsValue({
          cargoOwnerId: companyId,
          cargoOwnerCode: companyCode,
          cargoOwnerName: companyName
        })
        this.$refs.formTarget.form.disableItem('cargoOwnerName')
      }
    },
    toEdit(type, record = {}) {
      this.editData = {...record}
      this.editType = type
    },
    back() {
      this.editType = ''
      this.masterDataList = []
      this.detailsDataList = []
    },
    // 查询事件
    handleSubmit(event, form) {
      event.preventDefault()
      this.detailsDataList = []
      form.validateFields((error, values) => {
        if (!!error) return
        const params = {
          num: 'getContainerSupervisionCodePage',
          params: {...values}
        }
        this.masterRemoteData = params
      })
    },
    // 订单作废
    onNullify(record) {
      const {id} = record
      if (!id) return
      const self = this
      this.$confirm({
        title: '确定是否要作废?',
        onOk() {
          return new Promise((resolve, reject) => {
            cancelTray({...record}).then((res) => {
              if (res.success) {
                self.$message.success(res.message)
                self.$refs.masterTable.reload()
                resolve()
              } else {
                self.$message.warn(res.message)
                reject()
              }
            }).catch(() => {
              reject()
            })
          })
        },
      })
    },
  },
}
</script>

<style lang='less' scoped>
/deep/ .date-range {
  .ant-calendar-picker {
    width: 100% !important;
  }
}
</style>
