<template>
  <!-- 车辆回收 -->
  <el-dialog :title="title" v-if="showFlag" :visible.sync="showFlag"
             :modal="true" width="900px" append-to-body>
    <el-form ref="form" :model="form" :rules="rules" label-width="80px">
      <el-row>
        <el-col :md="8" :xs="12">
            <el-form-item :label="$t('派车编号')" prop="dispatchCode" v-if="form.dispatchId != null">
              <el-input v-model="form.dispatchCode" disabled />
            </el-form-item>
        </el-col>
        <el-col :md="8" :xs="12">
          <el-form-item :label="$t('名称')" prop="dispatchTitle">
            <el-input v-model="form.dispatchTitle" disabled />
          </el-form-item>
        </el-col>
        <el-col :md="8" :xs="12">
          <el-form-item :label="$t('车辆')" prop="vehicleId">
            <el-input
              v-model="form.vehicleName"
              disabled
             
            >
              <el-button
                slot="append"
                icon="el-icon-search"
                @click="$refs['VehicleSelectRef'].showFlag = true"
              ></el-button>
            </el-input>
            <VehicleSelect
              ref="VehicleSelectRef"
              @onSelected="onVehicleSelect"
            />
          </el-form-item>
        </el-col>
        <el-col :md="8" :xs="12">
          <el-form-item :label="$t('派车人')" prop="dispatchBy">
            <el-input v-model="form.dispatchBy" disabled />
          </el-form-item>
        </el-col>
        <el-col :md="8" :xs="12">
          <el-form-item :label="$t('驾驶人')" prop="driverBy">
            <el-input v-model="form.driverBy" disabled />
          </el-form-item>
        </el-col>
        <el-col :md="8" :xs="12">
          <el-form-item :label="$t('派车时间')" required prop="dispatchDate">
            <el-date-picker clearable readonly
                            v-model="form.dispatchDate"
                            type="date"
                            disabled
                            value-format="yyyy-MM-dd"
                           >
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :md="8" :xs="12">
          <el-form-item :label="$t('派时总里程')" prop="startMileage">
            <el-input v-model="form.startMileage" disabled/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :md="8" :xs="12">
          <el-form-item :label="$t('返回时间')" prop="backDate">
            <el-date-picker clearable
                            v-model="form.backDate"
                            type="date"
                            value-format="yyyy-MM-dd"
                           >
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :md="8" :xs="12">
          <el-form-item :label="$t('还车总里程')" prop="endMileage">
            <el-input v-model="form.endMileage"  @change="mileageCalculate"/>
          </el-form-item>
        </el-col>
        <el-col :md="8" :xs="12">
          <el-form-item :label="$t('本次里程数')" prop="travelMileage">
            <el-input v-model="form.travelMileage"/>
          </el-form-item>
        </el-col>
        <el-col :md="8" :xs="12">
          <el-form-item :label="$t('耗油量')" prop="oilConsumption">
            <el-input v-model="form.oilConsumption" />
          </el-form-item>
        </el-col>
        <el-col :md="8" :xs="12">
          <el-form-item :label="$t('common.remark')" prop="remark">
            <el-input v-model="form.remark" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitForm" v-if="optType !='view'">{{ $t('common.confirm') }}</el-button>
      <el-button  @click="showFlag = false">{{ $t('common.cancel') }}</el-button>
    </div>
  </el-dialog>
</template>

<script>


import { getVehicleDispatch, addVehicleDispatch, updateVehicleDispatch } from "@/api/mes/md/vehicleDispatch";
import VehicleSelect from "@/views/mes/md/vehicle/components/singleSelect.vue";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";

export default {
  name: "DispatchBack",
  dicts: ["sys_yes_no", "mes_item_product"],
  components: { VehicleSelect },
  data() {
    return {
      showFlag: false,
      dispatchId: null,
      optType:null,
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        backDate: [
          { required: true, message: this.$t('返回时间不能为空'), trigger: "blur" }
        ],
      },
      title:this.$t('确认派送')
    };
  },
  created() {

  },
  methods: {
    // 取消按钮
    cancel() {
      this.showFlag = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        dispatchId: null,
        dispatchCode: null,
        dispatchTitle: null,
        vehicleId: null,
        dispatchBy: null,
        driverBy: null,        dispatchDate: null,
        backDate: null,        travelMileage: null,
        startMileage: null,        endMileage: null,
        oilConsumption: null,        remark: null
      };
      this.resetForm("form");
    },
    mileageCount(){

    },
    onVehicleSelect(row) {
      if (row != undefined && row != null) {
        this.form.itemId = row.itemId;
        this.form.itemName = row.itemName;
        this.form.unit = row.unitOfMeasure;
      }
    },
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          updateVehicleDispatch(this.form).then(response => {
            this.$modal.msgSuccess(this.$t('common.edit_success'));
            this.showFlag=false;
            this.$emit("reload");
          });
        }
      });
    },
    mileageCalculate(){
      if(this.form.startMileage!=null&&this.form.endMileage!=null){
        this.form.travelMileage = this.form.endMileage-this.form.startMileage;
      }
    }
  },
};
</script>
