<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="派车编号" prop="dispatchCode" v-if="form.dispatchId != null">
              <el-input v-model="form.dispatchCode" disabled placeholder="请输入派车编号" />
            </el-form-item>
        </el-col>
        <el-col :md="8" :xs="12">
          <el-form-item label="名称" prop="dispatchTitle">
            <el-input v-model="form.dispatchTitle" disabled placeholder="请输入名称" />
          </el-form-item>
        </el-col>
        <el-col :md="8" :xs="12">
          <el-form-item label="车辆" prop="vehicleId">
            <el-input
              v-model="form.vehicleName"
              disabled
              placeholder="请选择车辆"
            >
              <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="派车人" prop="dispatchBy">
            <el-input v-model="form.dispatchBy" disabled placeholder="请输入派车人" />
          </el-form-item>
        </el-col>
        <el-col :md="8" :xs="12">
          <el-form-item label="驾驶人" prop="driverBy">
            <el-input v-model="form.driverBy" disabled placeholder="请输入驾驶人" />
          </el-form-item>
        </el-col>
        <el-col :md="8" :xs="12">
          <el-form-item label="派车时间" required prop="dispatchDate">
            <el-date-picker clearable readonly
                            v-model="form.dispatchDate"
                            type="date"
                            disabled
                            value-format="yyyy-MM-dd"
                            placeholder="请选择派车时间">
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :md="8" :xs="12">
          <el-form-item label="派时总里程" prop="startMileage">
            <el-input v-model="form.startMileage" disabled placeholder="请输入派时里程"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :md="8" :xs="12">
          <el-form-item label="返回时间" prop="backDate">
            <el-date-picker clearable
                            v-model="form.backDate"
                            type="date"
                            value-format="yyyy-MM-dd"
                            placeholder="请选择返回时间">
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :md="8" :xs="12">
          <el-form-item label="还车总里程" prop="endMileage">
            <el-input v-model="form.endMileage" placeholder="请输入还车里程"  @change="mileageCalculate"/>
          </el-form-item>
        </el-col>
        <el-col :md="8" :xs="12">
          <el-form-item label="本次里程数" prop="travelMileage">
            <el-input v-model="form.travelMileage" placeholder="请输入本次里程数"/>
          </el-form-item>
        </el-col>
        <el-col :md="8" :xs="12">
          <el-form-item label="耗油量" prop="oilConsumption">
            <el-input v-model="form.oilConsumption" placeholder="请输入耗油量" />
          </el-form-item>
        </el-col>
        <el-col :md="8" :xs="12">
          <el-form-item label="备注" prop="remark">
            <el-input v-model="form.remark" placeholder="请输入备注" />
          </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'">确 定</el-button>
      <el-button  @click="showFlag = false">取 消</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: "返回时间不能为空", trigger: "blur" }
        ],
      },
      title:'确认派送'
    };
  },
  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.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>
