<template>
  <a-spin :spinning="confirmLoading">
    <j-form-container :disabled="formDisabled">
      <a-form-model ref="form" :model="model" :rules="validatorRules" slot="detail">
        <a-row>
          <a-col :span="24">
            <a-form-model-item label="起始区域" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="startArea">
              <!-- <a-input v-model="model.startArea" placeholder="请输入起始区域"  ></a-input> -->
              <a-auto-complete v-model="model.startArea" placeholder="请输入起始区域"  @select="startAreaSelect" @change="startAreaChange" :dataSource="startAreaList"></a-auto-complete>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="起始城市" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="startCity">
              <a-input v-model="model.startCity" placeholder="请输入起始城市" disabled ></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="目标区域" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="targetArea">
              <a-input v-model="model.targetArea" placeholder="请输入目标区域" disabled ></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="目标城市" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="targetCity">
              <a-input v-model="model.targetCity" placeholder="请输入目标城市" disabled ></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="具体路线" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="route">
              <a-input v-model="model.route" placeholder="请输入具体路线" disabled ></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="车型" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="carType">
              <!-- <j-dict-select-tag type="list" v-model="model.carType" dictCode="tms_vehicle_pallet,car_type,car_type" placeholder="请选择车型" /> -->
              <a-auto-complete v-model="model.carType" placeholder="请输入车型"  @select="carTypeSelect" @change="carTypeChange" :dataSource="carTypeList"></a-auto-complete>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="公里数" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="kilometers">
              <a-input-number v-model="model.kilometers" placeholder="请输入公里数" style="width: 100%" disabled/>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="车长" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="carLong">
              <a-input-number v-model="model.carLong" placeholder="请输入车长" style="width: 100%" disabled/>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="装卸吨位" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="tonnage">
              <a-input-number v-model="model.tonnage" placeholder="请输入装卸吨位" style="width: 100%" />
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="供应商编码" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="supplierCode">
              <!-- <a-input v-model="model.supplierCode" placeholder="请输入供应商编码"  ></a-input> -->
              <a-auto-complete v-model="model.supplierCode" placeholder="请输入供应商编码"  @select="supplierCodeSelect" @change="supplierCodeChange" :dataSource="supplierCodeList"></a-auto-complete>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="运输方式" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="transportMode">
              <a-input v-model="model.transportMode" placeholder="请输入运输方式"  ></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="供应商名称" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="supplierName">
              <a-input v-model="model.supplierName" placeholder="请输入供应商名称" disabled ></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="定标价格" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="tandardPrice">
              <a-input-number v-model="model.tandardPrice" placeholder="请输入定标价格" style="width: 100%" />
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="BC价格" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="bcPrice">
              <a-input-number v-model="model.bcPrice" placeholder="请输入BC价格" style="width: 100%" />
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="公里单价" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="unitPrice">
              <a-input-number v-model="model.unitPrice" placeholder="请输入公里单价" style="width: 100%" />
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="生效日期" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="effectiveDate">
              <j-date placeholder="请选择生效日期" v-model="model.effectiveDate"  style="width: 100%" />
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="时效" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="validity">
              <a-input v-model="model.validity" placeholder="请输入时效"  ></a-input>
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form-model>
    </j-form-container>
  </a-spin>
</template>

<script>

  import { httpAction, getAction } from '@/api/manage'
  import { validateDuplicateValue } from '@/utils/util'

  export default {
    name: 'TmsIogisticsPriceForm',
    components: {
    },
    props: {
      //表单禁用
      disabled: {
        type: Boolean,
        default: false,
        required: false
      }
    },
    data () {
      return {
        areaCityList:[],
        startAreaList:[],
        carTypeLongList:[],
        carTypeList:[],
        supplierCodeNameList:[],
        supplierCodeList:[],
        model:{
         },
        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 },
        },
        confirmLoading: false,
        validatorRules: {
        },
        url: {
          add: "/iogisticsprice/tmsIogisticsPrice/add",
          edit: "/iogisticsprice/tmsIogisticsPrice/edit",
          queryById: "/iogisticsprice/tmsIogisticsPrice/queryById",
          getAreaCity: "/logisticsroute/logisticsRoute/getAreaCity",
          getCarTypeLong: "/vehiclepallet/vehiclePallet/getCarTypeLong",
          getSupplierCodeName: "/vehicleoperator/tmsVehicleOperator/getSupplierCodeName"
        }
      }
    },
    computed: {
      formDisabled(){
        return this.disabled
      },
    },
    created () {
       //备份model原始值
      this.modelDefault = JSON.parse(JSON.stringify(this.model));
      this.getAreaCity();
      this.getCarTypeLong();
      this.getSupplierCodeName();
    },
    methods: {
      add () {
        this.edit(this.modelDefault);
      },
      edit (record) {
        this.model = Object.assign({}, record);
        this.visible = true;
      },
      submitForm () {
        const that = this;
        // 触发表单验证
        this.$refs.form.validate(valid => {
          if (valid) {
            that.confirmLoading = true;
            let httpurl = '';
            let method = '';
            if(!this.model.id){
              httpurl+=this.url.add;
              method = 'post';
            }else{
              httpurl+=this.url.edit;
               method = 'put';
            }
            httpAction(httpurl,this.model,method).then((res)=>{
              if(res.success){
                that.$message.success(res.message);
                that.$emit('ok');
              }else{
                that.$message.warning(res.message);
              }
            }).finally(() => {
              that.confirmLoading = false;
            })
          }
         
        })
      },
      getAreaCity(){
        getAction(this.url.getAreaCity).then(res => {
          if (res.success) {
            this.areaCityList = res.result;
            this.startAreaList = res.result;
          }
        })
      },
      startAreaSelect(){
        let startArea = this.startAreaList.filter(x=>x.includes(this.model.startArea))[0].split('&-')[0];
        let startCity = this.startAreaList.filter(x=>x.includes(this.model.startArea))[0].split('&-')[1];
        let targetArea = this.startAreaList.filter(x=>x.includes(this.model.startArea))[0].split('&-')[2];
        let targetCity = this.startAreaList.filter(x=>x.includes(this.model.startArea))[0].split('&-')[3];
        let route = this.startAreaList.filter(x=>x.includes(this.model.startArea))[0].split('&-')[4];
        let kilometers = this.startAreaList.filter(x=>x.includes(this.model.startArea))[0].split('&-')[5];
        this.model.startArea = startArea;
        this.model.startCity = startCity;
        this.model.targetArea = targetArea;
        this.model.targetCity = targetCity;
        this.model.route = route;
        this.model.kilometers = kilometers;
      },
      startAreaChange(val){
        this.startAreaList = this.areaCityList.filter(x => x.includes(val));
      },

      getCarTypeLong(){
        getAction(this.url.getCarTypeLong).then(res => {
          if (res.success) {
            this.carTypeLongList = res.result;
            this.carTypeList = res.result;
          }
        })
      },
      carTypeSelect(){
        let carType = this.carTypeList.filter(x=>x.includes(this.model.carType))[0].split('&-')[0];
        let carLong = this.carTypeList.filter(x=>x.includes(this.model.carType))[0].split('&-')[1];
        this.model.carType = carType;
        this.model.carLong = carLong;
      },
      carTypeChange(val){
        this.carTypeList = this.carTypeLongList.filter(x => x.includes(val));
      },

      getSupplierCodeName(){
        getAction(this.url.getSupplierCodeName).then(res => {
          if (res.success) {
            this.supplierCodeNameList = res.result;
            this.supplierCodeList = res.result;
          }
        })
      },
      supplierCodeSelect(){
        let supplierCode = this.supplierCodeList.filter(x=>x.includes(this.model.supplierCode))[0].split('&-')[0];
        let supplierName = this.supplierCodeList.filter(x=>x.includes(this.model.supplierCode))[0].split('&-')[1];
        this.model.supplierCode = supplierCode;
        this.model.supplierName = supplierName;
      },
      supplierCodeChange(val){
        this.supplierCodeList = this.supplierCodeNameList.filter(x => x.includes(val));
      },
    }
  }
</script>