<!--
@name: 取号管理
@author: 张泽贤
@time: 2022-07-15
@doc: 
-->
<template>
  <div class="pages">
    <!-- 弹窗 -->
    <p-modal title="取号信息" width="500px" :visible="visible" :confirm-loading="confirmLoading" @ok="handleOk" @cancel="visible = false">
      <p-form-model ref="dialogForm" :model="dialogForm" :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }" class="plg-grid-from" :rules="rules">
        <a-row>
          <a-col :span="24">
            <p-form-model-item label="取号运单">
              <p-input v-model="dialogForm.shipbillNo" placeholder="请输入运单号 回车后获取数据" @pressEnter="shipbillNoEnter" />
            </p-form-model-item>
          </a-col>
          <a-col :span="24">
            <p-form-model-item label="取号地点" prop="branchName">
              <p-search-modal v-model="dialogForm.branchName" v-bind="$data.$formItems.parkBranchAttr" @change="(...args) => onFormChange('branch', ...args)" />
            </p-form-model-item>
          </a-col>
          <a-col :span="24">
            <p-form-model-item label="取号位置">
              <p-input v-model="dialogForm.branchAddress" />
            </p-form-model-item>
          </a-col>
          <a-col :span="24">
            <p-form-model-item label="取号司机" prop="driverName">
              <p-search-modal v-model="dialogForm.driverName" v-bind="$data.$formItems.driverAttr" @change="(...args) => onFormChange('driver', ...args)" />
            </p-form-model-item>
          </a-col>
          <a-col :span="24">
            <p-form-model-item label="取号手机">
              <p-input v-model="dialogForm.driverPhoneNumber" />
            </p-form-model-item>
          </a-col>
          <a-col :span="24">
            <p-form-model-item label="取号车辆" prop="vehiclePlateNumber">
              <p-search-modal v-model="dialogForm.vehiclePlateNumber" v-bind="carAttr" @change="(...args) => onFormChange('car', ...args)" :disabled="!dialogForm.driverId" />
            </p-form-model-item>
          </a-col>
          <a-col :span="24">
            <p-button @click="handleCancel">重置</p-button>
          </a-col>
        </a-row>
      </p-form-model>
    </p-modal>

    <p-button type="primary" @click="visible = true">取号</p-button>

    <reserve
      v-if="editType === '1'"
      :editData="dialogForm"
      :options="options"
      @goWaybill="goWaybill"
      :mx_columns="mx_columns"
      :waybill_columns="waybill_columns"
      :goods_columns="goods_columns"
      :pack_columns="pack_columns"
      :waybill2_columns="waybill2_columns"
    ></reserve>
    <waybill
      v-if="editType === '2'"
      :editData="dialogForm"
      :options="options"
      :waybill_columns="waybill_columns"
      :goods_columns="goods_columns"
      :pack_columns="pack_columns"
      :waybill2_columns="waybill2_columns"
    ></waybill>
  </div>
</template>

<script>
import { initDictionary, resultExtendedField } from '@/blocks/utils';
import * as $formItems from '@/blocks/components/searchModalConfig/index.js';

import reserve from './modules/reserve.vue';
import waybill from './modules/waybill.vue';
import { getTakeNumberInfoByShipbillNo } from './js/api';
import { setWaybillColumns, setGoodsColums, setPackColums } from '../js/tableConfig.js';
import { setMainColumns, setWaybill2Columns } from './js/tableConfig.js';

export default {
  components: { reserve, waybill },
  computed: {
    carAttr() {
      let carAttr = $formItems.carAttr;
      return Object.assign({ remoteData: { driverIds: [this.dialogForm.driverId] } }, carAttr);
    },
  },
  data() {
    return {
      $formItems,
      spinning: false,
      editType: '', // ''-首页 '1'-按预约单 '2'-按运单 '3'-叫号

      // 弹窗数据
      visible: true,
      confirmLoading: false,
      dialogForm: {
        branchId: '',
        branchName: '',
        branchAddress: '',
        driverId: '',
        driverCode: '',
        driverName: '',
        driverPhoneNumber: '',
        vehicleId: '',
        vehiclePlateNumber: '',
      },

      rules: {
        branchName: [{ required: true, message: '取号地点不能为空', trigger: 'change' }],
        driverName: [{ required: true, message: '取号司机不能为空', trigger: 'change' }],
        vehiclePlateNumber: [{ required: true, message: '取号车辆不能为空', trigger: 'change' }],
      },

      options: {
        APPOINTMENT_TYPE: [],
        ORDER_BUSINESS_TYPE: [],
      },

      tableExtendedField: [],
      mx_columns: setMainColumns(this, this.tableExtendedField),

      waybillTableExtendedField: [],
      waybill_columns: setWaybillColumns(this, this.waybillTableExtendedField),
      waybill2_columns: setWaybill2Columns(this, this.waybillTableExtendedField),

      goods_columns: setGoodsColums(this),

      pack_columns: setPackColums(this),
    };
  },
  mounted() {
    initDictionary([{ objectcode: 'APPOINTMENT_TYPE' }, { objectcode: 'ORDER_BUSINESS_TYPE' }]).then((res) => {
      this.options.APPOINTMENT_TYPE = res.APPOINTMENT_TYPE.map((item) => {
        item.value = +item.value;
        return item;
      });
      this.options.ORDER_BUSINESS_TYPE = res.ORDER_BUSINESS_TYPE.map((item) => {
        item.value = +item.value;
        return item;
      });
    });
    resultExtendedField({ extendedObjectCode: '6' }).then((res) => {
      if (res) {
        this.tableExtendedField = res.table;
        this.mx_columns = setMainColumns(this, this.tableExtendedField);
      }
    });
    resultExtendedField({ extendedObjectCode: '13' }).then((res) => {
      if (res) {
        this.waybillTableExtendedField = res.table;
        this.waybill_columns = setWaybillColumns(this, this.waybillTableExtendedField);
        this.waybill2_columns = setWaybill2Columns(this, this.waybillTableExtendedField);
      }
    });
  },
  methods: {
    handleOk() {
      this.$refs.dialogForm.validate((valid) => {
        if (!valid) return;
        this.editType = '1';
        this.visible = false;
      });
    },
    handleCancel() {
      this.dialogForm = {
        branchId: '',
        branchCode: '',
        branchName: '',
        branchAddress: '',
        driverId: '',
        driverCode: '',
        driverName: '',
        driverPhoneNumber: '',
        vehiclePlateNumber: '',
      };
    },
    onFormChange(name, ...args) {
      if (name === 'branch') {
        if (args[2].length) {
          this.dialogForm.branchId = args[2][0].id;
          this.dialogForm.branchCode = args[2][0].code;
          this.dialogForm.branchName = args[2][0].name;
          this.dialogForm.branchAddress = args[2][0].address;
        } else {
          this.dialogForm.branchId = '';
          this.dialogForm.branchCode = '';
          this.dialogForm.branchName = '';
          this.dialogForm.branchAddress = '';
        }
      } else if (name === 'driver') {
        if (args[2].length) {
          this.dialogForm.driverId = args[2][0].id;
          this.dialogForm.driverCode = args[2][0].code;
          this.dialogForm.driverName = args[2][0].name;
          this.dialogForm.driverPhoneNumber = args[2][0].phoneNumber || '';
          this.dialogForm.vehicleId = args[2][0].vehicleId || '';
          this.dialogForm.vehiclePlateNumber = args[2][0].vehiclePlateNumber || '';
        } else {
          this.dialogForm.driverId = '';
          this.dialogForm.driverCode = '';
          this.dialogForm.driverName = '';
          this.dialogForm.driverPhoneNumber = '';
          this.dialogForm.vehicleId = '';
          this.dialogForm.vehiclePlateNumber = '';
        }
      } else if (name === 'car') {
        if (args[2].length) {
          this.dialogForm.vehicleId = args[2][0].id;
          this.dialogForm.vehiclePlateNumber = args[2][0].plateNumber;
        } else {
          this.dialogForm.vehicleId = '';
          this.dialogForm.vehiclePlateNumber = '';
        }
      }
    },
    goWaybill(editType) {
      this.editType = editType;
    },

    shipbillNoEnter() {
      if (this.dialogForm.shipbillNo) {
        this.confirmLoading = true;
        getTakeNumberInfoByShipbillNo({ shipbillNo: this.dialogForm.shipbillNo })
          .then((res) => {
            if (res.success) {
              this.$message.success(res.message);
              this.dialogForm = { shipbillNo: this.dialogForm.shipbillNo, ...res.data };
            } else {
              this.$exception(res);
            }
          })
          .finally(() => {
            this.confirmLoading = false;
          });
      }
    },
  },
};
</script>