<template>
<div class="certif-box">
  <el-card class="box-card"> 
    <div slot="header" class="clearfix">
      <span class="title">美国索菲亚大学学位证书三级认证申请</span>
    </div>
    <div class="form-box">
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="180px" class="demo-ruleForm">
        <el-form-item label="1.您的姓名" prop="name">
          <el-input v-model="ruleForm.name"></el-input>
        </el-form-item>
        <el-form-item label="2.您的班级" prop="class">
          <el-input v-model="ruleForm.class"></el-input>
        </el-form-item> 
        <el-form-item label="3.请输入您的身份证号" prop="idcode">
          <el-input v-model="ruleForm.idcode"></el-input> 
        </el-form-item>
        <el-form-item label="4.请输入您的手机号" prop="phone">
          <el-input v-model="ruleForm.phone"></el-input> 
        </el-form-item>
        <el-form-item label="5.请上传您的学位证书" prop="fileList1">
          <el-upload
            action="https://jsonplaceholder.typicode.com/posts/"
            list-type="picture-card"
            :on-change="(file,fileList)=>{return changeFile(file,fileList,'fileList1')}"
            :on-remove="(file,fileList)=>{return changeFile(file,fileList,'fileList1')}"
            :file-list="ruleForm.fileList1"
            accept='.jpg,.jpeg,.png,.bmp'
            :on-preview="handlePictureCardPreview">
            <i class="el-icon-plus"></i>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="">
          </el-dialog>
        </el-form-item>
        <el-form-item label="6.请上传您的护照" prop="fileList2">
          <el-upload
            action="https://jsonplaceholder.typicode.com/posts/"
            list-type="picture-card"
            :on-change="(file,fileList)=>{return changeFile(file,fileList,'fileList2')}"
            :on-remove="(file,fileList)=>{return changeFile(file,fileList,'fileList2')}"
            :file-list="ruleForm.fileList2"
            accept='.jpg,.jpeg,.png,.bmp'
            :on-preview="handlePictureCardPreview">
            <i class="el-icon-plus"></i>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="">
          </el-dialog>
        </el-form-item>
        <el-form-item label="7.请上传您的缴费凭证" prop="fileList3">
          <el-upload
            action="https://jsonplaceholder.typicode.com/posts/"
            list-type="picture-card"
            :on-change="(file,fileList)=>{return changeFile(file,fileList,'fileList3')}"
            :on-remove="(file,fileList)=>{return changeFile(file,fileList,'fileList3')}"
            :file-list="ruleForm.fileList3"
            accept='.jpg,.jpeg,.png,.bmp'
            :on-preview="handlePictureCardPreview">
            <i class="el-icon-plus"></i>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="">
          </el-dialog>
        </el-form-item>
        <!--  prop="fileList4" -->
        <el-form-item label="8.请上传您的申请表">
          <el-upload
            class="upload-demo"
            action="https://jsonplaceholder.typicode.com/posts/"
            :on-change="(file,fileList)=>{return changeFile(file,fileList,'fileList4')}"
            :on-remove="(file,fileList)=>{return changeFile(file,fileList,'fileList4')}"
            multiple
            :limit="3"
            accept='.word,.pdf'
            :file-list="ruleForm.fileList4">
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">只能上传word/pdf文件</div>
          </el-upload>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
          <el-button @click="resetForm('ruleForm')">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </el-card>
</div>

</template>

<script>
import cAction from '@actions'

export default {
  data () {
    return {
      dialogImageUrl: '',
      dialogVisible: false,
      ruleForm: {
        name: '',
        class: '',
        idcode: '',
        phone: '',
        delivery: false,
        fileList1: [],
        fileList2: [],
        fileList3: [],
        fileList4: []
      },
      rules: {
        name: [
          { required: true, message: '请输入活动名称', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        class: [
          { required: true, message: '请输入您的班级', trigger: 'blur' }
        ],
        idcode: [
          { required: true, message: '请输入您的身份证号码', trigger: 'blur' }
        ],
        phone: [
          { required: true, message: '请输入您的手机号码', trigger: 'blur' }
        ],
        fileList1: [
          { type: 'array', required: true, message: '请上传您的学位证书' }
        ],
        fileList2: [
          { type: 'array', required: true, message: '请上传您的护照' }
        ],
        fileList3: [
          { type: 'array', required: true, message: '请上传您的缴费凭证' }
        ],
        fileList4: [
          { type: 'array', required: true, message: '请上传您的申请表' }
        ]
      }
    }
  },
  methods: {
    submitForm (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          cAction.chapterAction.getCourseHomework(this.sid, this.cid).then(data => {
          }).catch(e => { this.filesArr.pop(); this.$message.error(e.message) }).finally(() => {
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    changeFile (file, fileList, name) {
      this.ruleForm[name] = fileList
      if (fileList) {
        // this.$refs['ruleForm'].validate()
      }
      console.log(JSON.stringify(this.ruleForm[name]))
    },
    handlePictureCardPreview (file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    }
  }
}
</script>

<style lang="scss" scoped>
.certif-box{
  margin: 0.3rem;
  overflow: hidden;
  position: relative;
  .box-card{
    .title{
      font-size: 24px;
      display: block;
      text-align: center;
    }
    .form-box{
      width: 600px; 
      margin: 0 auto;
    }
  }
}
</style>