<template>
  <ele-modal
    custom-class="ele-dialog-form long-dialog-form"
    :centered="true"
    :visible.sync="transferDialogFlag"
    title="转派"
    :append-to-body="false"
    :close-on-click-modal="false"
    width="60%"
    :before-close="cancel">
   >
    <el-form ref="form" :rules="rules" :model="form" label-width="80px">
      <headerTitle title="基础信息"></headerTitle>
      <el-row>
        <el-col :span="12">
          <el-form-item label="车牌号" prop="trakNumber">
            <el-input v-model="form.trakNumber" @click.native="handleCar()"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="司机" prop="driverName">
            <el-input v-model="form.driverName" @click.native="handleDriver()"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

    </el-form>

    <div slot="footer">
      <el-button type="primary" @click="handleSave">保存</el-button>
      <el-button @click="cancel">返回</el-button>
    </div>
    <!-- 选择司机   -->
    <select-driver-dialog ref="selectDriverDialogRef" :selectDriverDialogFlag.sync="selectDriverDialogFlag"
                          v-if="selectDriverDialogFlag" @changeParent="getDriverInfo"></select-driver-dialog>
    <select-car-dialog ref="selectCarDialogRef" :selectCarDialogFlag.sync="selectCarDialogFlag"
                       v-if="selectCarDialogFlag" @changeParent="getCarInfo"></select-car-dialog>
  </ele-modal>
</template>


<script>


import {logistictraklistnoteUpdateAPI} from "@/api/transportManager/shipManage/taskWork";
import {deepClone} from "@/utils";
import {mapGetters} from 'vuex';
import selectCarDialog from "@/views/transportManager/shipManage/dispatchManage/components/selectCarDialog.vue";
import selectDriverDialog from "@/views/transportManager/shipManage/dispatchManage/components/selectDriverDialog.vue";

export default {
  name: "transferDialog",
  components: {
    selectCarDialog,
    selectDriverDialog,
  },

  props: {
    transferDialogFlag: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      editIndex: undefined,//当前修改数据的下标
      selectCarDialogFlag: false,
      selectDriverDialogFlag: false,
      form: {
        id: '',
        trakId: '',
        trakNumber: '',
        driverId: '',
        driverName: "",
        phone: "",
      },
      dialogType: '',
      rules: {
        trakNumber: {required: true, message: '请选择', trigger: 'change'},
        driverName: {required: true, message: '请选择', trigger: 'change'}
      },
      currentRow: {}
    }
  },
  mounted() {
  },
  methods: {
    //初始化
    async init(row = {}, type) {
      this.currentRow = row
      this.form.id = this.currentRow.id
    },
    //选择司机
    handleDriver(row, index) {
      this.selectDriverDialogFlag = true
    },
    //选择司机回调
    getDriverInfo(row) {
      this.form.driverId = row.driverId
      this.form.driverName = row.driverName
      this.form.phone = row.phone
    },
    //选择车辆
    handleCar(row, index) {
      this.selectCarDialogFlag = true
    },
    //选择车辆回调
    getCarInfo(row) {
      this.form.driverId = row.defaultDriverId
      this.form.driverName = row.defaultDriver
      this.form.phone = row.phone
      this.form.trakNumber = row.trakNumber
      this.form.trakId = row.id
    },
    cancel() {
      this.$emit('update:transferDialogFlag', false)
    },
    //
    handleSave() {
      this.$refs.form.validate(async valid => {
        if (!valid) return this.$message.warning('有必填项未填，请检查')
        let params = {
          ...this.currentRow,
          ...this.form
        }
        await logistictraklistnoteUpdateAPI(params)
        this.$message.success('操作成功')
        this.$emit('reload')
        this.cancel()
      })
    },
  }
}
</script>


<style scoped lang="scss">
:deep(.el-form-item) {
  margin-bottom: 0;
}
</style>
