<template>
  <!-- 车辆派送 -->
  <el-dialog :title="title" v-if="showFlag" :visible.sync="showFlag" width="700px" append-to-body>
    <el-form ref="form" :model="form" :rules="rules" label-width="80px">

      <el-row>
        <el-col :span="12">
          <el-form-item :label="$t('派车编号')" prop="dispatchCode" disabled="" v-if="form.dispatchId != null">
            <el-input v-model="form.dispatchCode" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('用车说明')" prop="dispatchTitle">
            <el-input v-model="form.dispatchTitle" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item :label="$t('车辆')" prop="vehicleId">
            <el-input
              v-model="form.vehicleName"
              readonly
             
            >
              <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 :span="12">
          <el-form-item :label="$t('驾驶人')" prop="driverBy">
            <el-input v-model="form.driverBy" />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item :label="$t('派车时间')" prop="dispatchDate">
            <el-date-picker clearable
                            v-model="form.dispatchDate"
                            type="date"
                            value-format="yyyy-MM-dd"
                           >
            </el-date-picker>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item :label="$t('派时里程')" prop="startMileage">
            <el-input v-model="form.startMileage" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="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="cancel">{{ $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: {
          dispatchId: null,
          dispatchCode: null,
          dispatchTitle: null,
          vehicleId: null,
          vehicleName: null,
          dispatchBy: null,
          driverBy: null,        dispatchDate: null,
          backDate: null,        travelMileage: null,
          startMileage: null,        endMileage: null,
          oilConsumption: null,        remark: null},
        // 表单校验
        rules: {
          vehicleId: [
            { required: true, message: this.$t('车辆不能为空'), trigger: "blur" }
          ],
          vehicleId: [
            { 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,
          vehicleName: null,
          dispatchBy: null,
          driverBy: null,        dispatchDate: null,
          backDate: null,        travelMileage: null,
          startMileage: null,        endMileage: null,
          oilConsumption: null,        remark: null
        };
        this.resetForm("form");
      },
      onVehicleSelect(row) {
        if (row != undefined && row != null) {
          this.form.vehicleId = row.vehicleId;
          this.form.vehicleName = row.vehicleName;
        }
      },
      submitForm() {
        this.$refs["form"].validate(valid => {
          if (valid) {
            if (this.form.dispatchId != null) {
              updateVehicleDispatch(this.form).then(response => {
                this.$modal.msgSuccess(this.$t('common.edit_success'));
                this.showFlag=false;
                this.$emit("reload");
              });
            } else {
              addVehicleDispatch(this.form).then(response => {
                this.$modal.msgSuccess(this.$t('common.add_success'));
                this.showFlag=false;
                this.$emit("reload");
              });
            }
          }
        });
      },
    },
  };
</script>
