<template>
  <div>
    <el-form ref="authUserForm" :model="authUserForm" label-width="150px">
      <el-form-item
        :label="$t('realName.name')"
        prop="name"
        :rules="[
          { required: true, message: $t('realName.nameRules')}
        ]"
      >
        <el-input v-model="authUserForm.name" type="text" :placeholder="$t('realName.nameNotice')" />
      </el-form-item>
      <el-form-item
        :label="$t('realName.cardType')"
        prop="cardType"
        :rules="[
          { required: true, message: $t('realName.cardTypeRules')}
        ]"
      >
        <dict-selector v-model="authUserForm.cardType" :type="DICT_TYPE.CERTIFICATE_TYPE" />
      </el-form-item>
      <el-form-item
        :label="$t('realName.cardNumber')"
        prop="cardNumber"
        :rules="[
          { required: true, message: $t('realName.cardNumberRules')}
        ]"
      >
        <el-input v-model="authUserForm.cardNumber" type="text" :placeholder="$t('realName.cardNumberNotice')" />
      </el-form-item>
      <el-form-item
        :label="$t('realName.img1')"
        prop="img1"
        :rules="[
          { required: true, message: $t('realName.imgRules1')}
        ]"
      >
        <el-col v-if="authUserForm.img1" :span="18">
          <el-image
            style="width: 100px; height: 100px"
            :src="authUserForm.img1"
            cover
          />
        </el-col>
        <el-upload action="#" :http-request="requestUpload" :show-file-list="false" :before-upload="beforeUploadimg1">
          <el-button size="small">
            {{ $t('realName.upload') }}
            <i class="el-icon-upload el-icon--right" />
          </el-button>
        </el-upload>
      </el-form-item>
      <el-form-item
        :label="$t('realName.img2')"
        prop="img2"
        :rules="[
          { required: true, message: $t('realName.imgRules2')}
        ]"
      >
        <el-col v-if="authUserForm.img2" :span="18">
          <el-image
            style="width: 100px; height: 100px"
            :src="authUserForm.img2"
            cover
          />
        </el-col>
        <el-upload action="#" :http-request="requestUpload" :show-file-list="false" :before-upload="beforeUploadimg2">
          <el-button size="small">
            {{ $t('realName.upload') }}
            <i class="el-icon-upload el-icon--right" />
          </el-button>
        </el-upload>
      </el-form-item>
    </el-form>
    <div>
      <el-button type="primary" @click="authUserSubmitForm">{{ $t('common.save') }}</el-button>
      <el-button @click="$router.go(-1)">{{ $t('common.back') }}</el-button>
    </div>
  </div>
</template>

<script>
import { authIdCard, uploadFile, getIdCard } from '@/api/user'
import DictSelector from '@/components/DictSelector'
export default {
  name: 'IdCard',
  components: {
    DictSelector
  },
  data() {
    return {
      authUserForm: {},
      cardTypeData: []
    }
  },
  created() {
    getIdCard().then(r => {
      if (r.data) {
        this.authUserForm = r.data
      }
    })
  },
  methods: {
    // 覆盖默认的上传行为
    requestUpload() {
    },
    // 上传预处理
    beforeUploadimg1(file) {
      if (file.type.indexOf('image/') === -1) {
        this.$message.error(this.$t('setting.imgType'))
      } else {
        // 上传
        const formData = new FormData()
        formData.append('file', file)
        formData.append('path', this.uuid())
        uploadFile(formData).then(response => {
          this.$set(this.authUserForm, 'img1', response.data)
          // this.form.img = response.data;
        })
      }
    },
    beforeUploadimg2(file) {
      if (file.type.indexOf('image/') === -1) {
        this.$message.error(this.$t('setting.imgType'))
      } else {
        // 上传
        const formData = new FormData()
        formData.append('file', file)
        formData.append('path', this.uuid())
        uploadFile(formData).then(response => {
          this.$set(this.authUserForm, 'img2', response.data)
          // this.form.img = response.data;
        })
      }
    },
    authUserSubmitForm() {
      this.$refs.authUserForm.validate((valid) => {
        if (valid) {
          authIdCard(this.authUserForm).then(() => {
            this.$message({
              message: this.$t('common.success'),
              type: 'success'
            })
            this.$router.go(-1)
          })
        }
      })
    },
    uuid() {
      var s = []
      var hexDigits = '0123456789abcdef'
      for (var i = 0; i < 36; i++) {
        s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1)
      }
      s[14] = '4' // bits 12-15 of the time_hi_and_version field to 0010
      s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1) // bits 6-7 of the clock_seq_hi_and_reserved to 01
      s[8] = s[13] = s[18] = s[23] = '-'

      var uuid = s.join('')
      return uuid
    }
  }
}
</script>

<style>

</style>
