<template>
  <div>
    <vxe-modal
      :z-index="zIndex"
      :value="isShow"
      show-footer
      title="车辆证照管理"
      show-confirm-button
      :width="defaultModalSize.width"
      :height="defaultModalSize.height"
      esc-closable
      transfer
      show-zoom
      resize
      :fullscreen="$store.getters.device === 'mobile'"
      @input="e => $emit('update:isShow',e)"
    >
      <el-form ref="elForm" :model="form" :rules="rules" label-position="top" label-width="100">
        <el-form-item label="车辆" prop="vehicle_id">
          <el-select v-model="form.vehicle_id" clearable style="width: 100%;">
            <el-option v-for="item in vehicles" :key="item.id" :label="item.name" :value="item.id">
              <span style="float: left">{{ item.name }}</span>
              <span style="float: right; color: #8492a6; font-size: 13px">{{ item.driver }}</span>
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="证书名称" prop="name">
          <el-input v-model="form.name" />
        </el-form-item>
        <el-form-item label="发放日期" prop="grant_at">
          <el-date-picker v-model="form.grant_at" value-format="yyyy-MM-dd" style="width: 100%;" />
        </el-form-item>
        <el-form-item label="到期日期" prop="expire_at">
          <el-date-picker v-model="form.expire_at" value-format="yyyy-MM-dd" style="width: 100%;" />
        </el-form-item>
        <el-form-item label="续签日期" prop="renewed_at">
          <el-date-picker v-model="form.renewed_at" value-format="yyyy-MM-dd" style="width: 100%;" />
        </el-form-item>
        <el-form-item label="核发机关" prop="grant_by">
          <el-input v-model="form.grant_by" />
        </el-form-item>
        <el-form-item label="证书" prop="renewed_id" required>
          <el-upload
            :action="action"
            :headers="{
              Authorization: `Bearer ${getToken()}`
            }"
            :file-list="fileList"
            :before-upload="beforeUploadUpload"
            list-type="picture"
            :limit="1"
            :on-success="uploadSuccess"
            :on-remove="uploadRemove"
          >
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">文件大小不超过20Mb</div>
          </el-upload>
        </el-form-item>
        <el-form-item label="证书编号" prop="serial">
          <el-input v-model="form.serial" />
        </el-form-item>
      </el-form>

      <template #footer>
        <el-button type="primary" :loading="loading" @click="submit">确认</el-button>
      </template>
    </vxe-modal>
  </div>
</template>

<script>
import { getToken } from '@/utils/auth'
import { save } from '@/api/vehicleCertificate'
import {defaultModalSize} from "@/settings";
import { PopupManager } from "element-ui/lib/utils/popup";

export default {
  props: {
    isShow: {
      type: Boolean,
      default: false,
      required: true
    },
    vehicles: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      fileList: [],
      action: process.env.VUE_APP_UPLOAD_API,
      defaultModalSize,
      zIndex: PopupManager.nextZIndex(),

      loading: false,
      form: {
        vehicle_id: '',
        name: '',
        grant_at: '',
        expire_at: '',
        renewed_at: '',
        renewed_id: '',
        grant_by: '',
        serial: ''
      },
      rules: {}
    }
  },
  computed: {},
  methods: {
    getToken,
    uploadRemove() {
      this.form.renewed_id = ''
    },
    uploadSuccess(response, file, fileList) {
      if (response.code) {
        fileList.splice(fileList.indexOf(file), 1)
        this.$message.warning(response.msg)
      }
      this.fileList = fileList
      this.form.renewed_id = this.fileList[0]?.response?.data?.id
    },
    beforeUploadUpload(file) {
      const isLt20M = file.size / 1024 / 1024 < 20

      if (!isLt20M) {
        this.$message.error('上传大小不能超过 20MB!')
      }
      return isLt20M
    },

    submit() {
      this.$refs['elForm'].validate(async valid => {
        if (valid) {
          this.loading = true
          try {
            await save(this.form)
            this.$message.success('新增成功')
            this.$emit('refresh')
            this.$emit('update:isShow', false)
            this.loading = false
            this.$refs['elForm'].resetFields()
          } catch (err) {
            this.loading = false
          }
        }
      })
    }
  },
  watch: {
    isShow(newVal) {
      if(newVal) {
        this.zIndex = PopupManager.nextZIndex()
      }
    }
  }
}
</script>

<style scoped lang="scss">
</style>
