<template>
  <ele-modal
    custom-class="ele-dialog-form long-dialog-form"
    :centered="true"
    :visible.sync="addOrEditDialogFlag"
    :title="title"
    :append-to-body="false"
    :close-on-click-modal="false"
    width="50%"
    :before-close="cancel"
  >
    <el-form ref="form" :rules="rules" :model="form" class="el-form-box" label-width="120px">
      <headerTitle title="基本信息"></headerTitle>
      <el-row >
        <el-col :span="12">
          <el-row>
            <el-col :span="20">
              <el-form-item
                label="姓名"
                prop="driverName"
                style="margin-bottom: 22px">
                <el-input v-model="form.driverName" clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="4" style="display: flex; justify-content: flex-end;">
              <el-button type="primary" @click="handlePerson">选择</el-button>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="12">
          <el-form-item
            label="性别"
            prop="sex"
            style="margin-bottom: 22px">
            <el-select v-model="form.sex" clearable style="width: 100%">
              <el-option label="男" :value="1"></el-option>
              <el-option label="女" :value="2"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row >
        <el-col :span="12">
          <el-form-item
            label="手机号"
            prop="phone"
            style="margin-bottom: 22px">
            <el-input v-model="form.phone" clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item
            label="年龄"
            prop="age"
            style="margin-bottom: 22px">
            <el-input v-model="form.age" clearable></el-input>
          </el-form-item>
        </el-col>

      </el-row>
      <el-row >
        <el-col :span="12">
          <el-form-item
            label="籍贯"
            prop="JG"
            style="margin-bottom: 22px">
            <regions-select style="width: 100%" v-model="city" @getCheckedNodes="getCheckedNodes" placeholder="请选择省市区" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item
            label="邮箱"
            prop="email"
            style="margin-bottom: 22px">
            <el-input v-model="form.email" clearable></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row >
        <el-col :span="12">
          <el-form-item
            label="身份证号"
            prop="personId"
            style="margin-bottom: 22px">
            <el-input v-model="form.personId" clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item
            label="驾驶证类型"
            prop="drivingLicenseType"
            style="margin-bottom: 22px">
            <dict-selection dict-name="驾照类型" v-model="form.drivingLicenseType"></dict-selection>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row >

        <el-col :span="12">
          <el-row >
            <el-col :span="12">
              <el-form-item
                label="驾驶证附件"
                prop="drivingLicenseFile"
                style="margin-bottom: 22px">
                <fileUpload
                  v-model="form.drivingLicenseFile"
                  module="main"
                  :limit="10"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item
                label="身份证附件"
                prop="personFile"
                style="margin-bottom: 22px">
                <fileUpload
                  v-model="form.personFile"
                  module="main"
                  :limit="10"
                />
              </el-form-item>
            </el-col>
          </el-row>

        </el-col>
        <el-col :span="12">
          <el-form-item
            label="驾龄"
            prop="driverAge"
            style="margin-bottom: 22px">
            <el-input v-model="form.driverAge" clearable></el-input>
          </el-form-item>
        </el-col>
      </el-row>

    </el-form>

    <div slot="footer">
      <el-button type="primary" @click="handleSave(0)">保存</el-button>
<!--      <el-button type="primary" @click="handleSave(1)">提交</el-button>-->
      <el-button @click="cancel">返回</el-button>
    </div>
    <!--    选择人员 -->
    <select-person-dialog :select-person-dialog.sync="selectPersonDialogFlag" v-if="selectPersonDialogFlag"
                          ref="selectPersonDialogRef" @changeParent="getPersonInfo"></select-person-dialog>
  </ele-modal>
</template>
<script>
import selectPersonDialog from "./selectPersonDialog.vue";
import {mapGetters} from "vuex";
import fileUpload from "@/components/upload/fileUpload.vue";
import {
  feeApplySaveAPI,
  feeApplyUpdateAPI,
  finFeeApplySubmit,
  getFeeApplyInfoAPI
} from "@/api/financialManage/fee-manage/fee-application";
import RegionsSelect from "@/components/RegionsSelect/index.vue";
import {emailReg, phoneReg} from "ele-admin";
import {driverBookSaveAPI, driverInfoAPI, driverUpdateAPI} from "@/api/transportManager/driverBook";


export default {
  name: "add-or-edit-dialog",
  components: {
    RegionsSelect,
    fileUpload,
    selectPersonDialog
  },
  props: {
    addOrEditDialogFlag: {
      type: Boolean,
      default: false
    },
  },
  computed: {
    ...mapGetters(['user'])
  },
  data() {
    return {
      dialogType: '',
      selectPersonDialogFlag: false,
      title: '',
      form: {
        id: '',
        driverName: '',
        driverId: '',
        sex: '',
        addressId: '',
        addressName: '',
        phone: '',
        driverAge: '',
        email: '',
        age: '',
        personId: '',
        personFile: '',
        drivingLicenseType: '',
        drivingLicenseFile: null,

      },
      city: null,
      feeTypeList: [],
      accountingSubjectList: [],
      deptList: [],
      deptTreeList: [],
      rules: {
        name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
        sex: [{ required: true, message: '请选择性别', trigger: 'blur' }],
        age: [{ required: true, message: '请输入', trigger: 'blur' }],
        email: [
          { pattern: emailReg, message: '邮箱格式不正确', trigger: 'blur' }
        ],
        phone: [
          { required: true, message: '请输入手机号', trigger: 'blur' },
          { pattern: phoneReg, message: '手机号格式不正确', trigger: 'blur' }
        ],
        personId: [{ required: true, message: '请输入身份证号', trigger: 'blur' }],
        drivingLicenseType: [{ required: true, message: '请选择驾驶证类型', trigger: 'change' }],
        drivingLicenseFile: [{ required: true, message: '请上传驾驶证附件', trigger: 'change' }],
        personFile: [{ required: true, message: '请上传身份证附件', trigger: 'change' }],
      }
    }
  },
  created() {

  },
  methods: {
    //初始化
    async init(row = {}, type) {
      this.title = type == 'add' ? '新增' : '修改'
      this.dialogType = type
      if (type == 'add') {

      } else {
        await this.getInfo(row.id)
      }

    },
    //获取详情
    async getInfo(id) {
      this.form = await driverInfoAPI(id)
      this.city = this.form.addressId ? this.form.addressId.split(',') : null;
    },
    getCheckedNodes(arr=[]){
      let list = Array.from(arr);
      if(list.length==0){
        this.form.addressId = ''
        this.form.addressName = ''
      }else{
        this.form.addressId = list[0].path.join(',');
        this.form.addressName = list[0].pathLabels.join(',');
      }
    },
    handlePerson() {
      this.selectPersonDialogFlag = true
    },
    getPersonInfo(row) {
      this.form.driverName = row.name
      this.form.driverId = row.id
      this.form.phone = row.phone
      this.form.email = row.email
      this.form.age = row.age
      this.form.sex = row.sex
    },
    //
    handleSave(flag) {
      this.$refs.form.validate(async valid => {
        if (!valid) return this.$message.warning('有必填项未填，请检查')

        const API = this.dialogType == 'add' ? driverBookSaveAPI : driverUpdateAPI
        const id = await API(this.form)
        if (flag) {
          await this.handleSub(id)
        }
        this.$message.success('操作成功')
        this.done()
        this.cancel()
      })
    },
    //提交-开启流程
    async handleSub(id) {
      try {
        await finFeeApplySubmit({businessId: id})
      } catch (e) {
        this.$message.error(e.message);
      }
    },
    //刷新主列表数据
    done() {
      this.$emit('reload')
    },
    //关闭弹窗
    cancel() {
      this.$emit('update:addOrEditDialogFlag', false)
    }
  }
}
</script>
<style scoped lang="scss">

</style>
