<template>
  <div class="m-right-block fr mh576" style="position: relative;font-size: 8px;">
    <div class="right-block-bd" v-if="applyId>0">
      <h1 align="left" class="p20">个人信息维护

          <el-button type="primary" @click="applyId=0" class="fr">返回列表</el-button>

          <el-button type="text" class="fr mr20" v-if="userInfo.confirm==1">审核通过</el-button>
          <el-button type="text" class="fr mr20" v-else-if="userInfo.isSubmit==1">材料审核中</el-button>
          <el-button type="primary" @click="doSubmit" class="fr mr20" v-else>提交审核</el-button>
      </h1>


      <el-row :gutter="15" class="p20">
        <el-form ref="elForm" :model="userInfo" :rules="rules" size="medium" label-width="100px">

          <el-col :span="20">
            <el-row style="margin-top: 10px;">
              <el-col :span="11">
                <el-form-item label="性别" prop="gender">
                  <el-input v-model="userInfo.gender" :disabled="true"></el-input>
                </el-form-item>
              </el-col>

              <el-col :span="13">
                <el-form-item label="证件号码" prop="cardId">
                  <el-input v-model="userInfo.cardId" placeholder="请输入证件号码" :maxlength="18" show-word-limit disabled
                    prefix-icon='el-icon-bank-card' :style="{width: '100%'}"></el-input>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="11">
                <el-form-item label="出生日期" prop="birthday">
                    <el-input v-model="userInfo.birthday" disabled></el-input>
                </el-form-item>
              </el-col>

              <el-col :span="13">
                <el-form-item label="手机号码" prop="phone">
                  <el-input v-model="userInfo.phone" disabled prefix-icon='el-icon-mobile' :style="{width: '100%'}"></el-input>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="11">
                <el-form-item label="工作单位" prop="company">
                  <el-input v-model="userInfo.company" placeholder="请输入工作单位" clearable :style="{width: '100%'}"></el-input>
                </el-form-item>
              </el-col>

              <el-col :span="13">
                <el-form-item label="实践年限" prop="years">
                  <el-input v-model="userInfo.years"  placeholder="施工现场实践年限"
                  clearable :style="{width: '100%'}"></el-input>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="11">
                <el-form-item label="选择城市" prop="city">
                  <el-cascader size="large" :options="options"
                  style="width: 250px;"
                  v-model="selectedOptions" @change="getCity"
                  :placeholder="userInfo.city">
                  </el-cascader>
                </el-form-item>
              </el-col>

              <el-col :span="13">
                <el-form-item label="详细地址" prop="address">
                  <el-input v-model="userInfo.address" placeholder="请输入详细地址" show-word-limit clearable :style="{width: '100%'}"></el-input>
                </el-form-item>
              </el-col>
            </el-row>


          </el-col>

          <el-col :span="4">
            <div class="user-block" style="width:150px">
              <div style="height: 150px;overflow-y: hidden;">
                <vue-viewer class="preview" width="150" height="150"  :head="true" :thumb="userInfo.headImg" :full="userInfo.headImg">
                </vue-viewer>
              </div>

              <confirm-span :confirm="userInfo.headImgConfirm" :userInfo="userInfo"></confirm-span>
              <HeadImg @onFinish="setHeadImg" placeholder="上传头像"
               imgType="headImg"
               width="150px" :disabled="userInfo.isSubmit==1 || userInfo.confirm==1"> </HeadImg>
            </div>

          </el-col>

          <el-col :span="24" v-if="userInfo.confirm==0 && userInfo.isSubmit==2&& userInfo.marks!='通过' ">
            <el-form-item size="large" align="center" >
              <span  style="color: red; float:center;" >拒绝原因: {{userInfo.marks}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item size="large" align="center" >
              <el-button type="text" class="tc" v-if="userInfo.confirm==1">审核通过</el-button>
              <el-button type="text" class="tc" v-else-if="userInfo.isSubmit==1">材料审核中</el-button>
              <el-button type="primary" @click="submitForm" class="tc" v-else>保存基础信息</el-button>
            </el-form-item>
          </el-col>
        </el-form>
      </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>
          <a :class="{'current':show===3}" style="text-decoration: none;padding-bottom: 5px" @click="show=3" class="">工作年限证明</a>
        </div>
      </div>
      <!-- 详情 -->
      <div v-if="show===1" class="lwh-ul-form p20">
        <el-row :gutter="40" class="mt20">
          <el-col :span="6" class="col-normal tc">
            <vue-viewer class="preview" width="200px" height="200px" :thumb="userInfo.cardImg"
            :full="userInfo.cardImg" :head="true" >
            </vue-viewer>

            <confirm-span :confirm="userInfo.cardImgConfirm" :userInfo="userInfo"></confirm-span>

            <do-upload @onFinish="setCardImg" imgType="cardImg" placeholder="身份证头像面"
            :disabled="userInfo.isSubmit==1 || userInfo.confirm==1"> </do-upload>
          </el-col>

          <el-col :span="6" class="col-normal tc">
            <vue-viewer class="preview" width="200px" height="200px" :thumb="userInfo.cardBackImg"  :head="true"
            :full="userInfo.cardBackImg">
            </vue-viewer>

            <confirm-span :confirm="userInfo.cardBackImgConfirm" :userInfo="userInfo"></confirm-span>
            <do-upload @onFinish="setCardBackImg" imgType="cardBackImg" placeholder="身份证国徽面" :disabled="userInfo.isSubmit==1 || userInfo.confirm==1"> </do-upload>
          </el-col>
        </el-row>
      </div>

      <!--  学历 -->
      <div v-if="show===2" class="lwh-ul-form p20">
        <!--        <div align="center" class="p10">
          <el-button type="text" icon="el-icon-plus"> 新增学历</el-button>
        </div> -->
        <el-card class="mt10">
          <el-form :inline="true" label-width="78px" :model="userInfo" :rules="ruleEducation" ref="elEducation" >
            <el-row :gutter="40">
              <el-col :span="14">
                <!-- 第一行 -->
                <el-row style="margin-top: 10px;">
                  <el-col :span="11">
                    <el-form-item label="学历" prop="education">

                      <el-select v-model="userInfo.education" placeholder="请选择学历" clearable style="width: 140px;">
                        <el-option v-for="item in educations" :label="item.label" :value="item.value" :key="item.value">
                        </el-option>

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

                  <el-col :span="13">
                    <el-form-item label="证书编号" prop="degreeId">
                      <el-input v-model="userInfo.degreeId" placeholder="请输入证件号码" :maxlength="18" clearable
                      style="width: 180px;"></el-input>
                    </el-form-item>
                  </el-col>

                  <el-col :span="24">
                    <el-form-item label="毕业学校" prop="school">
                      <el-input v-model="userInfo.school" placeholder="请输入学校" clearable style="width: 410px;"></el-input>
                    </el-form-item>
                  </el-col>


                  <el-col :span="11">
                    <el-form-item label="毕业时间" prop="graduateAt">
                      <el-date-picker v-model="userInfo.graduateAt" value-format="yyyy-MM-dd" format="yyyy-MM-dd" style="width:140px"
                        type="date" align="left"></el-date-picker>
                    </el-form-item>
                  </el-col>

                  <el-col :span="13">
                    <el-form-item label="学制：" prop="schoolingLen">
                      <el-input v-model="userInfo.schoolingLen" placeholder="请输入学制"
                      clearable style="width: 180px;"></el-input>
                    </el-form-item>
                  </el-col>

                  <el-col :span="11">
                    <el-form-item label="学位：" prop="degree">
                      <el-input v-model="userInfo.degree" placeholder="请输入学位" clearable style="width: 140px;"></el-input>
                    </el-form-item>
                  </el-col>

                  <el-col :span="13">
                    <el-form-item label="专业：" prop="major">
                      <el-input v-model="userInfo.major" placeholder="请输入专业" clearable
                      style="width: 180px;"></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>

              </el-col>
              <el-col :span="5">
                  <vue-viewer class="preview" width="150px" height="150px" :thumb="userInfo.graduateImg" :full="userInfo.graduateImg">
                  </vue-viewer>
                <confirm-span :confirm="userInfo.graduateImgConfirm" :userInfo="userInfo"></confirm-span>
                <do-upload @onFinish="(url)=>{ userInfo.graduateImg = url; }"
                imgType="graduateImg"  placeholder="毕业证" width="150px" :disabled="userInfo.isSubmit==1 || userInfo.confirm==1">
                </do-upload>

              </el-col>
              <el-col :span="5">
                  <vue-viewer class="preview"
                    width="150px" height="150px" :thumb="userInfo.proveImg" :full="userInfo.proveImg">
                  </vue-viewer>
                <span style="margin-top: 8px;">专科及以上学历需要</span>
                <do-upload @onFinish="(url)=>{ userInfo.proveImg = url; }" imgType="proveImg"
                placeholder="学信备案表" width="150px" :disabled="userInfo.isSubmit==1 || userInfo.confirm==1">
                </do-upload>
              </el-col>

            </el-row>
            <div class="bottom clearfix tc">
              <el-button type="text" class="tc" v-if="userInfo.confirm==1">审核通过</el-button>
              <el-button type="text" class="tc" v-else-if="userInfo.isSubmit==1">材料审核中</el-button>
              <el-button type="primary" @click="saveEducation(userInfo)" v-else>保存教育信息</el-button>
            </div>
          </el-form>

        </el-card>
      </div>
      <!--  工作年限 -->
      <div v-if="show===3" class="lwh-ul-form p20">
        <el-card class="mt10">
          <el-row>
            <el-col :span="16">
              <div align="center">
                <el-button type="text" style="margin-top: 100px;color: red;" @click="download">工作年限证明模板下载 </el-button>
              </div>
            </el-col>
            <el-col :span="8">
                <vue-viewer class="preview" width="200px" height="200px" :thumb="userInfo.yearsImg" :full="userInfo.yearsImg">
                </vue-viewer>

              <confirm-span :confirm="userInfo.yearsImgConfirm" :userInfo="userInfo"></confirm-span>
              <do-upload @onFinish="setYearsImg" placeholder="上传工作年限证明" width="200px" imgType="yearsImg"> </do-upload>
            </el-col>
          </el-row>

        </el-card>
      </div>
    </div>

    <div v-else class="right-block-bd">
      <IApplyList @select="goApplyInfo"></IApplyList>
    </div>

  </div>
</template>

<script>
  import {httpServer } from "@/components/httpServer/httpServer.js";
  import DoUpload from '@/components/upload/bigImg.vue'
  import HeadImg from '@/components/upload/headImg.vue'
  import rules from '@/utils/rules.js'
  import {
    mapGetters,
    mapActions
  } from "vuex";
  import {
    provinceAndCityData,
    CodeToText
  } from 'element-china-area-data'
  import IApplyList from './components/IApplyList.vue'
  import ConfirmSpan from './components/confirmSpan.vue'
  export default {
    components: {},
    props: [],
    components: {
      DoUpload,
      IApplyList,
      HeadImg,
      ConfirmSpan
    },
    data() {
      return {
        educations: [{
            label: '中职（含技工学校）',
            value: '中职（含技工学校）'
          },
          {
            label: '专科（含高职和技师学院）',
            value: '专科（含高职和技师学院）'
          },
          {
            label: '本科及以上',
            value: '本科及以上'
          }
        ],
        options: provinceAndCityData,
        selectedOptions: [],
        selectAddress: '',
        userInfo: {},
        show: 2,
        applyId: 0,
        rules: {
          birthday:rules.defaultFun("请输入生日"),
          company:rules.defaultFun("请输入工作单位"),
          years:rules.defaultFun("请输入实践年限"),
          city: rules.defaultFun( "请选择城市"),
          gender: rules.defaultFun( "请选择性别"),
          address: rules.defaultFun( "请输入地址")
        },
        ruleEducation:{
          education :rules.defaultFun("请选择学历"),
          school :rules.defaultFun("请输入学校"),
          graduateAt :rules.defaultFun("请输入毕业时间"),
          schoolingLen :rules.defaultFun("请输入学制"),
          major :rules.defaultFun("请输入专业"),
          degreeId: rules.defaultFun("请输入证书编号"),
        }
      }
    },
    methods: {
      saveApplyImg(type, url) {
        let applyId = this.applyId
        httpServer("User.SaveUserApplyImg", {applyId,url,type})
      },
      download() {
        let burl = "http://study.ndjsxh.cn:8888/doc/%E5%B7%A5%E4%BD%9C%E8%AF%81%E6%98%8E.docx";
        window.open(burl)
      },
      goApplyInfo(item) {
        this.applyId = item.applyId
        this.loadApplyInfo()
      },
      getCity(codeList) {
        let cityList = codeList.map((i) => {
          return CodeToText[i];
        })
        this.userInfo.city = cityList.join('')
      },
      setHeadImg(url) {
        this.userInfo.headImg = url;
        this.saveApplyImg('headImg', url)
      },
      setYearsImg(imgUrl) {
        this.userInfo.yearsImg = imgUrl;
        this.saveApplyImg('yearsImg', imgUrl)
      },
      setCardImg(url) {
        this.userInfo.cardImg = url;
        this.saveApplyImg('cardImg', url)
      },
      setCardBackImg(imgUrl) {
        this.userInfo.cardBackImg = imgUrl;
        this.saveApplyImg('cardBackImg', imgUrl)
      },
      loadApplyInfo() {
        let param = {
          applyId: this.applyId
        };
        httpServer("User.GetUserApplyInfo", param).then(res => {
          if (res.code == 200) {
            this.userInfo = res.data||{};
          }
        })
      },
      doSubmit(){
        let param = { applyId: this.applyId }
        let that = this;
        if( !that.userInfo.headImg ){
          that.$message.errorMsg("头像不能为空", 2)
         return
        }
        if( !that.userInfo.cardImg ){
          that.$message.errorMsg("身份证正面不能为空", 2)
          return
        }
        if( !that.userInfo.cardBackImg ){
         that.$message.errorMsg("身份证正面背面不能为空", 2)
         return
        }
        if( !that.userInfo.graduateImg ){
         that.$message.errorMsg("毕业证不能为空", 2)
         return
        }
        if( !that.userInfo.yearsImg ){
         that.$message.errorMsg("工作年限证明不能为空", 2)
         return
        }
        if( !that.userInfo.years ){
         that.$message.errorMsg("工作年限不能为空", 2)
         return
        }

        that.$refs['elForm'].validate(valid => {
          if (!valid) return
          that.$refs['elEducation'].validate(valid => {
            if (!valid) return
            if( that.userInfo.education != '中职（含技工学校）' && !that.userInfo.proveImg){
                that.$message.errorMsg("专科、本科需要需要学信备案表", 1)
                return
            }

            that.$msgbox({
              title: "温馨提示",
              message: "非土建类本专业或相关专业的学员，仅可报考资料员、材料员和劳务员",
              cancelButtonText: "返回修改",
              confirmButtonText: "继续提交审核",
              showCancelButton: true,
              beforeClose: (action, instance, done) => {
                if( action == 'confirm'){
                  that.dosubmitModel( param )
                }
                done();
              }
            })
          })
        })

      },
      dosubmitModel( param ){
        httpServer("User.SubmitUserApply", param).then(res => {
          if (res.code == 200) {
            this.userInfo.isSubmit = 1;
            this.$message.successMsg("提交成功", 2)
          }
        })
      },
      saveEducation() {
        let param = {
          applyId: this.applyId,
          education: this.userInfo.education,
          degree: this.userInfo.degree,
          degreeId: this.userInfo.degreeId,
          graduateAt: this.userInfo.graduateAt,
          schoolingLen: this.userInfo.schoolingLen,
          school: this.userInfo.school,
          major: this.userInfo.major,
          proveImg: this.userInfo.proveImg,
          graduateImg: this.userInfo.graduateImg,
        }
        this.$refs['elEducation'].validate(valid => {
          if (!valid) return
          httpServer("User.saveUserApplyEducation", param).then(res => {
            if (res.code == 200) {
              this.$message.successMsg("保存成功", 2)
            }
          })
        })
      },
      submitForm() {
        let param = {
          applyId: this.applyId,
          education: this.userInfo.education,
          address: this.userInfo.address,
          company: this.userInfo.company,
          birthday: this.userInfo.birthday,
          headImg: this.userInfo.headImg,
          city: this.userInfo.city,
          years: this.userInfo.years,
        }
        if( !this.userInfo.headImg ){
          this.$message.errorMsg("头像不能为空", 2)
         return
        }
        this.$refs['elForm'].validate(valid => {
          if (!valid) return
          httpServer("User.SaveUserApplyInfo", param).then(res => {
            if (res.code == 200) {
              this.$message.success("保存成功")
            }
          })
        })
      },
      resetForm() {
        this.$refs['elForm'].resetFields()
      },
    }
  }
</script>

<style>
  @import url("../../../assets/css/m-account.css");

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

  .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;
  }
  .preview{
    max-height: 200px;
    overflow: hidden;
  }
</style>
