<!--
@name: 已托运-运单组件
@author: 张泽贤
@time: 2022-05-05
-->
<template>
  <p-spin :spinning="spinning">
    <p-card>
      <a-space slot="extra" v-show="editType === 'edit'">
        <p-button type="primary" @click="onAdd" :disabled="!editData.loadingBillId || editData.status > 10">添加运单</p-button>
        <p-button type="danger" @click="onDel" :disabled="!waybillSelectedRowKeys.length || editData.status > 110">剔除运单</p-button>
        <p-button type="primary" @click="onMove" :disabled="!waybillSelectedRowKeys.length || editData.status > 10">移动</p-button>
      </a-space>
      <t-table
        ref="waybillTable"
        dragle
        bordered
        :extendedObjectCode="'15'"
        row-key="shipbillId"
        :id="$route.meta.menuId + '_waybillList'"
        :data-source.sync="waybillDataSource"
        :remote-url="waybillListRemoteUrl"
        :remoteData="waybillListParams"
        :scroll="{ x: true}"
         :vScrollX="{enabled:true}"
         :vScrollY="{enabled:true,rows:4}"
        :rowSelectType="editType === 'edit' ? 2 : false"
        @selectChange="(selectKey, selectData)=>selectedRowKeys=selectKey"

        :autoLoad="false"
      >
        <p-table-column data-index="shipbillNo" title="运单号" :width="120" />
        <p-table-column data-index="cargoOwnerName" title="货主" :width="120" />
        <p-table-column data-index="orderNo" title="订单号" :width="120" />
        <p-table-column data-index="wmsOrderNo" title="WMS单号" :width="120" />
        <p-table-column data-index="orderTypeName" title="订单类型" :width="120" />
        <p-table-column data-index="orderBusinessTypeName" title="业务类型" :width="120" />
        <p-table-column data-index="deliveryMethodTypeName" title="配送方式" :width="120" />
        <p-table-column data-index="transportTypeName" title="运输模式" :width="120" />
        <p-table-column data-index="temperatureRequirementName" title="温度要求" :width="120" />
        <p-table-column data-index="lineName" title="线路" :width="120" />
        <p-table-column data-index="height4" title="备注" :width="120" />
        <p-table-column data-index="orderDate" title="订单下单日期" :width="120" />
        <p-table-column data-index="estimatedPickupStartTime" title="预计提货时间" :width="120" />
        <p-table-column data-index="estimatedDeliveryStartTime" title="预计送达时间" :width="120" />
        <p-table-column data-index="transportAging" title="时效" :width="120" />
        <p-table-column data-index="shipperTypeName" title="发货方类型" :width="120" />
        <p-table-column data-index="shipperUnitName" title="发货方单位" :width="120" />
        <p-table-column data-index="shipperName" title="发货方" :width="120" />
        <p-table-column data-index="shipperProvinceCityDistrict" title="始发地" :width="120" />
        <p-table-column data-index="shipperContact" title="联系人" :width="120" />
        <p-table-column data-index="shipperPhoneNumber" title="手机号" :width="120" />
        <p-table-column data-index="shipperLandlineNumber" title="座机号" :width="120" />
        <p-table-column data-index="shipperEmail" title="邮箱" :width="120" />
        <p-table-column data-index="shipperAddress" title="详细地址" :width="120" />
        <p-table-column data-index="shipperMemo" title="备注" :width="120" />
        <p-table-column data-index="shipperPositioning" title="发货方位置" :width="120" />
        <p-table-column data-index="consigneeTypeName" title="收货方类型" :width="120" />
        <p-table-column data-index="consigneeUnitName" title="收货方单位" :width="120" />
        <p-table-column data-index="consigneeName" title="收货方" :width="120" />
        <p-table-column data-index="consigneeProvinceCityDistrict" title="目的地" :width="120" />
        <p-table-column data-index="consigneeContact" title="联系人" :width="120" />
        <p-table-column data-index="consigneePhoneNumber" title="手机号" :width="120" />
        <p-table-column data-index="consigneeLandlineNumber" title="座机号" :width="120" />
        <p-table-column data-index="consigneeEmail" title="邮箱" :width="120" />
        <p-table-column data-index="consigneeAddress" title="详细地址" :width="120" />
        <p-table-column data-index="consigneeMemo" title="备注" :width="120" />
        <p-table-column data-index="consigneePositioning" title="收货方位置" :width="120" />
        <p-table-column v-for="item in mextendedField_list" :key="item.fieldName" :data-index="item.fieldName" :title="item.displayName" :width="120" />
        <p-table-column data-index="totalPcs" title="总件数" :width="120" />
        <p-table-column data-index="totalWeight" title="总重量" :width="120" />
        <p-table-column data-index="totalVolume" title="总体积" :width="120" />
        <p-table-column data-index="packageWholePiece" title="整件数" :width="120" />
        <p-table-column data-index="packageLclPiece" title="拼箱数" :width="120" />
        <p-table-column data-index="packageTotalWeight" title="包裹总重量" :width="120" />
        <p-table-column data-index="packageTotalVolume" title="包裹总体积" :width="120" />
      </t-table>

      <p-search-modal v-bind="setQueryFormItmes.waybillAttr" @change="(...args) => onFormBlur('waybill', ...args)" v-show="false" :open="waybillDialog" />
      <p-search-modal v-bind="setQueryFormItmes.dispatchAttr" @change="(...args) => onFormBlur('dispatch', ...args)" v-show="false" :open="dispatchDialog" />
    </p-card>
  </p-spin>
</template>

<script>
import { extendedFieldList } from '@/blocks/utils'

import { setQueryFormItmes } from '../js/form'
import { waybillListRemoteUrl, trailer_add_detail, trailer_delete_detail, trailer_mobile_detail } from '../js/api'

export default {
  props: {
    editType: {
      type: String,
      default: 'edit',
    },
    editData: {
      type: Object,
      default: () => ({}),
    },
    options: {
      type: Object,
      default: () => ({}),
    },
  },
  watch: {
    editData: {
      handler(nVal) {
        this.$nextTick(() => {
          if (nVal.loadingBillId) {
            this.waybillListParams = { loadingBillId: nVal.loadingBillId }
          }
        })
      },
      immediate: true,
    },
  },
  data() {
    return {
      spinning: false,

      setQueryFormItmes: setQueryFormItmes(this),
      waybillDialog: false,
      dispatchDialog: false,

      // 运单表格
      waybillDataSource: [],
      waybillSelectedRowKeys: [],
      waybillListRemoteUrl,
      waybillListParams: {},

      mextendedField_list: [],
    }
  },
  mounted() {
    extendedFieldList({ extendedObjectCode: '13' }).then((res) => (this.mextendedField_list = res))
  },
  methods: {
    // 新增运单
    onAdd() {
      this.waybillDialog = false
      setTimeout(() => {
        this.waybillDialog = true
      }, 100)
    },
    // 删除运单
    onDel() {
      let request = {
        loadingBillId: this.editData.loadingBillId,
        shipbillIds: this.waybillSelectedRowKeys,
      }
      this.spinning = true
      trailer_delete_detail(request)
        .then((res) => {
          this.spinning = false
          if (res.success) {
            this.$message.success(res.message)
            this.$refs.waybillTable.reload()
          } else {
            this.$exception(res)
          }
        })
        .finally(() => {
          this.spinning = false
        })
    },
    // 移动
    onMove() {
      this.dispatchDialog = false
      setTimeout(() => {
        this.dispatchDialog = true
      }, 100)
    },
    onFormBlur(name, ...args) {
      console.log(args)
      if (name === 'waybill') {
        this.trailer_add_detail(args[1].split(','), args[2])
      } else if (name === 'dispatch') {
        this.trailer_mobile_detail(args[1])
      }
    },

    // 配载运单添加
    trailer_add_detail(shipbillIds, dataList) {
      let request = {
        loadingBillId: this.editData.loadingBillId,
        shipbillIds,
      }
      this.spinning = true
      trailer_add_detail(request)
        .then((res) => {
          this.spinning = false
          if (res.success) {
            this.$message.success(res.message)
            this.$refs.waybillTable.reload()
          } else {
            this.$exception(res)
          }
        })
        .finally(() => {
          this.spinning = false
        })
    },

    // 配载运单移动
    trailer_mobile_detail(nowLoadingBillId) {
      let request = {
        nowLoadingBillId,
        originalLoadingBillId: this.editData.loadingBillId,
        shipbillIds: this.waybillSelectedRowKeys,
      }
      this.spinning = true
      trailer_mobile_detail(request)
        .then((res) => {
          this.spinning = false
          if (res.success) {
            this.$message.success(res.message)
            this.$refs.waybillTable.reload()
          } else {
            this.$exception(res)
          }
        })
        .finally(() => {
          this.spinning = false
        })
    },

    reload() {
      this.waybillDataSource = [];
      this.$refs.waybillTable.reload({ data: { loadingBillId: this.editData.loadingBillId } });
    },
  },
}
</script>