<!--
@name: 待调度-分组调度(组件化)
@author: 张泽贤
@time: 2022-04-15
-->
<template>
  <div class="pages">
    <p-spin :spinning="spinning" v-if="!editType">
      <p-card v-show="editType !== 'map'">
        <a-space slot="title">
          <a-icon type="arrow-left" style="color: #1990ff" @click="back" />
          分组调度
        </a-space>
        <a-space slot="extra">
          <p-button type="primary" @click="onSave('dispatch')">调度</p-button>
          <p-button type="primary" @click="onSave('review')">调度并审核</p-button>
        </a-space>
        <a-row :gutter="16" style="height: 100%">
          <a-col :span="12">
            <p-form-model ref="formTarget" :model="form" :label-col="{ span: 16 }" :wrapper-col="{ span: 8 }" class="plg-grid-from" v-show="packetType !== 'sys'">
              <a-row>
                <p-col :span="12">
                  <p-form-model-item label="总单量">{{ form.orderLength }}</p-form-model-item>
                </p-col>
                <p-col :span="12" v-for="(item, index1) in form.orderTypeList" :key="'info' + index1">
                  <p-form-model-item :label="item.value">{{ item.num }}</p-form-model-item>
                </p-col>
              </a-row>
              <a-row>
                <p-col :span="12">
                  <p-form-model-item label="总客户">{{ form.customerNumber }}</p-form-model-item>
                </p-col>
                <p-col :span="12">
                  <p-form-model-item label="总配送点">{{ form.addressNumber }}</p-form-model-item>
                </p-col>
                <p-col :span="12">
                  <p-form-model-item label="总线路">{{ form.lineNumber }}</p-form-model-item>
                </p-col>
                <p-col :span="12">
                  <p-form-model-item label="总件数">{{ form.actualTotalPcs }}</p-form-model-item>
                </p-col>
                <p-col :span="12">
                  <p-form-model-item label="总重量">{{ form.actualTotalWeight }}</p-form-model-item>
                </p-col>
              </a-row>
              <a-row>
                <p-col :span="12">
                  <p-form-model-item label="总体积">{{ form.actualTotalVolume }}</p-form-model-item>
                </p-col>
                <p-col :span="8">
                  <p-form-model-item :wrapper-col="{ span: 24 }">
                    <p-select mode="multiple" v-model="systemGroup" :options="options.GROUP_DISPATCH" labelInValue style="width: 100%" />
                  </p-form-model-item>
                </p-col>
                <a-col :span="4">
                  <p-form-model-item :wrapper-col="{ span: 24 }" style="text-align: right">
                    <a-space>
                      <p-button type="primary" @click="onSystemGroup" :disabled="!unassignedRowKeys.length">系统分组</p-button>
                    </a-space>
                  </p-form-model-item>
                </a-col>
              </a-row>
            </p-form-model>
            <div v-show="packetType === 'sys'">
              <p-card title="系统分组">
                <p-table
                  ref="sysPacketTable"
                  dragle
                  bordered
                  row-key="id"
                  :id="$route.meta.menuId + '_sysPacketTable'"
                  :scroll="{ x: true, y: 300 }"
                  :data-source.sync="sysPacketList"
                  :rowSelectType="false"
                  :selectedRowKeys.sync="sysPacketRowKeys"
                  :autoLoad="false"
                  :pagination="false"
                  @clickRow="sysPacketClickRow"
                >
                  <!-- <p-table-column data-index="lineName" title="线路名称" :width="120" /> -->
                  <p-table-column v-for="(item, index) in sysPacketTableCol1" :key="index" :data-index="item.value" :title="item.label" :width="120" />
                  <p-table-column data-index="shipbillQty" title="运单数" :width="120" />
                  <p-table-column data-index="consigneeQty" title="客户数" :width="120" />
                  <p-table-column data-index="consigneeAddressQty" title="总配送点数" :width="120" />
                  <p-table-column data-index="totalWholePieceQty" title="总整件数" :width="120" />
                  <p-table-column data-index="totalLclPieceQty" title="总拼箱数" :width="120" />
                  <p-table-column data-index="totalPieceQty" title="总件数" :width="120" />
                  <p-table-column data-index="totalWeightQty" title="总重量" :width="120" />
                  <p-table-column data-index="totalVolumeQty" title="总体积" :width="120" />
                </p-table>
              </p-card>
            </div>
            <div v-for="(item, index) in formList" :key="index" @click.stop="formClick(index)" :class="[formSelectIndex === index ? 'form_select' : '', 'packet_form']">
              <p-form-model ref="formTarget" :model="item" :rules="rules" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
                <a-row>
                  <!-- <a-col :span="3">
                    <p-form-model-item :label-col="{ span: 0 }" :wrapper-col="{ span: 24 }">{{ item.data1 }}</p-form-model-item>
                  </a-col> -->
                  <a-col :span="4">
                    <p-form-model-item :label-col="{ span: 0 }" :wrapper-col="{ span: 24 }">{{ item.loadingBillDetailVO.length }}单</p-form-model-item>
                  </a-col>
                  <a-col :span="4">
                    <p-form-model-item :label-col="{ span: 0 }" :wrapper-col="{ span: 24 }">{{ item.actualTotalPcs }}</p-form-model-item>
                  </a-col>
                  <a-col :span="4">
                    <p-form-model-item :label-col="{ span: 0 }" :wrapper-col="{ span: 24 }">{{ item.actualTotalWeight }}kg</p-form-model-item>
                  </a-col>
                  <a-col :span="4">
                    <p-form-model-item :label-col="{ span: 0 }" :wrapper-col="{ span: 24 }">{{ item.actualTotalVolume }}m³</p-form-model-item>
                  </a-col>
                  <a-col :span="4">
                    <p-form-model-item :label-col="{ span: 0 }" :wrapper-col="{ span: 24 }">{{ item.totalMileage }}</p-form-model-item>
                  </a-col>
                </a-row>
                <a-row>
                  <a-col :span="21">
                    <p-form-model-item :label-col="{ span: 0 }" :wrapper-col="{ span: 24 }">{{ item.groupName }}</p-form-model-item>
                  </a-col>
                  <a-col :span="3">
                    <p-button type="danger" @click.stop="onDelete(index)">删除</p-button>
                  </a-col>
                </a-row>
                <a-row>
                  <a-col :span="12">
                    <p-form-model-item label="备注">
                      <p-input v-model="item.memo" />
                    </p-form-model-item>
                  </a-col>
                  <a-col :span="12">
                    <p-form-model-item label="承运方类型" prop="carrierType">
                      <p-select v-model="item.carrierType" :options="options.LINE_CARRIER_TYPE" @change="carrierTypeChange(index)" />
                    </p-form-model-item>
                  </a-col>
                </a-row>
                <a-row v-show="item.carrierType === 2">
                  <a-col :span="12">
                    <p-form-model-item label="司机" prop="driverName">
                      <p-search-modal v-model="item.driverName" v-bind="driverAttr" @ok="(...args) => onFormChange('driver', index, ...args)" @input="onFormInput('driver', index)" />
                    </p-form-model-item>
                  </a-col>
                  <a-col :span="12">
                    <p-form-model-item label="司机手机号" prop="driverPhoneNumber">
                      <p-input v-model="item.driverPhoneNumber" />
                    </p-form-model-item>
                  </a-col>
                </a-row>
                <a-row v-show="item.carrierType === 2">
                  <a-col :span="12">
                    <p-form-model-item label="送货员" prop="deliverymanName">
                      <p-search-modal v-model="item.deliverymanName" v-bind="deliveryAttr" @ok="(...args) => onFormChange('delivery', index, ...args)" @input="onFormInput('delivery', index)" />
                    </p-form-model-item>
                  </a-col>
                  <a-col :span="12">
                    <p-form-model-item label="送货员手机号" prop="deliverymanPhoneNumber">
                      <p-input v-model="item.deliverymanPhoneNumber" />
                    </p-form-model-item>
                  </a-col>
                </a-row>
                <a-row v-show="item.carrierType === 2">
                  <a-col :span="12">
                    <p-form-model-item label="车辆" prop="vehiclePlateNumber">
                      <p-search-modal
                        v-model="item.vehiclePlateNumber"
                        v-bind="carAttr"
                        @ok="(...args) => onFormChange('car', index, ...args)"
                        :disabled="!item.driverId"
                        @input="onFormInput('car', index)"
                      />
                    </p-form-model-item>
                  </a-col>
                  <a-col :span="12">
                    <p-form-model-item label="车型">{{ item.vehicleTypeName }}</p-form-model-item>
                  </a-col>
                </a-row>
                <a-row v-show="item.carrierType === 2">
                  <a-col :span="12">
                    <p-form-model-item label="装载率">
                      <div v-show="item.volumeLoadingRate">体积:{{ item.volumeLoadingRate }},重量:{{ item.weightLoadingRate }}</div>
                    </p-form-model-item>
                  </a-col>
                </a-row>
                <a-row v-show="item.carrierType === 1">
                  <a-col :span="12">
                    <p-form-model-item label="承运商编码" prop="carrierCode">
                      <p-search-modal v-model="item.carrierCode" v-bind="$data.$formItems.carrierAttr" @change="(...args) => onFormChange('carrier', index, ...args)" />
                    </p-form-model-item>
                  </a-col>
                  <a-col :span="12">
                    <p-form-model-item label="承运商名称">{{ item.carrierName }}</p-form-model-item>
                  </a-col>
                </a-row>
              </p-form-model>
            </div>
          </a-col>
          <a-col :span="12">
            <p-card title="待分配运单">
              <a-space slot="extra">
                <p-button type="primary" @click="onAdd" :disabled="!unassignedRowKeys.length">添加配载单</p-button>
              </a-space>
              <p-table
                ref="unassignedTable"
                dragle
                bordered
                :extendedObjectCode="'15'"
                row-key="shipbillId"
                :id="$route.meta.menuId + '_unassignedTable'"
                :scroll="{ x: true, y: 300 }"
                :data-source.sync="unassignedList"
                :rowSelectType="2"
                :selectedRowKeys.sync="unassignedRowKeys"
                :autoLoad="false"
                :pagination="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="orderTypeName" title="订单类型" :width="120" />
                <p-table-column data-index="orderBusinessTypeName" 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="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="shipperTypeName" title="发货方类型" :width="120" />
                <p-table-column data-index="shipperUnitName" title="发货方单位" :width="120" />
                <p-table-column data-index="shipperProvinceCityDistrict" title="始发地" :width="120" />
                <p-table-column data-index="shipperAddress" 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="consigneeProvinceCityDistrict" title="目的地" :width="120" />
                <p-table-column data-index="consigneeAddress" 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>
            </p-card>
            <div style="text-align: center">
              <p-button type="primary" shape="circle" icon="caret-down" :disabled="!unassignedRowKeys.length || formSelectIndex < 0" @click="onDown" />
              <p-button type="primary" shape="circle" icon="caret-up" :disabled="!assignedRowKeys.length || formSelectIndex < 0" @click="onUp" />
            </div>
            <p-card title="已分配运单">
              <!-- 该版本暂时不做这两个功能 -->
              <!-- <a-space slot="extra">
              <p-button type="primary" @click="onMap" :disabled="!assignedList.length">地图</p-button>
              <p-button type="primary" @click="onComputed" :disabled="!assignedList.length">计算里程</p-button>
            </a-space> -->
              <p-table
                ref="assignedTable"
                dragle
                bordered
                :extendedObjectCode="'15'"
                row-key="shipbillId"
                :id="$route.meta.menuId + '_assignedTable'"
                :scroll="{ x: true, y: 300 }"
                :data-source.sync="assignedList"
                :rowSelectType="2"
                :selectedRowKeys.sync="assignedRowKeys"
                :autoLoad="false"
                :pagination="false"
              >
                <p-table-column data-index="shippingOrder" title="配送顺序" :width="120">
                  <template slot-scope="text, record">
                    <p-input-number v-model="record.shippingOrder" :precision="0" style="width: 100%" />
                  </template>
                </p-table-column>
                <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="orderTypeName" title="订单类型" :width="120" />
                <p-table-column data-index="orderBusinessTypeName" 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="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="shipperTypeName" title="发货方类型" :width="120" />
                <p-table-column data-index="shipperUnitName" title="发货方单位" :width="120" />
                <p-table-column data-index="shipperProvinceCityDistrict" title="始发地" :width="120" />
                <p-table-column data-index="shipperAddress" 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="consigneeProvinceCityDistrict" title="目的地" :width="120" />
                <p-table-column data-index="consigneeAddress" 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>
            </p-card>
          </a-col>
        </a-row>
      </p-card>
    </p-spin>

    <packetMap v-if="editType === 'map'" @back="editType = ''"></packetMap>
  </div>
</template>

<script>
import * as $formItems from '@/blocks/components/searchModalConfig/index';
import packetMap from './packetMap';
import { group_dispatch, group_dispatch_review, sys_group_query } from '../../js/api';

export default {
  components: { packetMap },
  props: {
    packetType: {
      type: String,
      default: '',
      //系统分组'sys'
    },
    orderList: {
      type: Array,
      default: () => [],
    },
    sysList: {
      type: Array,
      default: () => [],
    },
    selectSystemGroup: {
      type: Array,
      default: () => [],
    },
    options: {
      type: Object,
      default: () => ({}),
    },
    mextendedField_list: {
      type: Array,
      default: () => [],
    },
    groupDimensionLabel: {
      type: String,
      default: '',
    },
  },
  computed: {
    driverAttr() {
      let driverAttr = $formItems.driverAttr;
      driverAttr.tableConfig.rowSelectType = 2;
      return driverAttr;
    },
    deliveryAttr() {
      let deliveryAttr = $formItems.deliveryAttr;
      deliveryAttr.tableConfig.rowSelectType = 2;
      return deliveryAttr;
    },
    carAttr() {
      let carAttr = $formItems.carAttr;
      if (this.formSelectIndex >= 0) {
        return Object.assign({ remoteData: { driverIds: this.formList[this.formSelectIndex].driverId.split(',') } }, carAttr);
      }
      return carAttr;
    },
  },
  data() {
    return {
      spinning: false,
      editType: '', // ''-默认 map-地图
      $formItems,

      // 系统分组表格数据
      sysPacketList: [],
      sysPacketRowKeys: [],
      sysPacketTableCol0: [
        { value: 'lineName', label: '线路' },
        { value: 'temperatureRequirementName', label: '温度要求' },
        { value: 'consigneeUnitName', label: '客户' },
        { value: 'consigneeName', label: '客户-收货方' },
        { value: 'shipperProvinceName', label: '始发地-省' },
        { value: 'shipperCityName', label: '始发地-市' },
        { value: 'shipperDistrictName', label: '始发地-区' },
        { value: 'consigneeProvinceName', label: '目的地-省' },
        { value: 'consigneeCityName', label: '目的地-市' },
        { value: 'consigneeDistrictName', label: '目的地-区' },
      ],
      sysPacketTableCol1: [],

      // 未调度表格数据
      unassignedList: [],
      unassignedRowKeys: [],

      // 已分配表单数据
      formList: [],
      formSelectIndex: -1,

      // 已分配表单的表格数据
      assignedList: [],
      assignedRowKeys: [],

      form: {
        orderLength: 0,
        actualTotalPcs: 0,
        actualTotalWeight: 0,
        actualTotalVolume: 0,
        customerNumber: 0,
        addressNumber: 0,
        lineNumber: 0,
        orderTypeList: [],
      },
      systemGroup: [],

      rules: {
        driverName: [{ required: true, message: '司机不能为空', trigger: 'change' }],
        driverPhoneNumber: [{ required: true, type: 'phone' }],
        vehiclePlateNumber: [{ required: true, type: 'plateNumber' }],
      },
    };
  },
  mounted() {
    if (this.packetType === 'sys') {
      // 系统分组
      this.getSysTableCol();
      let sysPacketList = [];
      let sysList = JSON.parse(JSON.stringify(this.sysList));

      Array.isArray(sysList) &&
        sysList.forEach((item1) => {
          item1?.orderBusinessTypeDTOList?.forEach((item2) => {
            this.sysPacketTableCol1.push({ value: 'orderBusinessTypeName' + item2.orderBusinessType, label: item2.orderBusinessTypeName + ' 运单数量(单)' });
            item1['orderBusinessTypeName' + item2.orderBusinessType] = item2.shipbillQty;
          }, this);
          item1?.orderTypeDTOList?.forEach((item3) => {
            this.sysPacketTableCol1.push({ value: 'orderTypeName' + item3.orderType, label: item3.orderTypeName + ' 运单数量(单)' });
            item1['orderTypeName' + item3.orderType] = item3.shipbillQty;
          }, this);
          sysPacketList.push(item1);
        }, this);
      this.sysPacketList = [...sysPacketList];
    } else {
      // 默认分组
      let orderBusinessType = {},
        orderType = {},
        consigneeUnitNameSet = new Set(),
        consigneeAddressSet = new Set(),
        lineIdSet = new Set();
      this.unassignedList = this.orderList.map((item) => {
        this.form.actualTotalPcs = parseFloat(this.BigJs(this.form.actualTotalPcs).plus(item.totalPcs || 0));
        this.form.actualTotalWeight = parseFloat(this.BigJs(this.form.actualTotalWeight).plus(item.totalWeight || 0));
        this.form.actualTotalVolume = parseFloat(this.BigJs(this.form.actualTotalVolume).plus(item.totalVolume || 0));
        consigneeUnitNameSet.add(item.consigneeUnitName);
        consigneeAddressSet.add(item.consigneeAddress);
        lineIdSet.add(item.lineId);

        if (orderBusinessType[item.orderBusinessTypeName]) {
          orderBusinessType[item.orderBusinessTypeName]++;
        } else {
          orderBusinessType[item.orderBusinessTypeName] = 1;
        }
        if (orderType[item.orderTypeName]) {
          orderType[item.orderTypeName]++;
        } else {
          orderType[item.orderTypeName] = 1;
        }

        return { ...item };
      });
      this.form.orderLength = this.orderList.length;
      this.form.customerNumber = consigneeUnitNameSet.size;
      this.form.addressNumber = consigneeAddressSet.size;
      this.form.lineNumber = lineIdSet.size;

      for (const key in orderBusinessType) {
        this.form.orderTypeList.push({ value: key + ' 运单数量(单)', num: orderBusinessType[key] });
      }
      for (const key in orderType) {
        this.form.orderTypeList.push({ value: key + ' 运单数量(单)', num: orderType[key] });
      }
    }
  },
  methods: {
    // 返回
    back() {
      this.$emit('back');
    },
    // 调度、审核
    onSave(method) {
      let params = [];
      let list = JSON.parse(JSON.stringify(this.formList));
      for (let index = 0; index < list.length; index++) {
        const item = list[index];

        if (!item.carrierType) {
          this.$message.error('第' + (index + 1) + '条配载单请选择承运方类型');
          return false;
        }
        if (item.carrierType === 1 && !item.carrierId) {
          this.$message.error('第' + (index + 1) + '条配载单请选择承运商');
          return false;
        }
        if (item.carrierType === 2 && !item.driverId) {
          this.$message.error('第' + (index + 1) + '条配载单请选择司机');
          return false;
        }
        if (item.carrierType === 2 && !item.vehicleId) {
          this.$message.error('第' + (index + 1) + '条配载单请选择车辆');
          return false;
        }
        if (!item.loadingBillDetailVO.length) {
          this.$message.error('第' + (index + 1) + '条配载单请分配运单');
          return false;
        }

        let loadingBillDetailVO = [...item.loadingBillDetailVO];
        item.shipbillNumber = loadingBillDetailVO.length;
        delete item.loadingBillDetailVO;
        params.push({
          loadingBillHeaderVO: item,
          loadingBillDetailVO,
        });
      }

      this.spinning = true;
      if (method === 'dispatch') {
        group_dispatch(params)
          .then((res) => {
            if (res.success) {
              this.$message.success(res.message);
              this.$emit('back');
            } else {
              this.$exception(res);
            }
          })
          .finally(() => {
            this.spinning = false;
          });
      } else {
        group_dispatch_review(params)
          .then((res) => {
            if (res.success) {
              this.$message.success(res.message);
              this.$emit('back');
            } else {
              this.$exception(res);
            }
          })
          .finally(() => {
            this.spinning = false;
          });
      }
    },
    onSystemGroup() {
      // let { selctList, unslectList } = this.selectOrUnselect(this.unassignedRowKeys, this.unassignedList)

      let params = {
        groupDimensionList: this.systemGroup.map((item) => item.key),
        shipbillIdList: this.unassignedRowKeys,
      };
      this.spinning = true;
      sys_group_query(params)
        .then((res) => {
          if (res.success) {
            this.$message.success(res.message);
            this.$emit('onSystemGroup', { sysList: res.data, selectSystemGroup: this.systemGroup });
          } else {
            this.$exception(res);
          }
        })
        .finally(() => {
          this.spinning = false;
        });
    },

    // 添加装配单
    onAdd() {
      let { selctList, unslectList } = this.selectOrUnselect(this.unassignedRowKeys, this.unassignedList);
      this.formList.push({
        actualTotalPcs: 0,
        actualTotalWeight: 0,
        actualTotalVolume: 0,
        carrierType: '',
        driverId: '',
        driverCode: '',
        driverName: '',
        driverPhoneNumber: '',
        deliverymanId: '',
        deliverymanCode: '',
        deliverymanName: '',
        deliverymanPhoneNumber: '',
        vehicleId: '',
        vehicleCode: '',
        vehiclePlateNumber: '',
        vehicleTypeCode: '',
        vehicleTypeName: '',
        volumeLoadingRate: '',
        weightLoadingRate: '',
        carrierId: '',
        carrierCode: '',
        carrierName: '',
        groupName: this.groupDimensionLabel + ' 分组',
        memo: '',
        loadingBillDetailVO: selctList,
      });

      this.unassignedList = unslectList;
      this.assignedRowKeys = [];
      this.unassignedRowKeys = [];

      this.totalNumUpdate(this.formList.length - 1);
    },
    onMap() {
      this.editType = 'map';
    },
    onComputed() {},
    carrierTypeChange(index) {
      this.formList[index].driverId = '';
      this.formList[index].driverCode = '';
      this.formList[index].driverName = '';
      this.formList[index].driverPhoneNumber = '';
      this.formList[index].deliverymanId = '';
      this.formList[index].deliverymanCode = '';
      this.formList[index].deliverymanName = '';
      this.formList[index].deliverymanPhoneNumber = '';
      this.formList[index].vehicleId = '';
      this.formList[index].vehicleCode = '';
      this.formList[index].vehiclePlateNumber = '';
      this.formList[index].vehicleTypeCode = '';
      this.formList[index].vehicleTypeName = '';
      this.formList[index].carrierId = '';
      this.formList[index].carrierCode = '';
      this.formList[index].carrierName = '';
    },
    onFormChange(name, index, ...args) {
      let idList = [],
        codeList = [],
        phoneList = [];
      args[2].forEach((item) => {
        idList.push(item.id);
        codeList.push(item.code);
        if (name === 'driver' || name === 'delivery') phoneList.push(item.phoneNumber);
      });
      if (name === 'driver') {
        this.formList[index].driverId = idList.join(',');
        this.formList[index].driverCode = codeList.join(',');
        this.formList[index].driverName = args[1];
        this.formList[index].driverPhoneNumber = phoneList.join(',');
      } else if (name === 'delivery') {
        this.formList[index].deliverymanId = idList.join(',');
        this.formList[index].deliverymanCode = codeList.join(',');
        this.formList[index].driverName = args[1];
        this.formList[index].deliverymanPhoneNumber = phoneList.join(',');
      } else if (name === 'car') {
        this.formList[index].vehicleId = args[2][0].id;
        this.formList[index].vehicleCode = args[2][0].code;
        this.formList[index].vehiclePlateNumber = args[2][0].plateNumber;
        this.formList[index].vehicleTypeCode = args[2][0].vehicleTypeCode;
        this.formList[index].vehicleTypeName = args[2][0].vehicleTypeName;

        this.formList[index].volumeLoadingRate = parseFloat(this.BigJs(this.formList[index].actualTotalVolume).div(args[2][0].volume).times(100)).toFixed(0) + '%';
        this.formList[index].weightLoadingRate = parseFloat(this.BigJs(this.formList[index].actualTotalWeight).div(args[2][0].weight).times(100)).toFixed(0) + '%';
      } else if (name === 'carrier') {
        this.formList[index].carrierId = args[2][0].id;
        this.formList[index].carrierCode = args[2][0].code;
        this.formList[index].carrierName = args[2][0].name;
      }
    },
    onFormInput(name, index) {
      if (name === 'driver') {
        this.formList[index].driverId = '';
        this.formList[index].driverCode = '';
      } else if (name === 'delivery') {
        this.formList[index].deliverymanId = '';
        this.formList[index].deliverymanCode = '';
        this.formList[index].deliverymanPhoneNumber = '';
      } else if (name === 'car') {
        this.formList[index].vehicleId = '';
        this.formList[index].vehicleCode = '';
        this.formList[index].vehicleTypeCode = '';
        this.formList[index].vehicleTypeName = '';
        this.formList[index].volumeLoadingRate = '';
        this.formList[index].weightLoadingRate = '';
      }
    },

    // 表单点击事件
    formClick(index) {
      this.formSelectIndex = index;
      this.assignedList = this.formList[index].loadingBillDetailVO;
      this.assignedRowKeys = [];
    },

    onDown() {
      let { selctList, unslectList } = this.selectOrUnselect(this.unassignedRowKeys, this.unassignedList);
      this.unassignedList = [];
      this.unassignedList = unslectList;
      this.formList[this.formSelectIndex].loadingBillDetailVO = this.formList[this.formSelectIndex].loadingBillDetailVO.concat(selctList);
      this.assignedList = this.formList[this.formSelectIndex].loadingBillDetailVO;

      this.assignedRowKeys = [];
      this.unassignedRowKeys = [];

      this.totalNumUpdate(this.formSelectIndex);
    },
    onUp() {
      let { selctList, unslectList } = this.selectOrUnselect(this.assignedRowKeys, this.assignedList);
      this.unassignedList = this.unassignedList.concat(selctList);
      this.formList[this.formSelectIndex].loadingBillDetailVO = unslectList;
      this.assignedList = this.formList[this.formSelectIndex].loadingBillDetailVO;

      this.assignedRowKeys = [];
      this.unassignedRowKeys = [];

      this.totalNumUpdate(this.formSelectIndex);
    },

    // 获取表格哪些数据选中、哪些数据没有选中
    selectOrUnselect(slectKey, list) {
      let selctList = [],
        unslectList = [];
      list.forEach((item, index) => {
        if (slectKey.includes(item.shipbillId)) {
          item.shippingOrder = index + 1;
          selctList.push(item);
        } else {
          unslectList.push(item);
        }
      });
      return { selctList, unslectList };
    },

    // 系统分组行点击
    sysPacketClickRow(event, activeID, rowRecord) {
      // 首先把已有的配载单中的运单id全部提取出来
      let formList_idList = [];
      this.formList.forEach((item1) => {
        item1.loadingBillDetailVO.forEach((item2) => {
          formList_idList.push(item2.shipbillId);
        });
      });
      // 再从系统分组的运单里把已配载的运单过滤掉
      let unassignedList = [];
      JSON.parse(JSON.stringify(rowRecord.sysGroupShipbillQueryDTOS)).forEach((item) => {
        if (!formList_idList.includes(item.shipbillId)) {
          unassignedList.push(item);
        }
      });
      this.unassignedList = unassignedList;
      this.unassignedRowKeys = [];
    },

    // 每次已分配添加删除的时候更新合计数量
    totalNumUpdate(index) {
      let actualTotalPcs = 0,
        actualTotalWeight = 0,
        actualTotalVolume = 0,
        consigneeUnitNameSet = new Set(),
        consigneeNameSet = new Set(),
        lineIdSet = new Set();
      let { loadingBillDetailVO } = this.formList[index];
      loadingBillDetailVO.forEach((item) => {
        actualTotalPcs = parseFloat(this.BigJs(actualTotalPcs).plus(item.totalPcs || 0));
        actualTotalWeight = parseFloat(this.BigJs(actualTotalWeight).plus(item.totalWeight || 0));
        actualTotalVolume = parseFloat(this.BigJs(actualTotalVolume).plus(item.totalVolume || 0));
        consigneeUnitNameSet.add(item.consigneeUnitName);
        consigneeNameSet.add(item.consigneeName);
        lineIdSet.add(item.lineId);
      });
      this.formList[index].actualTotalPcs = actualTotalPcs;
      this.formList[index].actualTotalWeight = actualTotalWeight;
      this.formList[index].actualTotalVolume = actualTotalVolume;
      this.formList[index].totalPcs = actualTotalPcs;
      this.formList[index].totalWeight = actualTotalWeight;
      this.formList[index].totalVolume = actualTotalVolume;
      this.formList[index].customerNumber = consigneeUnitNameSet.size;
      this.formList[index].siteNumber = consigneeNameSet.size;
      this.formList[index].lineNumber = lineIdSet.size;
      this.formList[index].totalMileage = '';
    },

    // 配载单删除
    onDelete(index) {
      let { loadingBillDetailVO } = this.formList[index];
      this.unassignedList = this.unassignedList.concat(loadingBillDetailVO);
      this.formList.splice(index, 1);
      this.formSelectIndex = -1;
      this.assignedList = [];
      this.assignedRowKeys = [];
    },

    // 系统分组时动态展示的列
    getSysTableCol() {
      this.selectSystemGroup.forEach((item1) => {
        this.sysPacketTableCol0.forEach((item2) => {
          if (item1.label === item2.label) {
            this.sysPacketTableCol1.push(item2);
          }
        });
      });
    },
  },
};
</script>

<style lang="less">
.packet_form {
  height: 250px;
  padding: 10px;
}

.form_select {
  // border: 1px solid #333;
  // box-sizing: border-box;
  background-color: #2badff87;
}
</style>