<template>
  <div class="descriptions-edit">
    <el-form ref="form" v-loading="loading" :model="form" :rules="rules" :show-message="false" v-enterboard>
      <el-descriptions :column="1" border :labelStyle="{width: '120px'}" :contentStyle="{minWidth:'100px'}">
        <el-descriptions-item>
          <template slot="label">车辆</template>
          <MyFormItem prop="lsVehicle" :value="vehicleNumbers">
            <VehicleInput width="100%" :custId="order.custId" :label="vehicleNumbers" multiple @confirm="handleVehicleConfirm"></VehicleInput>
          </MyFormItem>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">运输重量(吨)</template>
          <MyFormItem prop="cargoWt" :value="form.cargoWt">
            <el-input v-model="form.cargoWt" placeholder="运输重量(吨)" />
          </MyFormItem>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">单车运输量(吨)</template>
          <MyFormItem prop="singleWt" :value="form.singleWt">
            <el-input v-model="form.singleWt" placeholder="单车运输量(吨)" />
          </MyFormItem>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">开始运输日期</template>
          <MyFormItem prop="beginDate" :value="form.beginDate">
            <el-date-picker class="el-date-picker" v-model="form.beginDate" value-format="yyyy-MM-dd" type="date" placeholder="请选择开始运输日期">
            </el-date-picker>
          </MyFormItem>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">平均一天车次</template>
          <MyFormItem prop="trainNumber" :value="form.trainNumber">
            <el-input v-model="form.trainNumber" placeholder="平均一天车次" />
          </MyFormItem>
        </el-descriptions-item>
      </el-descriptions>
    </el-form>
    <div class="trans-footer">
      <el-button type="primary" @click="submitForm()">保 存</el-button>
      <el-button @click="$emit('cancel')">取 消</el-button>
    </div>
  </div>
</template>

<script>
import { addBatchTrans } from '@/api/tm/order';
import VehicleInput from "@/views/tm/components/VehicleInput";

export default {
  name: 'TransPlanAuto',
  components: {
    VehicleInput,
  },
  props: {
    order: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    const vehicleCheck = (rule, value, callback) => {
      if (!value || value.length === 0) {
        callback(new Error('车辆不能为空'));
      } else {
        callback();
      }
    };
    return {
      loading: false,
      form: {
        lsVehicle: [],
        cargoInfo: '',
        cargoWt: '',
        beginDate: '',
        trainNumber: '',
      },
      rules: {
        lsVehicle: [
          { required: true, validator: vehicleCheck, trigger: "change" }
        ],
        cargoWt: [
          { required: true, message: "运输重量不能为空", trigger: "blur" }
        ],
        singleWt: [
          { required: true, message: "单车运输量不能为空", trigger: "blur" }
        ],
        beginDate: [
          { required: true, message: "开始运输日期不能为空", trigger: "blur" }
        ],
        trainNumber: [
          { required: true, message: "平均一天车次不能为空", trigger: "blur" }
        ],
      },
    }
  },
  computed: {
    vehicleNumbers() {
      return this.form.lsVehicle.map(item => item.vehicleNumber).join();
    }
  },
  created() {
  },
  methods: {
    handleVehicleConfirm(vehicles) {
      this.form.lsVehicle = vehicles || [];
    },
    submitForm() {
      this.$refs.form.validate((valid, rules) => {
        if (!valid) {
          this.$modal.formWarning(rules);
          return;
        }
        addBatchTrans({
          id: this.order.id,
          ...this.form,
        }).then((res) => {
          this.$message.success('操作成功');
          this.$emit('success', res.data || []);
        })
        
      });
    }
  }
}
</script>

<style scoped lang="scss">
.descriptions-edit {
  height: calc(100vh - 210px);
  overflow-y: auto;
  padding: 0 15px;
  ::v-deep .el-descriptions-item__label.is-bordered-label {
    padding: 5px !important;
    width: 100px;
  }
  ::v-deep .el-descriptions__header {
    margin-bottom: 10px;
  }

  .trans-footer {
    position: absolute;
    bottom: 5px;
    right: 30px;
    z-index: 100;
  }
}

</style>