<!--
@name: 收货入库-订单提取
@author: 李恒
@time: 2022-05-31 13:45:10
-->
<template>
  <a-modal :visible='showModalTag' :width='1024' okText='确认提取' title='提取订单'
           @cancel="$emit('update:showModalTag', false)" @ok='modalSubmit'>
    <p-grid-form ref="formTarget" :span="6" :labelCol="{ span: 6 }" :items="items" @submit="handleSubmit"/>
    <p-table :data-source.sync='dataSource'
             :remote-url='listRemoteUrl'
             :remoteData='listParams' :scroll='{x:true}' :autoLoad="false"
             hasRowSelectCheck
             :rowSelectType="1"
             @selectChange="selectRow"
             :selectedRowKeys.sync='selectedRowKeys' bordered dragle row-key='id'>
      <template slot='title' slot-scope='currentPageData'>
        <div class='table-head'>
          <div class='table-head-title'>订单列表</div>
        </div>
      </template>
      <p-table-column :width='140' data-index='warehouseName' title='仓库名称'/>
      <p-table-column :width='140' data-index='mtlOwnerName' title='货主名称'/>
      <p-table-column :width='140' data-index='rcvTypeName' title='订单类型'/>
      <p-table-column :width='140' data-index='billno' title='入库单号'/>
      <p-table-column :width='140' data-index='pieceQty' title='待收数量'/>
      <p-table-column :width='140' data-index='asnAutoBillNum' title='关联单号'/>
      <p-table-column :width='140' data-index='shippername' title='单位'/>
      <p-table-column :width='140' data-index='createdate' title='开票时间'/>
      <p-table-column :width='140' data-index='createby' title='开票员'/>
      <p-table-column :width='140' data-index='attain_date' title='预计到货时间'/>
      <p-table-column :width='140' data-index='status' title='订单状态'/>
      <p-table-column :width='140' data-index='remark' title='备注'/>
    </p-table>
    <p-table :data-source.sync='detailDataSource'
             :remote-url='detailListRemoteUrl'
             :remoteData='detailListParams'
             :scroll='{x:true}' :autoLoad="false" :selectedRowKeys.sync='detailSelectedRowKeys' bordered dragle
             row-key='id'>
      <template slot='title' slot-scope='currentPageData'>
        <div class='table-head'>
          <div class='table-head-title'>明细列表</div>
        </div>
      </template>
      <p-table-column :width='140' data-index='itemNum' title='商品编码'/>
      <p-table-column :width='140' data-index='categoryName' title='商品大类'/>
      <p-table-column :width='140' data-index='itemName' title='商品名称'/>
      <p-table-column :width='140' data-index='specification' title='商品规格'/>
      <p-table-column :width='140' data-index='uom' title='包装单位'/>
      <p-table-column :width='140' data-index='conversionRate' title='包装数量'/>
      <p-table-column :width='140' data-index='preQty' title='计划数量'/>
      <p-table-column :width='140' data-index='pieceQty' title='待收数量'/>
      <p-table-column :width='140' data-index='manufacturerLotNum' title='批号'/>
      <p-table-column :width='140' data-index='batchProductionDate' title='生产日期'/>
      <p-table-column :width='140' data-index='batchExpiredDate' title='有效期至'/>
      <p-table-column :width='140' data-index='manufacturerName' title='生产厂家'/>
      <p-table-column :width='140' data-index='productionPlace' title='产地'/>
      <p-table-column :width='140' data-index='itemHealthListedLicensor' title='上市许可证'/>
      <p-table-column :width='140' data-index='approvalNumber' title='批准文号'/>
      <p-table-column :width='140' data-index='itemHealthRegisterNbr' title='注册证号'/>
      <p-table-column :width='140' data-index='statusName' title='状态'/>
    </p-table>
  </a-modal>
</template>

<script>
import {listRemoteUrl, detailListRemoteUrl} from './api'
import {items} from "./js/config";
import {getDefaultCargoOwner} from "@/views/kzyWMS/utils/setCargoOwner";

export default {
  props: {
    rcvTypes: {
      type: Array,
      default: () => []
    },
    showModalTag: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      items: items(this),
      form: {},
      // 列表参数
      listRemoteUrl,
      listParams: {},
      dataSource: [],
      selectedRowKeys: [],
      // 明细参数
      detailListRemoteUrl,
      detailListParams: {},
      detailDataSource: [],
      detailSelectedRowKeys: []

    }
  },
  watch: {
    showModalTag: {
      handler(nVal) {
        if (nVal) {
          this.$nextTick(() => this.setDefaultData())
        }
      },
      immediate: true
    }
  },
  methods: {
    // 设置默认数据
    async setDefaultData() {
      // 设置仓库
      const {warehouseId, warehouseCode, warehouseName} = this.$store.getters.warehouse || {}
      this.$refs.formTarget.form.setFieldsValue({
        branchid: warehouseId,
        branchcode: warehouseCode,
        branchname: warehouseName
      })
      // 设置货主
      const cargoOwner = await getDefaultCargoOwner()
      if (!!cargoOwner) {
        const {companyCode, companyId, companyName} = cargoOwner
        console.log(cargoOwner)
        this.$refs.formTarget.form.setFieldsValue({
          consignorid: companyId,
          consignorcode: companyCode,
          consignorname: companyName
        })
        this.$refs.formTarget.form.disableItem('consignorname')
      }
    },
    // 查询事件
    handleSubmit(event, form) {
      event.preventDefault()
      this.detailsDataList = []
      this.detailSelectedRowKeys = []
      form.validateFields((error, values) => {
        if (error) return
        delete values.adata
        delete values.bdata
        const {rcvType} = values
        // 未选择单据类型时，根据业务传入可选的type数组
        let rcvTypes = !rcvType ? this.rcvTypes : undefined
        const params = {
          num: '588464518951211008',
          params: {
            ...values,
            rcvTypes
          }
        }
        console.log('prams', params)
        this.listParams = {...params}
      })
    },
    onSubmit() {

    },
    // 点击汇总单查询明细
    selectRow(selectedRowKeys, selectedRows) {
      const record = selectedRows[0]
      if (!record) {
        this.detailDataSource = []
        this.detailSelectedRowKeys = []
        return
      }
      const {billid} = record
      this.detailsDataList = []
      this.detailSelectedRowKeys = []
      const params = {
        num: '578681744203583488',
        params: {
          billid
        }
      }
      this.detailListParams = {...params}
    },
    // 弹出框提交
    async modalSubmit() {
      const selectedRowKeys = this.selectedRowKeys
      const detailSelectedRowKeys = this.detailSelectedRowKeys
      if (selectedRowKeys.length === 0) return this.$message.warn('请选择要提取的订单')
      if (selectedRowKeys.length > 1) return this.$message.warn('一次只能提取一条单据')
      if (detailSelectedRowKeys.length === 0) return this.$message.warn('请选择要提取的订单明细')

      const selectBill = this.dataSource.find(_ => selectedRowKeys.includes(_.id))

      const selectDetail = this.detailDataSource.filter(_ => detailSelectedRowKeys.includes(_.id))
      // 发送数据
      this.$emit('change', {selectBill, selectDetail})
      this.$emit('update:showModalTag', false)
      this.dataSource = []
      this.selectedRowKeys = []
      this.detailDataSource = []
      this.detailSelectedRowKeys = []
    },
    onFormChange(name, {selectData}, value) {
      selectData = Array.isArray(selectData) ? selectData[0] : selectData
      if (name === 'consignor') {
        if (!value) {
          Object.assign(this.form, {consignorId: '', consignorName: '', consignorCode: ''})
          return
        }
        const {consignorName, consignorCode, id: consignorId} = selectData
        this.$set(this.form, 'consignorCode', consignorCode)
        this.$set(this.form, 'consignorName', consignorName)
        this.$set(this.form, 'consignorId', consignorId)
        return
      }
      if (name === 'warehouse') {
        if (!value) {
          Object.assign(this.form, {warehouseName: '', warehouseCode: '', warehouseId: ''})
          return
        }
        const {warehouseName, warehouseCode, id: warehouseId} = selectData
        this.$set(this.form, 'warehouseName', warehouseName)
        this.$set(this.form, 'warehouseCode', warehouseCode)
        this.$set(this.form, 'warehouseId', warehouseId)
        return
      }
    }
  }
}
</script>
<style lang="less" scoped>
/deep/ .date-range {
  .ant-calendar-picker {
    width: 100% !important;
  }
}
</style>