<template>
  <ele-modal
    custom-class="ele-dialog-form long-dialog-form"
    :centered="true"
    :visible.sync="detailDialogFlag"
    :title="title"
    :close-on-click-modal="false"
    width="50%"
    :before-close="cancel"
  >
    <el-form ref="form" :model="form" label-width="120px">

      <headerTitle title="基本信息"></headerTitle>
      <el-row>
        <el-col :span="12">
          <el-form-item
            label="姓名："
            prop="driverName">
            <el-input v-model="form.driverName" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item
            label="性别："
            prop="sex">
            <el-select v-model="form.sex" disabled 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"
            >
            <el-input v-model="form.phone" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item
            label="年龄："
            prop="age">
            <el-input v-model="form.age" disabled></el-input>
          </el-form-item>
        </el-col>

      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item
            label="籍贯："
            prop="addressName">
            <el-input v-model="form.addressName" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item
            label="邮箱："
            prop="email"
            >
            <el-input v-model="form.email" disabled></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item
            label="身份证号："
            prop="personId"
            >
            <el-input v-model="form.personId" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item
            label="驾龄："
            prop="driverAge"
          >
            <el-input v-model="form.driverAge" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item
            label="身份证附件："
            prop="personFile"
          >
            <el-link
              v-if="form.personFile.length"
              v-for="item in form.personFile"
              type="primary"
              :underline="false"
              @click="downloadFile(item)"
            >
              {{ item.name }}
            </el-link>
          </el-form-item>
        </el-col>
        <el-col :span="12">

          <el-form-item
            label="驾驶证类型："
            prop="drivingLicenseType"
            >
            <dict-selection dict-name="驾照类型" disabled v-model="form.drivingLicenseType"></dict-selection>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>

        <el-col :span="12">
          <el-form-item
            label="驾驶证附件："
            prop="drivingLicenseFile"
          >
            <el-link
              v-if="form.drivingLicenseFile.length"
              v-for="item in form.drivingLicenseFile"
              type="primary"
              :underline="false"
              @click="downloadFile(item)"
            >
              {{ item.name }}
            </el-link>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>


      </el-row>

    </el-form>
    <div slot="footer" class="footer">
      <el-button @click="cancel">返回</el-button>
    </div>
  </ele-modal>
</template>

<script>
import {getFile} from '@/api/system/file';
import dictMixins from '@/mixins/dictMixins';
import bpmDetail from '@/views/bpm/processInstance/detail.vue';
import fileUpload from "@/components/upload/fileUpload.vue";
import {getFeeApplyInfoAPI} from "@/api/financialManage/fee-manage/fee-application";
import feeRelatedInfoTable from "@/views/financialManage/components/feeRelatedInfoTable.vue";
import RegionsSelect from "@/components/RegionsSelect/index.vue";
import {driverInfoAPI} from "@/api/transportManager/driverBook";

export default {
  mixins: [dictMixins],
  props: ['detailDialogFlag'],
  components: {
    RegionsSelect,
    feeRelatedInfoTable,
    fileUpload,
    bpmDetail
  },
  data() {
    return {
      title: '详情',
      dialogType: '',
      form: {},
    };
  },
  methods: {
    //初始化
    async init(row = {}, type) {
      this.title = '详情'
      this.dialogType = type
      await this.getInfo(row.id)
    },
    //获取详情
    async getInfo(id) {
      this.form = await driverInfoAPI(id)
    },
    downloadFile(file) {
      getFile({objectName: file.storePath}, file.name);
    },
    cancel() {
      this.$emit('update:detailDialogFlag', false)
    }
  }
};
</script>

<style scoped lang="scss">
.ele-dialog-form {
  .el-form-item {
    margin-bottom: 10px;
  }
}

.headbox {
  display: flex;
  justify-content: flex-start;
  align-items: center;

  .amount {
    font-size: 14px;
    font-weight: bold;
    margin-right: 20px;
  }
}
</style>
