<template>
  <div class="app-warp">
    <div class="detail-structure">
      <el-page-header :content="parentObj.TYPE === 'add' ? '新增' : parentObj.TYPE === 'edit' ? '修改' : '查看'" @back="goBack"/>
      <div class="detail-container">
        <el-form ref="form" :model="form" :rules="rules" :disabled="parentObj.TYPE === 'view'" label-width="150px">
          <el-row>
            <el-col :span="12">
              <el-form-item label="姓名" prop="NAME">
                <el-input v-model="form.NAME" placeholder="请输入姓名"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="证件类型" prop="CERTIFICATETYPE">
                <el-select v-model="form.CERTIFICATETYPE" style="width: 100%;">
                  <el-option v-for="item in documentTypeList" :key="item.DICTIONARIES_ID" :value="item.DICTIONARIES_ID" :label="item.NAME"/>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="证件编号" prop="USER_ID_CARD">
                <el-input v-model="form.USER_ID_CARD" placeholder="请输入证件编号"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="手机号" prop="PHONE">
                <el-input v-model="form.PHONE" placeholder="请输入手机号"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="文化水平" prop="CULTURAL_LEVEL">
                <el-select v-model="form.CULTURAL_LEVEL" style="width: 100%;">
                  <el-option v-for="item in culturalLevelList" :key="item.DICTIONARIES_ID" :value="item.DICTIONARIES_ID" :label="item.NAME"/>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="证件照" prop="file1">
                <el-upload
                  :on-preview="handlePreviewIdPhoto1"
                  :on-remove="handleRemoveIdPhoto1"
                  :on-change="handleChangeIdPhoto1"
                  :auto-upload="false"
                  :file-list="form.file1"
                  :limit="1"
                  :class="{hide:hideUpload1}"
                  action="#"
                  accept=".jpg,.jpeg,.png"
                  list-type="picture-card">
                  <i class="el-icon-plus"/>
                </el-upload>
                <el-dialog :visible.sync="uploadVisible1" append-to-body>
                  <img :src="CAPTURE1" width="100%" alt="">
                </el-dialog>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="人脸识别照片" prop="file2">
                <el-upload
                  :on-preview="handlePreviewIdPhoto2"
                  :on-remove="handleRemoveIdPhoto2"
                  :on-change="handleChangeIdPhoto2"
                  :auto-upload="false"
                  :file-list="form.file2"
                  :limit="1"
                  :class="{hide:hideUpload2}"
                  action="#"
                  accept=".jpg,.jpeg,.png"
                  list-type="picture-card">
                  <i class="el-icon-plus"/>
                </el-upload>
                <el-dialog :visible.sync="uploadVisible2" append-to-body>
                  <img :src="CAPTURE2" width="100%" alt="">
                </el-dialog>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div class="detail_foot">
          <el-button v-if="parentObj.TYPE !== 'view'" type="primary" @click="confirm">保存</el-button>
          <el-button icon="el-icon-arrow-left" @click="goBack">取消</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { requestFN } from '@/utils/request'
import { upload } from '@/utils/upload'
export default {
  data() {
    return {
      config: config,
      form: {
        NAME: '',
        CERTIFICATETYPE: '',
        USER_ID_CARD: '',
        CULTURAL_LEVEL: '',
        PHONE: '',
        file1: [],
        file2: []
      },
      rules: {
        NAME: [
          { required: true, message: '请输入姓名', trigger: 'blur' }
        ],
        CERTIFICATETYPE: [
          { required: true, message: '请输入证件类型', trigger: 'blur' }
        ],
        USER_ID_CARD: [
          { required: true, message: '请输入证件编号', trigger: 'blur' },
          {
            pattern: /^[1-9]\d{5}(?:18|19|20)\d{2}(?:0\d|10|11|12)(?:0[1-9]|[1-2]\d|30|31)\d{3}[\dXx]$/,
            message: '请输入正确的证件编号',
            trigger: 'blur'
          }
        ],
        CULTURAL_LEVEL: [
          { required: true, message: '请选择文化水平', trigger: 'blur' }
        ],
        PHONE: [
          { required: true, message: '请输入手机号', trigger: 'blur' },
          {
            pattern: /^(?:(?:\+|00)86)?1(?:(?:3[\d])|(?:4[5-7|9])|(?:5[0-3|5-9])|(?:6[5-7])|(?:7[0-8])|(?:8[\d])|(?:9[1|8|9]))\d{8}$/,
            message: '请输入正确的手机号',
            trigger: 'blur'
          }
        ],
        file1: [
          { required: true, message: '请上传证件照', trigger: 'blur' }
        ]
      },
      documentTypeList: [],
      culturalLevelList: [],
      hideUpload1: false,
      uploadVisible1: false,
      CAPTURE1: '',
      hideUpload2: false,
      uploadVisible2: false,
      CAPTURE2: ''
    }
  },
  inject: ['setActiveName', 'parentObj'],
  created() {
    if (this.parentObj.USER_ID) {
      this.getData()
    }
    this.getDict('culturalLevelList', 'd7d80f08d73a4accbccf4fd3d8d1d867')
    this.getDict('documentTypeList', '69ec4bfae8ac41d993e764f24ec41011')
  },
  methods: {
    getData() {
      requestFN('/student/getInfo', {
        USER_ID: this.parentObj.USER_ID
      }).then((data) => {
        if (data.info.ID_PHOTO) {
          data.info.file1 = [{
            url: config.fileUrl + data.info.ID_PHOTO
          }]
          this.hideUpload1 = true
        } else {
          data.info.file1 = []
        }
        if (data.info.PORTRAIT) {
          data.info.file2 = [{
            url: config.fileUrl + data.info.PORTRAIT
          }]
          this.hideUpload2 = true
        } else {
          data.info.file2 = []
        }
        this.form = data.info
      })
    },
    getDict(list, DICTIONARIES_ID) {
      requestFN('/dictionaries/getLevels', {
        DICTIONARIES_ID
      }).then((data) => {
        this[list] = data.list
      })
    },
    handlePreviewIdPhoto1(file) {
      this.CAPTURE1 = file.url
      this.uploadVisible1 = true
    },
    handleRemoveIdPhoto1(file, fileList) {
      this.form.file1 = fileList
      this.hideUpload1 = fileList.length >= 1
    },
    handleChangeIdPhoto1(file, fileList) {
      const types = ['image/jpeg', 'image/jpg', 'image/png']
      const isImage = types.includes(file.raw.type)
      if (!isImage) {
        this.$message.error('上传图片只能是 JPG、JPEG、PNG 格式!')
        fileList.pop()
      }
      this.form.file1 = fileList
      this.hideUpload1 = fileList.length >= 1
    },
    handlePreviewIdPhoto2(file) {
      this.CAPTURE2 = file.url
      this.uploadVisible2 = true
    },
    handleRemoveIdPhoto2(file, fileList) {
      this.form.file2 = fileList
      this.hideUpload2 = fileList.length >= 1
    },
    handleChangeIdPhoto2(file, fileList) {
      const types = ['image/jpeg', 'image/jpg', 'image/png']
      const isImage = types.includes(file.raw.type)
      if (!isImage) {
        this.$message.error('上传图片只能是 JPG、JPEG、PNG 格式!')
        fileList.pop()
      }
      this.form.file2 = fileList
      this.hideUpload2 = fileList.length >= 1
    },
    confirm() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          const formData = new FormData()
          Object.keys(this.form).map(key => {
            formData.append(key, this.form[key])
          })
          if (this.form.file1[0].raw) {
            formData.append('ID_PHOTO', this.form.file1[0].raw)
          }
          if (this.form.file2.length === 0) {
            formData.append('PORTRAIT', '')
          } else {
            if (this.form.file2[0].raw) {
              formData.append('PORTRAIT', this.form.file2[0].raw)
            }
          }
          upload('/student/serialize', formData).then((res) => {
            if (res.errorMessage) {
              this.$message({
                message: res.errorMessage,
                type: 'warning'
              })
            } else {
              this.$message({
                message: '操作成功',
                type: 'success'
              })
              this.goBack()
            }
          })
        } else {
          this.$message.error('请检查输入项')
        }
      })
    },
    goBack() {
      this.setActiveName('List')
    }
  }
}
</script>

<style scoped>

</style>
