<!--
@name: 客户管理-收货方编辑查看
@author: 张泽贤
@time: 2022-07-13
@doc: PROLOG_UPCloudSolutionForTMS__v1.2.1_基础数据_1.2.1.doc
-->
<template>
  <p-card :loading="spinning" class="full-card-panel">
    <a-space slot="title">
      <a-icon type="arrow-left" style="color: #1990ff" @click="back" />
      收货方管理-{{ typeTitle }}
    </a-space>
    <div slot="extra" v-show="type !== 'consigneeView'">
      <p-button type="primary" @click="onSave" v-action:child_saveSubmit>保存</p-button>
    </div>

    <p-form-model ref="ruleForm" class="plg-grid-from" :model="form" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }" :rules="rules">
      <a-row>
        <a-col :span="6">
          <p-form-model-item label="收货方编码" prop="code">
            <div v-if="type === 'consigneeView'">{{ form.code }}</div>
            <p-input v-model="form.code" :disabled="type === 'consigneeEdit'" v-else />
          </p-form-model-item>
        </a-col>
        <a-col :span="6">
          <p-form-model-item label="收货方名称" prop="name">
            <div v-if="type === 'consigneeView'">{{ form.name }}</div>
            <p-input v-model="form.name" :disabled="type === 'consigneeEdit'" v-else />
          </p-form-model-item>
        </a-col>
        <a-col :span="6">
          <p-form-model-item label="收货方简称" prop="shortName">
            <div v-if="type === 'consigneeView'">{{ form.shortName }}</div>
            <p-input v-model="form.shortName" v-else />
          </p-form-model-item>
        </a-col>
        <a-col :span="6">
          <p-form-model-item label="默认承运方类型" prop="carrierType">
            <p-select :mode="type === 'consigneeView' ? 'txt' : null" v-model="form.carrierType" :options="options.LINE_CARRIER_TYPE" @change="carrierTypeChange" />
          </p-form-model-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="6">
          <p-form-model-item label="联系人" prop="contact">
            <div v-if="type === 'consigneeView'">{{ form.contact }}</div>
            <p-input v-model="form.contact" v-else />
          </p-form-model-item>
        </a-col>
        <a-col :span="6">
          <p-form-model-item label="手机号" prop="phoneNumber">
            <div v-if="type === 'consigneeView'">{{ form.phoneNumber }}</div>
            <p-input v-model="form.phoneNumber" v-else />
          </p-form-model-item>
        </a-col>
        <a-col :span="6">
          <p-form-model-item label="座机号" prop="landlineNumber">
            <div v-if="type === 'consigneeView'">{{ form.landlineNumber }}</div>
            <p-input v-model="form.landlineNumber" v-else />
          </p-form-model-item>
        </a-col>
        <a-col :span="6">
          <p-form-model-item label="默认承运方" prop="carrierName">
            <div v-if="type === 'consigneeView'">{{ form.carrierName }}</div>
            <p-search-modal v-model="form.carrierName" v-bind="carrierAttr" @change="(...args) => onFormChange(form.carrierType, ...args)" v-else />
          </p-form-model-item>
        </a-col>
        <a-col :span="6">
          <p-form-model-item v-if="form.carrierType === 2" label="默认车辆" prop="vehiclePlateNumber">
            <div v-if="type === 'consigneeView'">{{ form.vehiclePlateNumber }}</div>
            <p-search-modal v-model="form.vehiclePlateNumber" v-bind="carAttr" @change="(...args) => onFormChange('car', ...args)" v-else />
          </p-form-model-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="6">
          <p-form-model-item label="关联方手机号" prop="relationPhoneNumber">
            <div v-if="type === 'consigneeView'">{{ form.relationPhoneNumber }}</div>
            <p-input v-model="form.relationPhoneNumber" v-else />
          </p-form-model-item>
        </a-col>
        <a-col :span="6">
          <p-form-model-item label="省市区" prop="zoneValue">
            <div v-if="type === 'consigneeView'">{{ form.provinceName + form.cityName + form.districtName }}</div>
            <p-cascader-zone :value="zoneValue" :disabled="type === 'consigneeView'" @change="handleZoneChange" @popupVisibleChange="popupVisibleChange" :level="3" v-else />
          </p-form-model-item>
        </a-col>
        <a-col :span="12">
          <p-form-model-item label="详细地址" prop="address" :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }">
            <a-row>
              <a-col :span="20">
                <div v-if="type === 'consigneeView'">{{ form.address }}</div>
                <p-input v-model="form.address" v-else />
              </a-col>
              <a-col :span="4" style="text-align: right" v-if="type !== 'consigneeView'">
                <p-button type="primary" @click="onAddressAnalysis">地址解析</p-button>
              </a-col>
            </a-row>
          </p-form-model-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="6">
          <p-form-model-item label="邮箱" prop="email">
            <div v-if="type === 'consigneeView'">{{ form.email }}</div>
            <p-input v-model="form.email" v-else />
          </p-form-model-item>
        </a-col>

        <a-col :span="6">
          <p-form-model-item label="经度" prop="longitude">
            <div v-if="type === 'consigneeView'">{{ form.longitude }}</div>
            <p-input v-model="form.longitude" v-else readOnly />
          </p-form-model-item>
        </a-col>
        <a-col :span="6">
          <p-form-model-item label="纬度" prop="latitude">
            <div v-if="type === 'consigneeView'">{{ form.latitude }}</div>
            <p-input v-model="form.latitude" v-else readOnly />
          </p-form-model-item>
        </a-col>
        <a-col :span="6">
          <p-form-model-item label="备注" prop="memo">
            <div v-if="type === 'consigneeView'">{{ form.memo }}</div>
            <p-input v-model="form.memo" v-else />
          </p-form-model-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="6">
          <p-form-model-item label="配送方式" prop="deliveryPattern">
            <p-select :mode="type === 'consigneeView' ? 'txt' : null" allowClear v-model="form.deliveryPattern" placeholder="选择配送方式" :options="options.DELIVERY_METHOD_TYPE" />
          </p-form-model-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="6">
          <p-form-model-item label="站点编码" prop="stationCode">
            <div v-if="type === 'consigneeView'">{{ form.stationCode }}</div>
            <p-search-modal v-model="form.stationCode" v-bind="$data.$formItems.stationAttr" @change="(...args) => onFormChange('station', ...args)" v-else />
          </p-form-model-item>
        </a-col>
        <a-col :span="6">
          <p-form-model-item label="站点名称" prop="stationName">
            <div v-if="type === 'consigneeView'">{{ form.stationName }}</div>
            <p-input v-model="form.stationName" disabled v-else />
          </p-form-model-item>
        </a-col>
        <a-col :span="6">
          <p-form-model-item label="配送顺序" prop="stationDeliveryOrder">
            <div v-if="type === 'consigneeView'">{{ form.stationDeliveryOrder }}</div>
            <p-input v-model="form.stationDeliveryOrder" disabled v-else />
          </p-form-model-item>
        </a-col>
        <a-col :span="6">
          <p-form-model-item label="区域" prop="stationAreas">
            <div v-if="type === 'consigneeView'">{{ form.stationAreas }}</div>
            <p-input v-model="form.stationAreas" disabled v-else />
          </p-form-model-item>
        </a-col>
      </a-row>
      <a-divider orientation="left">控制信息</a-divider>
      <a-row>
        <a-col :span="6">
          <p-form-model-item prop="startTime">
            <a-space slot="label">
              每日作业开始时间
              <a-tooltip>
                <template slot="title">
                  <span>智能调度条件限制使用此参数，用于计算参考时间窗口</span>
                </template>
                <a-icon type="exclamation-circle" :style="{ color: '#2b80ff' }" />
              </a-tooltip>
            </a-space>
            <div v-if="type === 'consigneeView'">{{ form.startTime }}</div>
            <p-time-picker v-model="form.startTime" format="HH:mm" valueFormat="HH:mm" v-else />
          </p-form-model-item>
        </a-col>
        <a-col :span="6">
          <p-form-model-item prop="endTime">
            <a-space slot="label">
              每日作业结束时间
              <a-tooltip>
                <template slot="title">
                  <span>智能调度条件限制使用此参数，用于计算参考时间窗口</span>
                </template>
                <a-icon type="exclamation-circle" :style="{ color: '#2b80ff' }" />
              </a-tooltip>
            </a-space>
            <div v-if="type === 'consigneeView'">{{ form.endTime }}</div>
            <p-time-picker v-model="form.endTime" format="HH:mm" valueFormat="HH:mm" v-else />
          </p-form-model-item>
        </a-col>
        <a-col :span="6">
          <p-form-model-item prop="loadingTime">
            <a-space slot="label">
              平均装卸时长
              <a-tooltip>
                <template slot="title">
                  <span>智能调度条件限制使用此参数，用于计算参考时间窗口</span>
                </template>
                <a-icon type="exclamation-circle" :style="{ color: '#2b80ff' }" />
              </a-tooltip>
            </a-space>
            <div v-if="type === 'consigneeView'">{{ form.loadingTime }}分钟</div>
            <a-row v-else type="flex">
              <a-col :flex="1">
                <p-input-number style="width: 95%" v-model="form.loadingTime" :min="0" :precision="0" />
              </a-col>
              <a-col :flex="0">分钟</a-col>
            </a-row>
          </p-form-model-item>
        </a-col>
      </a-row>
      <a-divider orientation="left" v-if="mextendedField_list.length > 0">扩展属性</a-divider>
      <extendedField :mextendedField_list="mextendedField_list" :type="type" :form="form"></extendedField>
    </p-form-model>
  </p-card>
</template>

<script>
import extendedField from '@/blocks/extendedField';
import * as $formItems from '@/blocks/components/searchModalConfig/index';
import CascaderZone from '@/blocks/components/cascaderZone';

import { viewCustomerReceiver, saveCustomerReceiver, updateCustomerReceiver, query_by_administrative } from '../js/api';

export default {
  components: { extendedField, PCascaderZone: CascaderZone },
  props: {
    type: '',
    editId: {
      type: String,
      default: '',
    },
    customerData: {
      type: Object,
      default: () => ({}),
    },
    options: {
      type: Object,
      default: () => ({}),
    },
    mextendedField_list: {
      type: Array,
      default: () => [],
    },
  },
  computed: {
    typeTitle() {
      const dictionary = {
        consigneeAdd: '新增',
        consigneeEdit: '编辑',
        consigneeView: '查看',
        consigneeCopy: '复制',
      };
      return dictionary[this.type] || this.type;
    },
    carrierAttr() {
      let { carrierAttr, driverAttr } = $formItems;
      let { carrierType } = this.form;
      if (carrierType === 1) {
        return carrierAttr;
      } else {
        return driverAttr;
      }
    },
    carAttr() {
      return Object.assign({ remoteData: { driverIds: [this.form.carrierId] } }, $formItems.carAttr);
    },
  },
  data() {
    return {
      $formItems,
      spinning: false,
      form: {
        carrierType: 1,
        carrierId: '',
        carrierCode: '',
        carrierName: '',
        vehicleId: '',
        vehicleCode: '',
        vehiclePlateNumber: '',
        deliveryPattern: undefined,
        startTime: '',
        endTime: '',
        loadingTime: '',
      },
      rules: {
        code: [{ required: true, message: '收货方编码不能为空', trigger: 'blur' }],
        name: [{ required: true, message: '收货方名称不能为空', trigger: 'blur' }],
      },

      // 省市区弹窗状态
      zoneValue: [],
    };
  },
  mounted() {
    if (this.editId) {
      this.spinning = true;
      viewCustomerReceiver({ id: this.editId })
        .then((res) => {
          if (res.success) {
            if (this.type === 'consigneeCopy') {
              res.data.code = '';
              res.data.name = '';
            }
            this.form = { ...res.data };
            if (this.form.province) {
              this.zoneValue.push(this.form.province);
            }
            if (this.form.city) {
              this.zoneValue.push(this.form.city);
            }
            if (this.form.district) {
              this.zoneValue.push(this.form.district);
            }
          } else {
            this.$exception(res);
          }
        })
        .finally(() => {
          this.spinning = false;
        });
    }
  },
  methods: {
    back() {
      this.$emit('back', this.customerData);
    },
    onSave() {
      this.$refs.ruleForm.validate((valid) => {
        if (!valid) return;
        if (this.type === 'consigneeAdd' || this.type === 'consigneeCopy') this.onMethod(saveCustomerReceiver);
        if (this.type === 'consigneeEdit') this.onMethod(updateCustomerReceiver);

        return;
      });
    },
    onMethod(method) {
      let params = { ...this.form };
      params.customerId = this.customerData.id;
      params.customerCode = this.customerData.code;
      params.customerName = this.customerData.name;
      this.spinning = true;
      method(params)
        .then((res) => {
          if (res.success) {
            this.$message.success(res.message);
            this.$emit('back', this.customerData);
          } else {
            this.$exception(res);
          }
        })
        .finally(() => {
          this.spinning = false;
        });
    },

    onFormChange(name, ...args) {
      if (name === 'car') {
        this.$set(this.form, 'vehicleId', args[1] ? args[2][0].id : '');
        this.$set(this.form, 'vehicleCode', args[1] ? args[2][0].code : '');
        this.$set(this.form, 'vehiclePlateNumber', args[1] ? args[2][0].plateNumber : '');
      } else if (name === 'station') {
        this.$set(this.form, 'stationId', args[1] ? args[2][0].id : '');
        this.$set(this.form, 'stationCode', args[1] ? args[2][0].code : '');
        this.$set(this.form, 'stationName', args[1] ? args[2][0].name : '');
        this.$set(this.form, 'stationDeliveryOrder', args[1] ? args[2][0].deliveryOrder : '');
        this.$set(this.form, 'stationAreas', args[1] ? args[2][0].areas : '');
      } else {
        this.$set(this.form, 'carrierId', args[1] ? args[2][0].id : '');
        this.$set(this.form, 'carrierCode', args[1] ? args[2][0].code : '');
        this.$set(this.form, 'carrierName', args[1] ? args[2][0].name : '');
        this.$set(this.form, 'carrierPhoneNumber', args[1] ? args[2][0].phoneNumber : '');
        if (name === 2) {
          console.log(args[2][0]);
          this.$set(this.form, 'vehicleId', args[1] ? args[2][0].vehicleId : '');
          this.$set(this.form, 'vehicleCode', args[1] ? args[2][0].vehicleCode : '');
          this.$set(this.form, 'vehiclePlateNumber', args[1] ? args[2][0].vehiclePlateNumber : '');
        }
      }
    },
    // 省市区
    handleZoneChange(value, arrValue, form) {
      this.form.provinceName = '';
      this.form.province = '';
      this.form.cityName = '';
      this.form.city = '';
      this.form.districtName = '';
      this.form.district = '';
      this.zoneValue = value;
      if (this.zoneValue && this.zoneValue.length) {
        if (arrValue[0]) {
          this.form.provinceName = arrValue[0].zname;
          this.form.province = arrValue[0].zoneid;
        }
        if (arrValue[1]) {
          this.form.cityName = arrValue[1].zname;
          this.form.city = arrValue[1].zoneid;
        }
        if (arrValue[2]) {
          this.form.districtName = arrValue[2].zname;
          this.form.district = arrValue[2].zoneid;
        }
      }
    },

    // 通过省市区获取站点
    popupVisibleChange(visible) {
      if (!visible) {
        query_by_administrative({ province: this.form.province, city: this.form.city, district: this.form.district }).then((res) => {
          if (res.success) {
            if (res.data) {
              const { id, code, name, deliveryOrder, areas } = res.data;
              this.$set(this.form, 'stationId', id || '');
              this.$set(this.form, 'stationCode', code || '');
              this.$set(this.form, 'stationName', name || '');
              this.$set(this.form, 'stationDeliveryOrder', deliveryOrder || '');
              this.$set(this.form, 'stationAreas', areas || '');
            }
          } else {
            this.$exception(res);
          }
        });
      }
    },
    // 地址解析
    onAddressAnalysis() {
      this.$emit('consigneeUpadteAddress', { address: this.form.address, longitude: this.form.longitude, latitude: this.form.latitude });
    },

    carrierTypeChange() {
      this.form.carrierId = '';
      this.form.carrierCode = '';
      this.form.carrierName = '';
      this.form.vehicleId = '';
      this.form.vehicleCode = '';
      this.form.vehiclePlateNumber = '';
    },
  },
};
</script>

<style lang='less' scoped>
::v-deep .ant-calendar-picker {
  width: 100%;
}

.ant-input-number {
  width: 100%;
}

.ant-time-picker {
  width: 100%;
}
</style>