<template>
  <div class="w1088" style="margin-top: 20px;">
    <div>
      <el-button type="primary" @click="$router.go(-1)">返回</el-button>
      <el-form ref="elForm" :model="applyInfo"  size="medium" label-width="110px">
        <el-row :gutter="15" class="p20">
          <el-col :span="20">
            <el-row style="margin-top: 10px;">
              <el-col :span="8">
                <el-form-item label="姓名" prop="nickname">
                  <el-input v-model="applyInfo.nickname" placeholder="请输入姓名" clearable style="width: 160px;"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="身份证号码" prop="cardId">
                  <el-input v-model="applyInfo.cardId" placeholder="请输入证件号码" 
                    style="width: 220px;"></el-input>
                </el-form-item>
              </el-col>
			  
			  <el-col :span="8">
			    <el-form-item label="状态" prop="cardId">
			      <el-button v-if="applyInfo.status==1" type="text">学习中。。。</el-button>
			      <el-button v-else-if="applyInfo.confirm==1" type="text">缴费中。。。</el-button>
			      <el-button v-else-if="applyInfo.education=='同等教育'" type="text">考试中。。。</el-button>
			      <el-button v-else type="text">审核中。。。</el-button>
			    </el-form-item>
			  </el-col>


          </el-row>

          <el-row>
              <el-col :span="8">
                <el-form-item label="性别" prop="gender">
                  <el-select v-model="applyInfo.gender" placeholder="选择性别" clearable style="width:190px;">
                    <el-option label="男" value="男"></el-option>
                    <el-option label="女" value="女"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>

              <el-col :span="8">
                <el-form-item label="出生日期" prop="birthday">
                  <el-date-picker v-model="applyInfo.birthday" format="yyyy-MM-dd" value-format="yyyy-MM-dd" placeholder="请输入出生日期"
                    type="date" style="width: 190px;" > </el-date-picker>
                </el-form-item>
              </el-col>

              <el-col :span="8">
                <el-form-item label="民族" prop="nation">
                  <el-input v-model="applyInfo.nation" placeholder="请输入民族"
                    ></el-input>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="8">
                <el-form-item label="政治面貌" prop="polity">
                  <el-input v-model="applyInfo.polity" placeholder="请输入政治面貌"
                    ></el-input>
                </el-form-item>
              </el-col>

              <el-col :span="8">
                <el-form-item label="手机号码" prop="phone">
                  <el-input v-model="applyInfo.phone" prefix-icon='el-icon-mobile' :maxlength="11"
                    show-word-limit>
                  </el-input>
                </el-form-item>
              </el-col>

              <el-col :span="8">
                <el-form-item label="邮箱" prop="email">
                  <el-input v-model="applyInfo.email" placeholder="请输入邮箱"></el-input>
                </el-form-item>
              </el-col>

            </el-row>


            <el-row>
              <el-col :span="8">
                <el-form-item label="文化程度" prop="education">
                  <el-select v-model="applyInfo.education" placeholder="请选择文化程度" class="input-t2">
                    <el-option
                      v-for="(item, index) in educations"
                      :label="item"
                      :value="item"
                      :key="index">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8" v-if="applyInfo.education!='同等学历'">
                <el-form-item label="毕业院校" prop="school">
                  <el-input v-model="applyInfo.school" placeholder="请输入毕业院校" clearable class="input-t2"></el-input>
                </el-form-item>
              </el-col>

              <el-col :span="8" v-if="applyInfo.education!='同等学历'">
                <el-form-item label="毕业证书号" prop="degreeId">
                  <el-input v-model="applyInfo.degreeId" placeholder="请输入证书号" clearable class="input-t2" ></el-input>
                </el-form-item>
              </el-col>

            </el-row>

            <el-row>

              <el-col :span="8">
                <el-form-item label="学习中心" prop="organ">
                  <el-select v-model="applyInfo.organ" placeholder="报考学习中心"  class="input-t2">
                     <el-option v-for="organ in ['福州奥鹏学习中心','宁德鸿锵学习中心']" :label="organ" :value="organ" :key="organ"></el-option>
                   </el-select>

                </el-form-item>
              </el-col>

              <el-col :span="8">
                <el-form-item label="报考专业" prop="courseName">
                 <el-select v-model="applyInfo.groupId" placeholder="报考专业"  class="input-t2">
                    <el-option label="建筑工程施工" :value="1"></el-option>
                    <el-option label="市场营销" :value="2"></el-option>
                    <el-option label="休闲农业生产与经营" :value="3"></el-option>
                    <el-option label="园林技术" :value="4"></el-option>
                    <el-option label="茶叶生产与加工" :value="5"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>


            </el-row>


            <el-row>
              <el-col :span="8" v-for="(name, attr) in moreInfo">
                <el-form-item :label="name" :prop="attr">
                  <el-input v-model="applyInfo[attr]" :placeholder="'请输入'+name" clearable class="input-t2">

                  </el-input>
                </el-form-item>
              </el-col>

            </el-row>

          </el-col>

          <el-col :span="4">
            <el-form-item label-width="10px" prop="headImg">
              <vue-viewer class="preview" width="180" height="240" :thumb="applyInfo.headImg" :full="applyInfo.headImg">
              </vue-viewer>
              <do-upload @onFinish="(url)=>{applyInfo.headImg=url}" placeholder="上传头像" width="180px" style="margin-top: 10px;"> </do-upload>
            </el-form-item>

          </el-col>


        </el-row>

        <div class="m-account ml20">
          <div class="account-tit" style="height:30px">
            <a :class="{'current':show===1}" style="text-decoration: none;padding-bottom: 5px" @click="show=1" class="">工作经历</a>
            <a :class="{'current':show===2}" style="text-decoration: none;padding-bottom: 5px" @click="show=2" class="">证件照片</a>
          </div>
        </div>
        <!-- 详情 -->
        <div v-if="show===2" class="lwh-ul-form p20" style="min-height: 300px;">
          <el-row :gutter="40" class="mt20">
            <el-col :span="8" class="col-normal tc">
              <vue-viewer class="preview" width="200" height="200" :thumb="applyInfo.cardImg" :full="applyInfo.cardImg">
              </vue-viewer>

              <do-upload @onFinish="(url)=>{applyInfo.cardImg=url}" placeholder="身份证头像面"> </do-upload>
            </el-col>

            <el-col :span="8" class="col-normal tc">
              <vue-viewer class="preview" width="200" height="200" :thumb="applyInfo.cardBackImg" :full="applyInfo.cardBackImg">
              </vue-viewer>

              <do-upload @onFinish="(url)=>{applyInfo.cardBackImg=url}" placeholder="身份证国徽面"> </do-upload>
            </el-col>

            <el-col :span="8" class="col-normal tc" v-if="applyInfo.education!='同等学历'">
              <vue-viewer class="preview" width="200" height="200" :thumb="applyInfo.graduateImg" :full="applyInfo.graduateImg">
              </vue-viewer>
              <do-upload @onFinish="(url)=>{applyInfo.graduateImg=url}" placeholder="毕业证照片"> </do-upload>
            </el-col>
          </el-row>
        </div>

        <!--  学历 -->
        <div v-if="show===1" class="lwh-ul-form p20" style="min-height: 300px;">

          <el-row style="margin-top: 10px;" v-for="(education, index) in applyInfo.educations" :key="education.label">
            <h4> {{labels[index]}}</h4>
            <el-col :span="5">
              <el-form-item label="开始时间" prop="startDate">
                <el-date-picker v-model="education.startDate" format="yyyy-MM-dd" value-format="yyyy-MM-dd" placeholder="开始时间"
                  type="date" style="width: 135px;"> </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item label="结束时间" prop="endDate">
                <el-date-picker v-model="education.endDate" format="yyyy-MM-dd" value-format="yyyy-MM-dd" placeholder="结束时间"
                  type="date" style="width: 135px;"> </el-date-picker>
              </el-form-item>

            </el-col>
            <el-col :span="7">
              <el-form-item label="所在单位" prop="company">
                <el-input v-model="education.company" placeholder="请输入所在单位" clearable style="width: 220px;"></el-input>
              </el-form-item>

            </el-col>
            <el-col :span="7">
              <el-form-item label="从事职业" prop="career">
                <el-input v-model="education.career" placeholder="请输入职业" clearable style="width: 220px;"></el-input>
              </el-form-item>

            </el-col>
          </el-row>

        </div>

        <div class="clearfix tc p20">
          <el-button type="primary" @click="submitForm()">审核通过</el-button>
        </div>

      </el-form>

    </div>
   
  </div>
</template>

<script>
  import { MessageBox } from "element-ui";
  import {postData} from "@/api/study.js";
  import DoUpload from '@/components/upload/upload.vue'
  const moreInfo= {
    'nativePlace':'籍贯',
    'homeType':'户籍性质',
    'homeProvince':'户籍所在省',
    'homeCity':'户籍所在市',
    'homeAddress':'户籍详细地址',
    'major':'专业',
    'married':'婚姻状态',
    'bornAddress':'出生地',
    'graduateAt':'毕业年份',
    'address':'现家庭地址',
    'guardianName':'监护人',
    'guardianPhone':'监护人手机'
  };
  export default {
    props: [],
    components: { DoUpload },
    data() {
      return {
        educations: {
          0:'初中',
          1:'同等学历',
          2:'高中',
          3:'中专技校',
          4:'大专及以上'
        },
        moreInfo,
        selectedOptions: [],
        selectAddress: '',
        labels:['小学','初中','目前'],
        applyInfo: {
          groupId: "",
          headImg: '',
          cardId: '',
          nickname:'',
          gender:'男',
          birthday:'',
          degreeId:'',
          school:'',
          phone:'',
          organ:'',
          email:'',
          nation:'',
          graduateImg: '',
          cardImg: '',
          cardBackImg: '',
          education:'同等学历',
          educations: [{label: '小学' },{ label: '初中' }, { label: '目前'} ],
          'nativePlace':'',
          'homeType':'',
          'homeProvince':'',
          'homeCity':'',
          'homeAddress':'',
          'major':'',
          'Married':'',
          'bornAddress':'',
          'graduateAt':'',
          'address':'',
          'guardianName':'',
          'guardianPhone':''
        },
        show: 1,
        submitOkDialog: false,
        applyId: 0,
        paper:{},
        errorHead: 'this.src="' + require('@/assets/null.jpg') + '"',
        errorImg: 'this.src="' + require('@/assets/null.jpg') + '"'
      }
    },
    created() {
      this.reLoadCourse( +this.$route.query.applyId)
    },
    methods: {
      inited(viewer) {
        this.$viewer = viewer
      },
      reLoadCourse( applyId ){
          postData("getUserApplyInfo", {applyId}).then(res => {
            if (res.code == 200 && res.data.isOk) {
              this.applyInfo = res.data.info;
              this.applyInfo.educations =  res.data.educations
              if( res.data.educations.length < 3 ){
                this.applyInfo.educations= [{label: '小学' },{ label: '初中' }, { label: '目前'}]
              }
          }
		})
      },
      getpassword(){
        let applyInfo = this.applyInfo;
        if( !applyInfo.cardId || applyInfo.cardId.length !=18){
          return ""
        }
        return applyInfo.cardId.substr(12,18)
      },
      goto(path) {
        this.$router.push({
          path
        })
      },
      startExam(){
        let {paperId,isFinish} = this.paper;
        if( isFinish){
          this.$message.successMsg("已经参加过", 2)
          return
        }
        this.$router.push({
          path: `/exam/enter/${paperId}`
        })
      },
      saveTemp() {
        this.saveLocalData( {applyInfo: this.applyInfo})
      },
      submitForm() {
        let param = Object.assign({}, this.applyInfo)
        let that = this
        postData("ConfirmUser", param).then(res => {
            if (res.code == 200) {
              this.submitOkDialog = true;
            }
        })
      }
    }
  }
</script>

<style>

  .setting-img {
    width: 200px;
    height: 200px;
  }

  .input-t1 {
    width: 220px !important;
  }

  .input-t2 {
    width: 190px !important;
  }

  .input-t3 {
    width: 120px !important;
  }

  .input-t4 {
    width: 160px !important;
  }

  .setting-img-2 {
    width: 150px;
    height: 150px;
  }

  .bord-grid {
    border: #333 1px dashed;
  }

  .bord-grid-right {
    border-right: #333 1px dashed;
  }

  .bord-grid-left {
    border-left: #333 1px dashed;
  }

  .bb-line{
    border-bottom: #333 1px solid;
  }
</style>