<template>
  <div class="container">
    <div class="center-header">
      <div class="header-container">
        <router-link to="/" tag="div" class="title">包头市安全生产报名培训考试服务平台</router-link>
        <div class="person-info">
          <a href="javascript: void(0);" class="user-name">
            <i class="icon"></i>
            {{userInfo.name}}
          </a>
          <router-link to="/" class="back">
            <i class="icon"></i>
            返回首页
          </router-link>
          <a href="javascript: void(0);" class="logout" @click="doLogout">
            <i class="icon"></i>
            退出
          </a>
        </div>
      </div>
    </div>
    <div class="content">
      <div class="left">
        <img src="@/assets/images/center-text.png" alt="">
        <ul>
          <li :class="{active: tab == 0 && !isExamApply}" @click="changeTab(0, false)"></li>
<!--          <li :class="{active: tab == 0 && isExamApply}" @click="changeTab(0, true)"></li>-->
          <li :class="{active: tab == 1}" @click="changeTab(1)"></li>
          <li :class="{active: tab == 5}" @click="changeTab(5)"></li>
          <li :class="{active: tab == 2}" @click="changeTab(2)"></li>
          <li :class="{active: tab == 3}" @click="changeTab(3)"></li>
          <li :class="{active: tab == 4}" @click="changeTab(4)"></li>
          <li :class="{active: tab == 7}" @click="changeTab(7)"></li>
        </ul>
      </div>
      <div class="right">
        <!--培训报名-->
        <div v-if="tab == 0">
          <div>
            <h3 class="right-title" v-if="signStep == 0 && !isExamApply">培训报名-选择报名工种</h3>
            <h3 class="right-title" v-if="signStep == 1 && !isExamApply">培训报名-填写报名信息</h3>
            <h3 class="right-title" v-if="signStep == 2 && !isExamApply">培训报名-选择培训机构</h3>
            <h3 class="right-title" v-if="signStep == 0 && isExamApply">考试申请-选择报名工种</h3>
            <h3 class="right-title" v-if="signStep == 1 && isExamApply">考试申请-填写报名信息</h3>
            <h3 class="right-title" v-if="signStep == 2 && isExamApply">考试申请-选择培训机构</h3>
            <!--报名进度-->
            <div class="process" v-if="!isSignSuccess">
              <div class="process-box" :class="{cur: signStep > 0}">
                <div class="process-icon">
                  <i class="iconfont icon-xuanze3"></i>
                </div>
                <div class="process-name">
                  选择工种
                </div>
              </div>
              <div class="process-box" :class="{cur: signStep > 1}">
                <div class="process-icon">
                  <i class="iconfont icon-peixun"></i>
                </div>
                <div class="process-name">
                  选择培训机构
                </div>
              </div>
              <div class="process-box" :class="{cur: signStep > 2}">
                <div class="process-icon">
                  <i class="iconfont icon-tianxieziliao"></i>
                </div>
                <div class="process-name">
                  填写信息
                </div>
              </div>
              <div class="process-box" :class="{cur: signStep > 5}">
                <div class="process-icon">
                  <i class="iconfont icon-xuanze1"></i>
                </div>
                <div class="process-name">
                  报名完成
                </div>
              </div>
            </div>
            <!--步骤1：选择报名工种-->
            <div v-if="signStep == 0 && !isSignSuccess">
              <!--报名选项-->
              <div class="sign-select">
                <div class="row">
                  科目类型
                  <select v-model="workSelectedType" @change="getWorkType(0)">
                    <option value="0">请选择</option>
                    <option :value="item.workTypeId" v-for="item in workType">{{ item.workTypeName }}</option>
                  </select>
                </div>
                <div class="row" v-if="workTypeLv1 && workTypeLv1.length > 0">
                  报名工种
<!--                  <select v-model="workSelectedTypeLv1" @change="getWorkType(1, $event)">-->
                    <select v-model="workSelectedTypeLv1" @change="getHtmlType">
                    <option value="0">请选择</option>
                    <option :value="item.workTypeId" v-for="item in workTypeLv1">{{ item.workTypeName }}</option>
                  </select>
                </div>
              </div>
              <!--按钮-->
              <div class="btn-box">
                <button @click="nextStep">下一步</button>
              </div>
            </div>
            <!--步骤2：选择培训机构-网上报名-->
            <div v-if="signStep == 1 && !isSignSuccess && !isExamApply">
              <div class="search-org">
                <input type="text" placeholder="请输入名称搜索培训机构" v-model="orgKeywords" @keyup.enter="getOrgList">
                <button @click="getOrgList">搜索</button>
              </div>
              <div class="org-list">
                <ul>
                  <li v-for="(item,idx) in orgList">
                    <h3 :title="item.institutionName">{{item.institutionName}}</h3>
                    <p class="address" :title="item.institutionAddress">{{item.institutionAddress}}<button @click="checkMap(item.institutionX, item.institutionY)" v-if="item.institutionAddress"></button></p>
                    <p>开班人数 - <span class="count type1">{{ item.applyUserNum1 }}人</span> | 已报人数 - <span class="count type2">{{ item.applyUserNum2 }}人</span> | 过审人数 - <span class="count type3">{{ item.applyUserNum3 }}人</span></p>
                    <div class="img-btn">
                      <div class="btn">
                        <button @click="checkOrgDetail(idx)">查看详情</button>
                        <button @click="signOrg('', item.institutionId, '')" v-if="item.applyStatus == 'applyTrue'">报名</button>
                        <button v-else-if="item.applyStatus == 'applyFalse'" style="background: rgba(255,0,0,0.6);cursor: default">已报名</button>
                        <button v-else style="background: rgba(255,0,0,0.6);cursor: default">机构已开班</button>
                        <div class="img">
                          <img :src="signUrl + 'route/file/download/true/' + item.qrCode" alt="" v-if="item.qrCode">
                          <div class="hide-img-box">
                            <img :src="signUrl + 'route/file/download/true/' + item.qrCode" alt="" class="hide-img" v-if="item.qrCode">
                            <p style="font-size: 12px;color: #aaa;" v-if="item.qrCode">扫描二维码添加客服人员</p>
                          </div>
                        </div>
                      </div>
                    </div>
                  </li>
                </ul>
              </div>
              <button class="prev-btn" @click="prevStep">上一步</button>
            </div>
            <!--步骤2：选择考试计划-考试申请-->
            <div v-if="signStep == 1 && !isSignSuccess && isExamApply">
              <div class="search-org">
                <input type="text" placeholder="请输入名称搜索培训机构" v-model="orgKeywords" @keyup.enter="getOrgList">
                <button @click="getOrgList">搜索</button>
              </div>
              <div class="org-list">
                <ul>
                  <li v-for="(item,idx) in examPlanList">
                    <h3 :title="item.title">{{item.title}}</h3>
                    <p>开始时间：{{item.startTime}}</p>
                    <p>结束时间：{{item.endTime}}</p>
                    <p>报名截止时间：{{item.signupTime}}</p>
                    <p>联系人：{{item.linkMan}}</p>
                    <p>联系电话：{{item.linkPhone}}</p>
                    <p>已报人数 - <span class="count type2">{{ item.overCount }}人</span></p>
                    <div class="img-btn">
                      <div class="btn">
                        <button @click="signExamApply(item.examPlanId,item.btnStatus)">{{ item.btnStatus }}</button>
                      </div>
                    </div>
                  </li>
                </ul>
              </div>
              <button class="prev-btn" @click="prevStep">上一步</button>
            </div>
            <!--步骤3：填写报名信息  特种作业-->
            <div v-if="signStep == 2 && !isSignSuccess && htmlTypeId != '530279c5-32a9-44db-bbf0-a04ef1cdae66'">
              <div class="sign-info">
                <table>
                  <tr>
                    <td width="10%">照片</td>
                    <td width="40%">
                      <img :src="personUrl + 'route/file/download/true/' + signInfo.applyUserCardPhoto" alt="" style="width: 90px;height:110px;margin-left: 10px" v-if="personInfo.userPhotoId">
                    </td>
                    <td width="10%">学历证书</td>
                    <td width="40%">
                      <img :src="personUrl + 'route/file/download/true/' + signInfo.educationPhoto" alt="" v-if="signInfo.educationPhoto" style="max-width: 60%">
                    </td>
                  </tr>
                  <tr>
                    <td width="10%">身份证正面</td>
                    <td width="40%">
                      <img :src="personUrl + 'route/file/download/true/' + signInfo.idCardFrontPhoto" alt="" v-if="signInfo.idCardFrontPhoto" style="max-width: 60%;margin-left:10px">
                    </td>
                    <td width="10%">身份证背面</td>
                    <td width="40%">
                      <img :src="personUrl + 'route/file/download/true/' + signInfo.idCardBackPhoto" alt="" v-if="signInfo.idCardBackPhoto" style="max-width: 60%;margin-left:10px">
                    </td>
                  </tr>
                  <tr>
                    <td width="10%"><span>*</span>培训类型</td>
                    <td width="40%" style="text-indent: 10px;">
                      <input type="radio" id="first" name="isFirst" v-model="signInfo.applyFenLei" value="1" @change="changeIsFirst">
                      <label for="first">初训</label>
                      <input type="radio" id="not-first" name="isFirst" v-model="signInfo.applyFenLei" value="2" @change="changeIsFirst">
                      <label for="not-first">复训</label>
                      <input type="radio" id="change" name="isFirst" v-model="signInfo.applyFenLei" value="3" @change="changeIsFirst">
                      <label for="change">换证</label>
                    </td>
                  </tr>
                  <tr v-if="signInfo.applyFenLei == '2' || signInfo.applyFenLei == '3'">
                    <td></td>
                    <td colspan="3" style="font-size: 0">
                      <p style="font-size: 16px;color:red">*复训需要上传您的再培训证明照片和填报证书个人信息页</p>
                      <div style="display: inline-block;width:50%;vertical-align: top">
                        <div v-if="!signInfo.applyTakeCardPhoto">
                          <input type="file" id="upload-page" @change="uploadTrainPhoto($event,'page', false)">
                          <label for="upload-page" class="upload-img-btn" style="width:auto;padding: 0 10px">上传证书个人信息页</label>
                        </div>
                        <div v-else>
                          <input type="file" id="upload-page" @change="uploadTrainPhoto($event,'page')">
                          <label for="upload-page">
                            <img :src="signUrl + 'route/file/download/true/' + signInfo.applyTakeCardPhoto" alt="" style="max-width: 60%">
                          </label>
                          <p style="font-size: 16px">证书个人信息页</p>
                        </div>
                      </div>
                      <div style="display: inline-block;width:50%;vertical-align: top">
                        <div v-if="!signedInfo.applyRePeiXunPhoto">
                          <input type="file" id="upload-photo" @change="uploadTrainPhoto($event,'train', false)" :disabled="signInfo.isDisabled">
                          <label for="upload-photo" class="upload-img-btn" style="width:auto;padding: 0 10px">上传再培训证明照片</label>
                        </div>
                        <div v-else>
                          <input type="file" id="upload-photo" @change="uploadTrainPhoto($event,'train', true)" :disabled="signInfo.isDisabled">
                          <label for="upload-photo">
                            <img :src="signUrl + 'route/file/download/true/' + signInfo.applyRePeiXunPhoto" alt="" style="max-width: 60%;height: 150px;">
                          </label>
                          <p style="font-size: 16px">再培训证明</p>
                        </div>
                      </div>
                    </td>
                  </tr>
                  <tr v-if="signInfo.applyFenLei == '2' || signInfo.applyFenLei == '3'">
                    <td>取得证件时间</td>
                    <td><input type="text" id="getPaperTime" placeholder="请选择取得证件时间" v-model="signInfo.takeCardTime" autocomplete="off"></td>
                    <td>证件号码</td>
                    <td><input type="text" placeholder="请输入证件号码" v-model="signInfo.takeCardNumber"></td>
                  </tr>
                  <tr v-if="signInfo.applyFenLei == '2' || signInfo.applyFenLei == '3'">
                    <td>证件有效期</td>
                    <td><input type="text" id="term" placeholder="请选择证件有效期" v-model="signInfo.cardTimeLimit" autocomplete="off"></td>
                    <td>复审时间</td>
                    <td><input type="text" id="review" placeholder="请选择复审时间" v-model="signInfo.rePeiXunDate" autocomplete="off"></td>
                  </tr>
                  <tr>
                    <td width="10%"><span>*</span>姓名</td>
                    <td width="40%">
                      <input type="text" v-model="signInfo.applyName" :disabled="personInfo.fullName">
                    </td>
                    <td width="10%"><span>*</span>性别</td>
                    <td width="40%">
                      <select v-model="signInfo.applySex" :disabled="personInfo.gender">
                        <option value="0">请选择性别</option>
                        <option :value="item.dataId" v-for="item in sexList">{{item.dataName}}</option>
                      </select>
                    </td>
                  </tr>
                  <tr>
                    <td width="10%"><span>*</span>文化程度</td>
                    <td width="40%">
                      <select v-model="signInfo.applyCultureLevel">
                        <option value="0">请选择文化程度</option>
                        <option value="51b03a8b-413e-4cd8-adbd-7fd2a75f74ab">博士研究生毕业</option>
                        <option value="f0edbc2f-8e65-4126-a748-6783e8099512">硕士研究生毕业</option>
                        <option value="2c3f1d75-52e3-4ffd-be8e-723bed8b025c">研究生班毕业</option>
                        <option value="a19e18eb-e1fe-4980-a006-e0231e50b2ec">大学本科毕业</option>
                        <option value="80664312-b898-43ea-b082-5c5245118e87">大学专科毕业</option>
                        <option value="b449dcca-4213-46a7-a5bf-41d551abfb71">中等专科毕业</option>
                        <option value="079184ba-a527-47bd-aaeb-866b301a8e18">职业高中毕业</option>
                        <option value="4a5519ec-3b95-491d-b544-83f726e096f4">技工学校毕业</option>
                        <option value="347bdaba-956b-48c6-a406-301788632c8e">普通高中毕业</option>
                        <option value="6f5031bd-5cc9-47b5-b82d-bc7e64cfe081">初中毕业</option>
                      </select>
                    </td>
                    <td width="10%"><span>*</span>身份证号码</td>
                    <td width="40%">
                      <input type="text" v-model="signInfo.applyCardNumber" disabled placeholder="请输入身份证号">
                    </td>
                  </tr>
                  <tr>
                    <td width="10%"><span>*</span>手机号码</td>
                    <td width="40%">
                      <input type="text" v-model="signInfo.applyPhone" :disabled="personInfo.telephone">
                    </td>
                    <td width="10%"><span>*</span>工作单位</td>
                    <td width="40%">
                      <input type="text" v-model="signInfo.applyUnitName" placeholder="请输入工作单位">
                    </td>
                  </tr>
<!--                  <tr v-if="!isExamApply">-->
<!--                    <td width="10%"><span>*</span>照片</td>-->
<!--                    <td width="40%">-->
<!--                      <img :src="personUrl + 'route/file/download/true/' + personInfo.userPhotoId" alt="" style="width: 90px;height:110px;margin-left: 10px" v-if="personInfo.userPhotoId">-->
<!--                      <input type="file" id="upload-img" @change="uploadImg($event)">&ndash;&gt;-->
<!--                      <label for="upload-img" class="upload-img-btn">上传照片</label>&ndash;&gt;-->
<!--                    </td>-->

<!--                  </tr>-->
                  <tr v-if="!isExamApply">
                    <td></td>
                    <td colspan="3">
                      <input type="checkbox" id="read" v-model="readPromise">
                      <label for="read">我已阅读<span @click="isPromising = true">《承诺告知书》</span></label>
                    </td>
                  </tr>
                  <tr>
                    <td colspan="4" style="text-align: center">
                      <button @click="prevStep">上一步</button>
                      <button @click="submitSignOrg" v-if="!isExamApply">确认报名</button>
                      <button @click="submitExamApply" v-else>确认报名</button>
                    </td>
                  </tr>
                </table>
              </div>
            </div>
            <!--步骤3：填写报名信息  安全生产-->
            <div v-if="signStep == 2 && !isSignSuccess && htmlTypeId == '530279c5-32a9-44db-bbf0-a04ef1cdae66'">
              <div class="sign-info">
                <table>
                  <tr>
                    <td width="10%">照片</td>
                    <td width="40%">
                      <img :src="personUrl + 'route/file/download/true/' + signInfo.applyUserCardPhoto" alt="" style="width: 90px;height:110px;margin-left: 10px" v-if="personInfo.userPhotoId">
                    </td>
                    <td width="10%">学历证书</td>
                    <td width="40%">
                      <img :src="personUrl + 'route/file/download/true/' + signInfo.educationPhoto" alt="" v-if="signInfo.educationPhoto" style="max-width: 60%">
                    </td>
                  </tr>
                  <tr>
                    <td width="10%">身份证正面</td>
                    <td width="40%">
                      <img :src="personUrl + 'route/file/download/true/' + signInfo.idCardFrontPhoto" alt="" v-if="signInfo.idCardFrontPhoto" style="max-width: 60%;margin-left:10px">
                    </td>
                    <td width="10%">身份证正面</td>
                    <td width="40%">
                      <img :src="personUrl + 'route/file/download/true/' + signInfo.idCardBackPhoto" alt="" v-if="signInfo.idCardBackPhoto" style="max-width: 60%;margin-left:10px">
                    </td>
                  </tr>
                  <tr>
                    <td width="10%"><span>*</span>培训类型</td>
                    <td width="40%" style="text-indent: 10px;">
                      <input type="radio" id="first" name="isFirst" v-model="signInfo.applyFenLei" value="1" @change="changeIsFirst">
                      <label for="first">初训</label>
                      <input type="radio" id="not-first" name="isFirst" v-model="signInfo.applyFenLei" value="2" @change="changeIsFirst">
                      <label for="not-first">复训</label>
                      <input type="radio" id="change" name="isFirst" v-model="signInfo.applyFenLei" value="3" @change="changeIsFirst">
                      <label for="change">换证</label>
                    </td>
                    <td width="10%"><span>*</span>培训类别</td>
                    <td width="40%">
<!--                      <input type="text" placeholder="例如：负责人、安全员" v-model="signInfo.applyLeiBie">-->
                      <input type="radio" id="type1" value="企业主要负责人" name="selectType" v-model="signInfo.applyLeiBie">
                      <label for="type1">企业主要负责人</label>
                      <input type="radio" id="type2" value="安全管理人员" name="selectType" v-model="signInfo.applyLeiBie">
                      <label for="type1">安全管理人员</label>
                    </td>
                  </tr>
                  <tr v-if="signInfo.applyFenLei == '2' || signInfo.applyFenLei == '3'">
                    <td></td>
                    <td colspan="3" style="font-size: 0">
                      <p style="font-size: 16px;color:red">*复训或换证需要上传您的再培训证明照片和填报证书个人信息页</p>
                      <div style="display: inline-block;width:50%;vertical-align: top">
                        <div v-if="!signInfo.applyRePeiXunPhoto">
                          <input type="file" id="upload-photo" @change="uploadTrainPhoto($event,'train', false)">
                          <label for="upload-photo" class="upload-img-btn" style="width:auto;padding: 0 10px">上传再培训证明照片</label>
                        </div>
                        <div v-else>
                          <input type="file" id="upload-photo" @change="uploadTrainPhoto($event,'train', false)">
                          <label for="upload-photo">
                            <img :src="signUrl + 'route/file/download/true/' + signInfo.applyRePeiXunPhoto" alt="" style="max-width: 60%;height: 150px;">
                          </label>
                        </div>
                      </div>
                      <div style="display: inline-block;width:50%;vertical-align: top">
                        <div v-if="!signInfo.applyTakeCardPhoto">
                          <input type="file" id="upload-page" @change="uploadTrainPhoto($event,'page', false)">
                          <label for="upload-page" class="upload-img-btn" style="width:auto;padding: 0 10px">上传证书个人信息页</label>
                        </div>
                        <div v-else>
                          <input type="file" id="upload-page" @change="uploadTrainPhoto($event,'page', false)">
                          <label for="upload-page">
                            <img :src="signUrl + 'route/file/download/true/' + signInfo.applyTakeCardPhoto" alt="" style="max-width: 60%;height: 150px;">
                          </label>
                        </div>
                      </div>
                    </td>
                  </tr>
                  <tr v-if="signInfo.applyFenLei == '2' || signInfo.applyFenLei == '3'">
                    <td>取得证件时间</td>
                    <td><input type="text" id="getPaperTime" placeholder="请选择取得证件时间" v-model="signInfo.takeCardTime" autocomplete="off"></td>
                    <td>证件号码</td>
                    <td><input type="text" placeholder="请输入证件号码" v-model="signInfo.takeCardNumber"></td>
                  </tr>
                  <tr v-if="signInfo.applyFenLei == '2' || signInfo.applyFenLei == '3'">
                    <td>证件有效期</td>
                    <td><input type="text" id="term" placeholder="请选择证件有效期" v-model="signInfo.cardTimeLimit" autocomplete="off"></td>
                    <td>再培训时间</td>
                    <td><input type="text" id="retrain" placeholder="请选择再培训时间" v-model="signInfo.rePeiXunDate" autocomplete="off"></td>
                  </tr>
                  <tr>
                    <td width="10%"><span>*</span>姓名</td>
                    <td width="40%">
                      <input type="text" v-model="signInfo.applyName" :disabled="personInfo.fullName">
                    </td>
                    <td width="10%"><span>*</span>性别</td>
                    <td width="40%">
                      <select v-model="signInfo.applySex" :disabled="personInfo.gender">
                        <option value="0">请选择性别</option>
                        <option :value="item.dataId" v-for="item in sexList">{{item.dataName}}</option>
                      </select>
                    </td>
                  </tr>
                  <tr>
                    <td width="10%"><span>*</span>文化程度</td>
                    <td width="40%">
                      <select v-model="signInfo.applyCultureLevel" disabled>
                        <option value="0">请选择文化程度</option>
                        <option value="51b03a8b-413e-4cd8-adbd-7fd2a75f74ab">博士研究生毕业</option>
                        <option value="f0edbc2f-8e65-4126-a748-6783e8099512">硕士研究生毕业</option>
                        <option value="2c3f1d75-52e3-4ffd-be8e-723bed8b025c">研究生班毕业</option>
                        <option value="a19e18eb-e1fe-4980-a006-e0231e50b2ec">大学本科毕业</option>
                        <option value="80664312-b898-43ea-b082-5c5245118e87">大学专科毕业</option>
                        <option value="b449dcca-4213-46a7-a5bf-41d551abfb71">中等专科毕业</option>
                        <option value="079184ba-a527-47bd-aaeb-866b301a8e18">职业高中毕业</option>
                        <option value="4a5519ec-3b95-491d-b544-83f726e096f4">技工学校毕业</option>
                        <option value="347bdaba-956b-48c6-a406-301788632c8e">普通高中毕业</option>
                        <option value="6f5031bd-5cc9-47b5-b82d-bc7e64cfe081">初中毕业</option>
                      </select>
                    </td>
                    <td width="10%"><span>*</span>身份证号码</td>
                    <td width="40%">
                      <input type="text" v-model="signInfo.applyCardNumber" disabled placeholder="请输入身份证号码">
                    </td>
                  </tr>
                  <tr>
                    <td width="10%"><span>*</span>手机号码</td>
                    <td width="40%">
                      <input type="text" v-model="signInfo.applyPhone" :disabled="personInfo.telephone">
                    </td>
                    <td width="10%"><span>*</span>工作单位</td>
                    <td width="40%">
                      <input type="text" v-model="signInfo.applyUnitName" placeholder="请输入工作单位">
                    </td>
                  </tr>
                  <tr>
                    <td width="10%"><span>*</span>单位类型</td>
                    <td width="40%">
                      <input type="text" placeholder="请输入单位类型" v-model="signInfo.applyUnitType">
                    </td>
                    <td width="10%"><span>*</span>职务</td>
                    <td width="40%">
                      <input type="text" placeholder="请输入职务" v-model="signInfo.applyUnitWork">
                    </td>
                  </tr>
                  <tr>
                    <td width="10%"><span>*</span>单位所在区域</td>
                    <td width="40%" colspan="3">
                      <input type="text" style="width:91%;" placeholder="请输入单位所在区域" v-model="signInfo.applyUnitBelong">
                    </td>
                  </tr>
                  <tr>
                    <td width="10%"><span>*</span>毕业院校</td>
                    <td width="40%">
                      <input type="text" placeholder="请输入毕业院校" v-model="signInfo.applySchool">
                    </td>
                    <td width="10%"><span>*</span>所学专业</td>
                    <td width="40%">
                      <input type="text" placeholder="请输入所学专业" v-model="signInfo.applySubject">
                    </td>
                  </tr>
                  <tr>
                    <td width="10%"><span>*</span>职称</td>
                    <td width="40%">
                      <input type="text" placeholder="请输入职称" v-model="signInfo.applyZhiCheng">
                    </td>
                  </tr>
                  <tr v-if="!isExamApply">
                    <td></td>
                    <td colspan="3">
                      <input type="checkbox" id="read" v-model="readPromise">
                      <label for="read">我已阅读<span @click="isPromising = true">《承诺告知书》</span></label>
                    </td>
                  </tr>
                  <tr>
                    <td colspan="4" style="text-align: center">
                      <button @click="prevStep">上一步</button>
                      <button @click="submitSignOrg" v-if="!isExamApply">确认报名</button>
                      <button @click="submitExamApply" v-else>确认报名</button>
                    </td>
                  </tr>
                </table>
              </div>
            </div>
            <!--报名成功-->
            <div v-if="isSignSuccess">
              <img src="@/assets/images/success.png" alt="" class="success-img">
              <p class="success-text">报名成功</p>
              <button class="success-btn" @click="successBack">返回</button>
            </div>
          </div>
        </div>
        <!--报名情况-->
        <div v-if="tab == 1">
          <h3 class="right-title">报名情况</h3>
          <div class="sign-list" v-if="!checkingSigned">
            <div v-if="myApplyList && myApplyList.length > 0">
              <div class="signed-box" v-for="item in myApplyList">
                <div class="signed-left">
                  <div class="status wait" v-if="item.applyAuditState == 0">待审核</div>
                  <div class="status error" v-if="item.applyAuditState == 1">用户撤回</div>
                  <div class="status complete" v-if="item.applyAuditState == 2">审核通过</div>
                  <div class="status complete" v-if="item.applyAuditState == 3">报名完成</div>
                  <div class="status error" v-if="item.applyAuditState == -1">审核不通过</div>
                  <h3>{{ item.applyWorkTypeName }}</h3>
                  <table>
  <!--                  <tr>-->
  <!--                    <td width="10%">证件类型:</td>-->
  <!--                    <td width="40%">{{ item.applyCardTypeName }}</td>-->
  <!--                    <td width="10%">证件号码:</td>-->
  <!--                    <td width="40%">{{ item.applyCardNumber }}</td>-->
  <!--                  </tr>-->
                    <tr>
                      <td width="10%">培训机构:</td>
                      <td width="40%">{{ item.applyInstitutionName }}</td>
                      <td width="10%">报名时间：</td>
                      <td width="40%">{{ item.gmtCreate }}</td>
                    </tr>
                    <tr>
                      <td width="10%">负责人:</td>
                      <td width="40%">{{ item.orgCharge }}</td>
                      <td width="10%">联系电话：</td>
                      <td width="40%">{{ item.orgTel }}</td>
                    </tr>
                    <tr>
                      <td colspan="4">预计开班人数 - <span class="count type1">{{ item.applyUserNum1 }}人</span>| 已报名人数 - <span class="count type2">{{ item.applyUserNum2 }}人</span>| 已通过审核人数 - <span class="count type3">{{ item.applyUserNum3 }}人</span></td>
                    </tr>
                    <tr>
                      <td>操　　作:</td>
                      <td colspan="3">
                        <button v-if="item.applyAuditState == 0 || item.applyAuditState == -1 || item.applyAuditState == 1" @click="checkSigned(item.applyId, true, item.applyParentWorkTypeId)" class="operation-btn">更正信息</button>
                        <button v-if="item.applyAuditState == 0" @click="checkRecord(item.applyId)" class="operation-btn">审核记录</button>
                        <button v-if="item.applyAuditState == 0" @click="cancelSign(item.applyId)" class="operation-btn">取消报名</button>
<!--                        <button v-if="item.applyAuditState == -1 || item.applyAuditState == 1" @click="checkSigned(item.applyId, true, item.applyParentWorkTypeId)" class="operation-btn">重新报名</button>-->
  <!--                      <button @click="showScoreBox(item.applyInstitutionId)">培训评价</button>-->
                      </td>
                    </tr>
                  </table>
                </div>
                <!--                <div class="signed-right">-->
                <!--                  <h3>操作</h3>-->
                <!--                  -->
                <!--                </div>-->
              </div>
              <div class="pager" v-if="page.totalPage > 1">
              <span @click="paging(1)">首页</span>
              <span @click="paging(page.page - 1)" v-if="page.page > 1">上一页</span>
              <ul v-if="page.totalPage > 0 && page.totalPage <= 5">
                <li v-for="cpage in page.totalPage" :class="{'active': page.page == cpage}" :key="cpage" @click="paging(cpage)">
                  {{cpage}}
                </li>
              </ul>
              <ul v-if="page.totalPage > 5">
                <li v-if="page.page < 3" v-for="cpage in 5" :class="{'active': page.page == cpage}" :key="cpage" @click="paging(cpage)">
                  {{cpage}}
                </li>
                <li v-if="page.page > page.totalPage - 2" v-for="cpage in 5" :class="{'active': page.page == (page.totalPage - 5 + cpage)}" :key="cpage" @click="paging(page.totalPage - 5 + cpage)">
                  {{page.totalPage - 5 + cpage}}
                </li>
                <li v-if="page.page >= 3 && page.page <= page.totalPage - 2" v-for="cpage in 5" :class="{'active': page.page == (page.page - (3 - cpage))}" :key="cpage" @click="paging(page.page - (3 - cpage))">
                  {{page.page - (3 - cpage)}}
                </li>
              </ul>
              <span @click="paging(page.page + 1)" v-if="page.page < page.totalPage">下一页</span>
              <span @click="paging(page.totalPage)">尾页</span>
            </div>
            </div>
            <div class="no-data" v-else>
              <img src="@/assets/images/no-data.png" alt="">
            </div>
          </div>
          <!--报名详情-->
          <div class="sign-info" v-else>
            <table>
              <colgroup>
                <col width="10%">
                <col width="40%">
                <col width="10%">
                <col width="40%">
              </colgroup>
              <tr>
                <td width="10%">照片</td>
                <td width="40%">
                  <img :src="personUrl + 'route/file/download/true/' + signedInfo.applyUserCardPhoto" alt="" style="width: 90px;height:110px;margin-left: 10px" v-if="personInfo.userPhotoId">
                </td>
                <td width="10%">学历证书</td>
                <td width="40%">
                  <img :src="personUrl + 'route/file/download/true/' + signedInfo.educationPhoto" alt="" v-if="signedInfo.educationPhoto" style="max-width: 60%;margin-left:10px">
                </td>
              </tr>
              <tr>
                <td width="10%">身份证正面</td>
                <td width="40%">
                  <img :src="personUrl + 'route/file/download/true/' + signedInfo.idCardFrontPhoto" alt="" v-if="signedInfo.idCardFrontPhoto" style="max-width: 60%;margin-left:10px;height:150px;">
                </td>
                <td width="10%">身份证反面</td>
                <td width="40%">
                  <img :src="personUrl + 'route/file/download/true/' + signedInfo.idCardBackPhoto" alt="" v-if="signedInfo.idCardBackPhoto" style="max-width: 60%;margin-left:10px;height:150px;">
                </td>
              </tr>
              <tr>
                <td width="10%">培训类型</td>
                <td width="40%" style="text-indent: 15px">
                  <input type="radio" id="first" name="isFirst" v-model="signedInfo.applyFenLei" value="1" :disabled="signedInfo.isDisabled" @change="changeResignIsFirst">
                  <label for="first">初训</label>
                  <input type="radio" id="not-first" name="isFirst" v-model="signedInfo.applyFenLei" value="2" :disabled="signedInfo.isDisabled" @change="changeResignIsFirst">
                  <label for="not-first">复训</label>
                  <input type="radio" id="change" name="isFirst" v-model="signedInfo.applyFenLei" value="3" :disabled="signedInfo.isDisabled" @change="changeResignIsFirst">
                  <label for="change">换证</label>
                </td>
                <td width="10%" v-if="resignHtmlType != 'b38fe4f0-4876-4dae-a7ff-e6ee0f8b1939'"><span>*</span>培训类别</td>
                <td width="40%" style="text-indent: 15px" v-if="resignHtmlType != 'b38fe4f0-4876-4dae-a7ff-e6ee0f8b1939'">
                  <!--                      <input type="text" placeholder="例如：负责人、安全员" v-model="signInfo.applyLeiBie">-->
                  <input type="radio" id="type1" value="企业主要负责人" name="selectType" v-model="signedInfo.applyLeiBie" :disabled="signedInfo.isDisabled">
                  <label for="type1">企业主要负责人</label>
                  <input type="radio" id="type2" value="安全管理人员" name="selectType" v-model="signedInfo.applyLeiBie" :disabled="signedInfo.isDisabled">
                  <label for="type1">安全管理人员</label>
                </td>
              </tr>
              <tr v-if="signedInfo.applyFenLei == '2' || signedInfo.applyFenLei == '3'">
                <td></td>
                <td colspan="3" style="font-size: 0">
                  <p style="font-size: 16px;color:red">*复训或换证需要上传您的再培训证明照片和填报证书个人信息页</p>
                  <div style="display: inline-block;width:50%;vertical-align: top">
                    <div v-if="!signedInfo.applyTakeCardPhoto">
                      <input type="file" id="upload-page" @change="uploadTrainPhoto($event,'page', true)" :disabled="signedInfo.isDisabled">
                      <label for="upload-page" class="upload-img-btn" style="width:auto;padding: 0 10px">上传证书个人信息页</label>
                    </div>
                    <div v-else>
                      <input type="file" id="upload-page" @change="uploadTrainPhoto($event,'page', true)" :disabled="signedInfo.isDisabled">
                      <label for="upload-page">
                        <img :src="signUrl + 'route/file/download/true/' + signedInfo.applyTakeCardPhoto" alt="" style="max-width: 60%;height: 150px;">
                      </label>
                      <p style="font-size: 16px">证书个人信息页</p>
                    </div>
                  </div>
                  <div style="display: inline-block;width:50%;vertical-align: top">
                    <div v-if="!signedInfo.applyRePeiXunPhoto">
                      <input type="file" id="upload-photo" @change="uploadTrainPhoto($event,'train', true)" :disabled="signedInfo.isDisabled">
                      <label for="upload-photo" class="upload-img-btn" style="width:auto;padding: 0 10px">上传再培训证明照片</label>
                    </div>
                    <div v-else>
                      <input type="file" id="upload-photo" @change="uploadTrainPhoto($event,'train', true)" :disabled="signedInfo.isDisabled">
                      <label for="upload-photo">
                        <img :src="signUrl + 'route/file/download/true/' + signedInfo.applyRePeiXunPhoto" alt="" style="max-width: 60%;height: 150px;">
                      </label>
                      <p style="font-size: 16px">再培训证明</p>
                    </div>
                  </div>
                </td>
              </tr>
              <tr v-if="signedInfo.applyFenLei == '2' || signedInfo.applyFenLei == '3'">
                <td>取得证件时间</td>
                <td><input type="text" id="getPaperTime" placeholder="请选择取得证件时间" v-model="signedInfo.takeCardTime" autocomplete="off" :disabled="signedInfo.isDisabled"></td>
                <td>证件号码</td>
                <td><input type="text" placeholder="请输入证件号码" v-model="signedInfo.takeCardNumber" :disabled="signedInfo.isDisabled"></td>
              </tr>
              <tr v-if="signedInfo.applyFenLei == '2' || signedInfo.applyFenLei == '3'">
                <td>证件有效期</td>
                <td><input type="text" id="term" placeholder="请选择证件有效期" v-model="signedInfo.cardTimeLimit" autocomplete="off" :disabled="signedInfo.isDisabled"></td>
                <td>再培训时间</td>
                <td><input type="text" id="retrain" placeholder="请选择再培训时间" v-model="signedInfo.rePeiXunDate" autocomplete="off" :disabled="signedInfo.isDisabled"></td>
              </tr>
              <tr>
                <td width="10%">姓名</td>
                <td width="40%">
                  <input type="text" v-model="signedInfo.applyName" disabled>
                </td>
                <td width="10%">证件号码</td>
                <td width="40%">
                  <input type="text" v-model="signedInfo.applyCardNumber" :disabled="hasreCardNum">
                </td>
              </tr>
              <tr>
                <td width="10%">手机号码</td>
                <td width="40%">
                  <input type="text" v-model="signedInfo.applyPhone" disabled>
                </td>
                <td width="10%">性别</td>
                <td width="40%">
                  <select v-model="signedInfo.applySex" disabled>
                    <option value="0">请选择性别</option>
                    <option :value="item.dataId" v-for="item in sexList">{{item.dataName}}</option>
                  </select>
                </td>
              </tr>
              <tr>
                <td width="10%">工作单位</td>
                <td width="40%">
                  <input type="text" v-model="signedInfo.applyUnitName" :disabled="signedInfo.isDisabled">
                </td>
                <td width="10%" v-if="resignHtmlType != 'b38fe4f0-4876-4dae-a7ff-e6ee0f8b1939'">文化程度</td>
                <td width="40%" v-if="resignHtmlType != 'b38fe4f0-4876-4dae-a7ff-e6ee0f8b1939'">
                  <select v-model="signedInfo.applyCultureLevel" :disabled="signedInfo.isDisabled">
                    <option value="0">请选择文化程度</option>
                    <option :value="item.dataId" v-for="item in cultureList">{{item.dataName}}</option>
                  </select>
                </td>
              </tr>
              <tr v-if="resignHtmlType != 'b38fe4f0-4876-4dae-a7ff-e6ee0f8b1939'">
                <td>单位类型</td>
                <td>
                  <input type="text" v-model="signedInfo.applyUnitType" :disabled="signedInfo.isDisabled">
                </td>
                <td>职务</td>
                <td>
                  <input type="text" v-model="signedInfo.applyUnitWork" :disabled="signedInfo.isDisabled">
                </td>
              </tr>
              <tr v-if="resignHtmlType != 'b38fe4f0-4876-4dae-a7ff-e6ee0f8b1939'">
                <td>单位所在区域</td>
                <td colspan="3">
                  <input type="text" v-model="signedInfo.applyUnitBelong" style="width: 91%" :disabled="signedInfo.isDisabled">
                </td>
              </tr>
              <tr v-if="resignHtmlType != 'b38fe4f0-4876-4dae-a7ff-e6ee0f8b1939'">
                <td>毕业院校</td>
                <td>
                  <input type="text" v-model="signedInfo.applySchool" :disabled="signedInfo.isDisabled">
                </td>
                <td>所学专业</td>
                <td>
                  <input type="text" v-model="signedInfo.applySubject" :disabled="signedInfo.isDisabled">
                </td>
              </tr>
              <tr v-if="resignHtmlType != 'b38fe4f0-4876-4dae-a7ff-e6ee0f8b1939'">
                <td>职称</td>
                <td>
                  <input type="text" v-model="signedInfo.applyZhiCheng" :disabled="signedInfo.isDisabled">
                </td>
              </tr>
<!--              <tr>-->
<!--                <td>证件照片</td>-->
<!--                <td>-->
<!--                    <img :src="signUrl + 'route/file/download/true/' + signedInfo.applyUserCardPhoto" alt="" style="width: 180px;margin-left:10px;">-->
<!--                </td>-->
<!--              </tr>-->
              <tr v-if="checkingSigned && showResignBtn">
                <td colspan="4" style="text-align: center">
                  <button @click="checkingSigned = false" style="margin-top: 15px">返回</button>
                  <button @click="submitResign(signedInfo.applyId)" style="margin-top: 15px">提交更正</button>
                </td>
              </tr>
              <tr v-else>
                <td colspan="4">
                  <button @click="checkingSigned = false" style="display: block;margin: 15px auto 0">返回</button>
                </td>
              </tr>
            </table>
          </div>
        </div>
        <!--我的考试-->
        <div v-if="tab == 2">
          <h3 class="right-title">我的考试</h3>
          <div v-if="examList && examList.length > 0">
            <div class="sign-list">
              <div class="signed-box" v-for="item in examList">
                <div class="signed-left exam-left">
                  <h3>{{ item.workTypeName }}</h3>
                  <table>
                    <tr>
                      <td width="10%">考点名称:</td>
                      <td width="40%">{{ item.examPlaceName }}</td>
                      <td width="10%">考点地址:</td>
                      <td width="40%">{{ item.examPlaceAddr }}</td>
                    </tr>
                    <tr>
                      <td width="10%">负责人:</td>
                      <td width="40%">{{ item.chargePerson }}</td>
                      <td width="10%">联系电话:</td>
                      <td width="40%">{{ item.chargePersonTel }}</td>
                    </tr>
                    <tr>
                      <td width="10%">考试时间:</td>
                      <td width="40%" colspan="3">{{ item.startTime }} 至 {{ item.endTime }}</td>
                    </tr>
                  </table>
                </div>
                <!--                <div class="signed-right">-->
                <!--                  <h3>操作</h3>-->
                <!--                  -->
                <!--                </div>-->
              </div>
            </div>
            <div class="pager" v-if="page.totalPage > 1">
            <span @click="paging(1)">首页</span>
            <span @click="paging(page.page - 1)" v-if="page.page > 1">上一页</span>
            <ul v-if="page.totalPage > 0 && page.totalPage <= 5">
              <li v-for="cpage in page.totalPage" :class="{'active': page.page == cpage}" :key="cpage" @click="paging(cpage)">
                {{cpage}}
              </li>
            </ul>
            <ul v-if="page.totalPage > 5">
              <li v-if="page.page < 3" v-for="cpage in 5" :class="{'active': page.page == cpage}" :key="cpage" @click="paging(cpage)">
                {{cpage}}
              </li>
              <li v-if="page.page > page.totalPage - 2" v-for="cpage in 5" :class="{'active': page.page == (page.totalPage - 5 + cpage)}" :key="cpage" @click="paging(page.totalPage - 5 + cpage)">
                {{page.totalPage - 5 + cpage}}
              </li>
              <li v-if="page.page >= 3 && page.page <= page.totalPage - 2" v-for="cpage in 5" :class="{'active': page.page == (page.page - (3 - cpage))}" :key="cpage" @click="paging(page.page - (3 - cpage))">
                {{page.page - (3 - cpage)}}
              </li>
            </ul>
            <span @click="paging(page.page + 1)" v-if="page.page < page.totalPage">下一页</span>
            <span @click="paging(page.totalPage)">尾页</span>
          </div>
          </div>
          <div class="no-data" v-else>
            <img src="@/assets/images/no-data.png" alt="">
          </div>
        </div>
        <!--我的成绩-->
        <div v-if="tab == 3">
          <h3 class="right-title" >我的成绩</h3>
          <div class="sign-list" v-if="achievementList && achievementList.length > 0">
            <div class="signed-box" v-for="item in achievementList">
              <div class="signed-left train-left">
                <h3>{{ item.classPlanDTO.workerCatalogName }}</h3>
                <table>
                  <tr>
                    <td width="10%">考试时间:</td>
                    <td width="90%">{{ item.examStartTime }} 至 {{ item.examEndTime }}</td>
                  </tr>
                  <tr>
                    <td width="10%">成　　绩:</td>
                    <td width="90%">{{ item.examGrade }}</td>
                  </tr>
                </table>
              </div>
              <!--                <div class="signed-right">-->
              <!--                  <h3>操作</h3>-->
              <!--                  -->
              <!--                </div>-->
            </div>
            <div class="pager" v-if="page.totalPage > 1">
              <span @click="paging(1)">首页</span>
              <span @click="paging(page.page - 1)" v-if="page.page > 1">上一页</span>
              <ul v-if="page.totalPage > 0 && page.totalPage <= 5">
                <li v-for="cpage in page.totalPage" :class="{'active': page.page == cpage}" :key="cpage" @click="paging(cpage)">
                  {{cpage}}
                </li>
              </ul>
              <ul v-if="page.totalPage > 5">
                <li v-if="page.page < 3" v-for="cpage in 5" :class="{'active': page.page == cpage}" :key="cpage" @click="paging(cpage)">
                  {{cpage}}
                </li>
                <li v-if="page.page > page.totalPage - 2" v-for="cpage in 5" :class="{'active': page.page == (page.totalPage - 5 + cpage)}" :key="cpage" @click="paging(page.totalPage - 5 + cpage)">
                  {{page.totalPage - 5 + cpage}}
                </li>
                <li v-if="page.page >= 3 && page.page <= page.totalPage - 2" v-for="cpage in 5" :class="{'active': page.page == (page.page - (3 - cpage))}" :key="cpage" @click="paging(page.page - (3 - cpage))">
                  {{page.page - (3 - cpage)}}
                </li>
              </ul>
              <span @click="paging(page.page + 1)" v-if="page.page < page.totalPage">下一页</span>
              <span @click="paging(page.totalPage)">尾页</span>
            </div>
          </div>
          <div class="no-data" v-else>
            <img src="@/assets/images/no-data.png" alt="">
          </div>
        </div>
        <!--我的证书-->
        <div v-if="tab == 4">
          <div class="my-certificate">
            <a href="http://cx.mem.gov.cn/" target="_blank">
              <img src="@/assets/images/btn_hr1.png" alt="">
            </a>
          </div>
          <div class="my-certificate">
            <a href="http://cx.mem.gov.cn/" target="_blank">
              <img src="@/assets/images/btn_hr2.png" alt="">
            </a>
          </div>
          <div class="my-certificate">
            <a href="http://cx.mem.gov.cn/" target="_blank">
              <img src="@/assets/images/btn_general.png" alt="">
            </a>
          </div>
          <div class="my-certificate">
            <a href="http://cx.mem.gov.cn/" target="_blank">
              <img src="@/assets/images/btn_safe.png" alt="">
            </a>
          </div>
        </div>
        <!--我的培训-->
        <div v-if="tab == 5">
          <h3 class="right-title" >我的培训</h3>
          <div class="sign-list" v-if="myTrainList && myTrainList.length > 0">
            <div class="signed-box" v-for="item in myTrainList">
              <div class="signed-left train-left">
                <h3>{{ item.classPlanName }}</h3>
                <table>
                  <tr>
                    <td width="10%">培训机构:</td>
                    <td width="40%">{{ item.orgName }}</td>
                    <td width="10%">培训时间:</td>
                    <td width="40%">{{ item.planStartTime }} 至 {{ item.planEndTime }}</td>
                  </tr>
                  <tr>
                    <td width="10%">报名工种:</td>
                    <td width="40%">{{ item.workTypeName }}</td>
                    <td width="10%">报名人数:</td>
                    <td width="40%">{{ item.userCounts }}人</td>
                  </tr>
                  <tr>
                    <td width="10%">负责人:</td>
                    <td width="40%">{{ item.chargePerson }}</td>
                    <td>联系电话:</td>
                    <td>{{ item.chargePersonTel }}</td>
                  </tr>
                  <tr>
                    <td width="10%">培训地址:</td>
                    <td width="40%">{{ item.planAddress }}</td>

                  </tr>
                  <tr>
                    <td>操　　作:</td>
                    <td colspan="3">
                      <button @click="showScoreBox(item.orgId, item.classPlanId)">培训评价</button>
                    </td>
                  </tr>
                </table>
              </div>
              <!--                <div class="signed-right">-->
              <!--                  <h3>操作</h3>-->
              <!--                  -->
              <!--                </div>-->
            </div>
            <div class="pager" v-if="page.totalPage > 1">
              <span @click="paging(1)">首页</span>
              <span @click="paging(page.page - 1)" v-if="page.page > 1">上一页</span>
              <ul v-if="page.totalPage > 0 && page.totalPage <= 5">
                <li v-for="cpage in page.totalPage" :class="{'active': page.page == cpage}" :key="cpage" @click="paging(cpage)">
                  {{cpage}}
                </li>
              </ul>
              <ul v-if="page.totalPage > 5">
                <li v-if="page.page < 3" v-for="cpage in 5" :class="{'active': page.page == cpage}" :key="cpage" @click="paging(cpage)">
                  {{cpage}}
                </li>
                <li v-if="page.page > page.totalPage - 2" v-for="cpage in 5" :class="{'active': page.page == (page.totalPage - 5 + cpage)}" :key="cpage" @click="paging(page.totalPage - 5 + cpage)">
                  {{page.totalPage - 5 + cpage}}
                </li>
                <li v-if="page.page >= 3 && page.page <= page.totalPage - 2" v-for="cpage in 5" :class="{'active': page.page == (page.page - (3 - cpage))}" :key="cpage" @click="paging(page.page - (3 - cpage))">
                  {{page.page - (3 - cpage)}}
                </li>
              </ul>
              <span @click="paging(page.page + 1)" v-if="page.page < page.totalPage">下一页</span>
              <span @click="paging(page.totalPage)">尾页</span>
            </div>
          </div>
          <div class="no-data" v-else>
            <img src="@/assets/images/no-data.png" alt="">
          </div>
        </div>
        <!--个人资料-->
        <div v-if="tab == 7">
          <h3 class="right-title">个人资料</h3>
          <div class="person-info">
            <table>
              <tr>
                <td width="10%"><span>*</span>真实姓名</td>
                <td width="40%">
                  <input type="text" v-model="personInfo.fullName" placeholder="请输入真实姓名">
                </td>
                <td width="10%"><span>*</span>性别</td>
                <td width="40%">
                  <select v-model="personInfo.gender">
                    <option value="0">请选择性别</option>
                    <option :value="item.dataId" v-for="item in sexList">{{item.dataName}}</option>
                  </select>
                </td>
              </tr>
              <tr>
                <td><span>*</span>身份证号码</td>
                <td>
                  <input type="text" v-model="personInfo.idCardNumber" placeholder="请输入证件号码">
                </td>
                <td width="10%"><span>*</span>文化程度</td>
                <td width="40%">
                  <select v-model="personInfo.education">
                    <option value="0">请选择文化程度</option>
                    <option value="51b03a8b-413e-4cd8-adbd-7fd2a75f74ab">博士研究生毕业</option>
                    <option value="f0edbc2f-8e65-4126-a748-6783e8099512">硕士研究生毕业</option>
                    <option value="2c3f1d75-52e3-4ffd-be8e-723bed8b025c">研究生班毕业</option>
                    <option value="a19e18eb-e1fe-4980-a006-e0231e50b2ec">大学本科毕业</option>
                    <option value="80664312-b898-43ea-b082-5c5245118e87">大学专科毕业</option>
                    <option value="b449dcca-4213-46a7-a5bf-41d551abfb71">中等专科毕业</option>
                    <option value="079184ba-a527-47bd-aaeb-866b301a8e18">职业高中毕业</option>
                    <option value="4a5519ec-3b95-491d-b544-83f726e096f4">技工学校毕业</option>
                    <option value="347bdaba-956b-48c6-a406-301788632c8e">普通高中毕业</option>
                    <option value="6f5031bd-5cc9-47b5-b82d-bc7e64cfe081">初中毕业</option>
                  </select>
                </td>
              </tr>
              <tr>
                <td><span>*</span>联系电话</td>
                <td>
                  <input type="text" v-model="personInfo.telephone" placeholder="请输入联系电话">
                </td>
                <td><span>*</span>头像</td>
                <td>
                  <input type="file" id="upload-avatar" @change="uploadAvatar($event)">
                  <img :src="personUrl + 'route/file/download/true/' + personInfo.userPhotoId" alt="" style="width: 90px;height:110px;margin-right: 10px" v-if="personInfo.userPhotoId">
                  <img src="@/assets/images/default-avatar.jpg" alt="" style="width: 150px;height:150px;margin-right: 10px" v-else>
                  <label for="upload-avatar" title="点击上传">
                    <img src="@/assets/images/add.png" alt="">
                  </label>
                </td>
              </tr>
              <tr>
                <td><span>*</span>身份证双面</td>
                <td colspan="3" style="font-size: 0">
                  <div class="id-card-box">
                    <input type="file" id="idcard-z" @change="uploadIdCard($event,'z')">
                    <label for="idcard-z">上传身份证正面</label>
                    <img :src="personUrl + 'route/file/download/true/' + personInfo.idCardFront" alt="" v-if="personInfo.idCardFront">
                  </div>
                  <div class="id-card-box">
                    <input type="file" id="idcard-f" @change="uploadIdCard($event,'f')">
                    <label for="idcard-f">上传身份证反面</label>
                    <img :src="personUrl + 'route/file/download/true/' + personInfo.idCardBack" alt="" v-if="personInfo.idCardBack">
                  </div>
                </td>
              </tr>
              <tr>
                <td><span>*</span>学历证书</td>
                <td colspan="3">
                  <div class="id-card-box">
                    <input type="file" id="culture" @change="uploadIdCard($event,'c')">
                    <label for="culture">上传学历证书</label>
                    <img :src="personUrl + 'route/file/download/true/' + personInfo.educationPhoto" alt="" v-if="personInfo.educationPhoto">
                  </div>
                </td>
              </tr>
              <tr>
                <td colspan="4">
                  <button class="submit-btn" @click="savePersonInfo">保存</button>
                </td>
              </tr>
            </table>
          </div>
        </div>
      </div>
    </div>
    <div class="footer">
      <p>版权所有：包头市应急管理局</p>
      <p>办公地址：包头市应急管理局</p>
      <p>联系电话：0472-5222813</p>
    </div>
    <div class="examine-record" v-if="showRecord">
      <div class="record">
        <div class="record-title">
          审核记录
          <a href="javascript: void(0);" @click="showRecord = false">
            <img src="@/assets/images/close.png" alt="">
          </a>
        </div>
        <div class="record-box" v-for="item in handleRecordList">
          <div class="record-time">{{ item.applyAuditTime }}</div>
          <table>
            <tr>
              <th width="15%">操作人</th>
              <th width="25%">操作结果</th>
              <th width="60%">操作说明</th>
            </tr>
            <tr>
              <td>{{ item.applyAuditUserName }}</td>
              <td>
                <span v-if="item.applyAuditState == -1">审核不通过</span>
                <span v-if="item.applyAuditState == 2">审核通过</span>
                <span v-if="item.applyAuditState == 4">报名完成</span>
              </td>
              <td>{{ item.applyAuditStateName }}</td>
            </tr>
          </table>
        </div>
      </div>
    </div>
    <div class="loading" v-if="isLoading">
      <img src="@/assets/images/loading.gif" alt="">
    </div>
    <div class="org-detail" v-if="showOrgDetail">
      <div class="org-detail-box" v-if="!showOrgMap">
        <table>
          <tr>
            <td width="15%">机构名称</td>
            <td width="35%"><span>{{orgDetail.institutionName}}</span></td>
            <td width="15%">机构地址</td>
            <td width="36%"><span>{{orgDetail.institutionAddress}}</span></td>
          </tr>
          <tr>
            <td>报名工种</td>
            <td colspan="3">{{orgDetail.workTypeName}}</td>
          </tr>
          <tr>
            <td>机构简介</td>
            <td colspan="3">{{ orgDetail.institutionDesc }}</td>
          </tr>
          <tr>
            <td colspan="4" style="text-align: left">符合开班人数 - <span class="count type1">{{ orgDetail.applyUserNum1 }}人</span>| 已报名人数 - <span class="count type2">{{ orgDetail.applyUserNum2 }}人</span>| 已通过审核人数 - <span class="count type3">{{ orgDetail.applyUserNum3 }}人</span></td>
          </tr>
          <tr>
            <td>负责人</td>
            <td>{{ orgDetail.institutionPrincipal }}</td>
            <td>联系方式</td>
            <td>{{ orgDetail.institutionContact }}</td>
          </tr>
          <tr>
            <td colspan="4" style="vertical-align: middle;line-height: 150px;text-align: left">
              <img :src="signUrl + 'route/file/download/true/' + orgDetail.qrCode" alt="">
              扫描二维码添加客服人员
            </td>
          </tr>
        </table>
        <div class="detail-btn">
          <button @click="signOrg('', orgDetail.institutionId, '')" v-if="orgDetail.applyStatus == 'applyTrue'">报名</button>
          <button v-else-if="orgDetail.applyStatus == 'applyFalse'" class="signed">已报名</button>
          <button v-else class="signed">当前机构不能报名</button>
          <button @click="closeOrgDetail" class="close">关闭</button>
        </div>
      </div>
      <div class="org-detail-box" v-else>
        <div class="map" id="map" style="width: 100%;height: 400px;"></div>
        <div class="detail-btn">
          <button @click="closeOrgMap">关闭</button>
        </div>
      </div>
    </div>
    <div class="promise-container" v-if="isPromising">
      <div class="promise-box">
        <div class="promise-content" v-html="promiseText"></div>
        <button @click="isPromising = false">关闭</button>
      </div>
    </div>
    <div class="score" v-if="showScore">
      <div class="score-box">
        <h3>培训评价</h3>
        <div class="score-container">
          <div class="score-list">
            <p>1.您对该培训机构是否满意</p>
            <span @click="scoreInfo.appraiseLevel = 1" :class="{on: scoreInfo.appraiseLevel >= 1}"></span>
            <span @click="scoreInfo.appraiseLevel = 2" :class="{on: scoreInfo.appraiseLevel >= 2}"></span>
            <span @click="scoreInfo.appraiseLevel = 3" :class="{on: scoreInfo.appraiseLevel >= 3}"></span>
            <span @click="scoreInfo.appraiseLevel = 4" :class="{on: scoreInfo.appraiseLevel >= 4}"></span>
            <span @click="scoreInfo.appraiseLevel = 5" :class="{on: scoreInfo.appraiseLevel >= 5}"></span>
          </div>
          <div class="score-list" v-for="item in teacherList">
            <p>2.您对 <em>{{item.teacherName}}</em> 的 <em>{{item.lessonName}}</em> 课程是否满意</p>
            <span @click="item.appraiseLevel = 1" :class="{on: item.appraiseLevel >= 1}"></span>
            <span @click="item.appraiseLevel = 2" :class="{on: item.appraiseLevel >= 2}"></span>
            <span @click="item.appraiseLevel = 3" :class="{on: item.appraiseLevel >= 3}"></span>
            <span @click="item.appraiseLevel = 4" :class="{on: item.appraiseLevel >= 4}"></span>
            <span @click="item.appraiseLevel = 5" :class="{on: item.appraiseLevel >= 5}"></span>
          </div>
        </div>
        <div class="score-btn">
          <button @click="submitAppraise">提交</button>
          <button @click="hideScore">关闭</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import layer from 'vue-layer'
import axios from "axios"
import url from '@/assets/public/url'
import downloadjs from 'downloadjs'
export default {
  name: 'PersonCenter',
  components: {},
  data () {
    return {
      tab: 0,
      signStep: 0,
      isPromising: false,
      tab6Content: 1,
      url: url.loginUrl,
      signUrl: url.signUrl,
      token: window.sessionStorage.getItem('token'),
      userInfo: {},
      workTypeParentId: '0',
      workType: [],
      workSelectedType: 0,
      workTypeLv1: [],
      workSelectedTypeLv1: 0,
      workTypeLv2: [],
      workSelectedTypeLv2: 0,
      workTypeResult: '',
      promiseText: '',
      paperTypeList: [],
      sexList: [],
      cultureList: [],
      healthyList: [],
      signInfo: {
        applyInstitutionId: '',
        applyWorkTypeId: '',
        applyName: '',
        applyCardType: 'b7d74045-d984-4822-b0f3-711b15b933ca',
        applyCardNumber: '',
        applyPhone: '',
        applySex: 0,
        applyUserCardPhoto: '',
        applyCultureLevel: 0,
        applyFenLei: '1',
        applyRePeiXunPhoto: '',
        applyTakeCardPhoto:'',
        idCardFrontPhoto: '',
        idCardBackPhoto: '',
        educationPhoto: '',
        takeCardTime: '',
        takeCardNumber: '',
        cardTimeLimit: '',
        rePeiXunDate: '',
        applyHealth: '',
        applyUnitName: '',
        applyLeiBie: '企业主要负责人',
        applyUnitType: '',
        applyUnitWork: '',
        applyUnitBelong: '',
        applySchool: '',
        applySubject: '',
        applyZhiCheng: ''
      },
      previewPhoto: '',
      page: {
        page: 1,
        rows: 10,
        totalPage: 1
      },
      orgList: [],
      myApplyList: [],
      showRecord: false,
      handleRecordList: [],
      checkingSigned: false,
      showResignBtn: false,
      signedInfo: {},
      personUrl: url.personInfoUrl,
      examList: [],
      personInfo: {},
      nationList: [],
      politicalList: [],
      isLoading: false,
      orgKeywords: '',
      bindUserAccount: '',
      isSignSuccess: false,
      hasCardNum: false,
      hasreCardNum: true,
      achievementList: [],
      orgDetail: {},
      showOrgDetail: false,
      showOrgMap: false,
      curOrg: '',
      readPromise: false,
      isExamApply: false,
      examPlanList: [],
      curExamPlanId: '',
      showScore: false,
      scoreInfo: {
        orgId: '',
        appraiseLevel: 0,
        classPlanId: ''
      },
      myTrainList: [],
      teacherList: [],
      htmlTypeId: '',
      resignHtmlType: ''
    }
  },
  methods: {
    // 切换左侧菜单
    changeTab: function (tab, isExam) {
      var self = this
      if (this.bindUserAccount) {
        this.tab = tab
        this.page.page = 1
        this.page.totalPage = 1
        if (tab == 0) {
          if (isExam) {
            self.isExamApply = true
          } else {
            self.isExamApply = false
          }
          self.signStep = 0
          self.workTypeLv1 = []
          self.workSelectedTypeLv1 = 0
          self.workSelectedType = 0
          self.isSignSuccess = false
        }
        if (tab == 1) {
          this.getMyApply()
          this.checkingSigned = false
        } else if (tab == 2) {
          this.getExamList()
        } else if (tab == 7) {
          this.getPersonInfo()
          this.$nextTick(function () {
            laydate.render({
              elem: "#birthday",
              type: 'date',
              done: function (value) {
                self.personInfo.birthDate = value
              }
            });
          })
        } else if (tab == 3) {
          this.getAchievement()
        } else if (tab == 5) {
          this.getMyTrain()
        }
      } else {
        this.$layer.msg('请先完善个人信息')
      }
    },
    // 是否为初训
    changeIsFirst: function () {
      var self = this
      if (this.signInfo.applyFenLei != '1') {
        this.$nextTick(function () {
          laydate.render({
            elem: "#getPaperTime",
            type: 'date',
            done: function (value) {
              self.signInfo.takeCardTime = value
            }
          });
          laydate.render({
            elem: "#term",
            type: 'date',
            done: function (value) {
              self.signInfo.cardTimeLimit = value
            }
          });
          laydate.render({
            elem: "#review",
            type: 'date',
            done: function (value) {
              self.signInfo.rePeiXunDate = value
            }
          });
          laydate.render({
            elem: "#retrain",
            type: 'date',
            done: function (value) {
              self.signInfo.rePeiXunDate = value
            }
          });
        })
      }
    },
    // 是否为初训
    changeResignIsFirst: function () {
      var self = this
      if (this.signedInfo.applyFenLei != '1') {
        this.$nextTick(function () {
          laydate.render({
            elem: "#getPaperTime",
            type: 'date',
            done: function (value) {
              self.signedInfo.takeCardTime = value
            }
          });
          laydate.render({
            elem: "#term",
            type: 'date',
            done: function (value) {
              self.signedInfo.cardTimeLimit = value
            }
          });
          laydate.render({
            elem: "#review",
            type: 'date',
            done: function (value) {
              self.signedInfo.rePeiXunDate = value
            }
          });
          laydate.render({
            elem: "#retrain",
            type: 'date',
            done: function (value) {
              self.signedInfo.rePeiXunDate = value
            }
          });
        })
      }
    },
    // 获取报名页面类型
    getHtmlType: function () {
      var self = this
      axios.get(self.personUrl + 'app/basic-user-info/get-worker-used-html', {
        params: {
          workerCatalog: self.workSelectedTypeLv1
        },
        headers: {
          token: self.token
        }
      }).then(function (res) {
        self.htmlTypeId = res.data.parentWorkerCatalog
      })
    },
    // 上传身份证两面
    uploadIdCard: function (e, type) {
      var self = this
      var file = e.target.files[0]
      var formdata = new FormData()
      var reader = new FileReader()
      reader.readAsDataURL(file)
      formdata.append('image', file)
      self.isLoading = true
      axios.post(self.signUrl + 'app/file/uploadimage', formdata, {
        headers: {
          token: self.token
        }
      }).then(function (res) {
        self.$layer.msg('上传成功')
        self.isLoading = false
        if (type == 'z') {
          self.personInfo.idCardFront = res.data.data
        } else if (type == 'f') {
          self.personInfo.idCardBack = res.data.data
        } else {
          self.personInfo.educationPhoto = res.data.data
        }
      })
    },
    // 上传复训照片
    uploadTrainPhoto: function (e,type,isRetrain) {
      var self = this
      var file = e.target.files[0]
      var formdata = new FormData()
      var reader = new FileReader()
      reader.readAsDataURL(file)
      formdata.append('image', file)
      self.isLoading = true
      axios.post(self.signUrl + 'app/file/uploadimage', formdata, {
        headers: {
          token: self.token
        }
      }).then(function (res) {
        self.$layer.msg('上传成功')
        self.isLoading = false
        if (isRetrain) {
          if (type == 'train') {
            self.signedInfo.applyRePeiXunPhoto = res.data.data
          } else {
            self.signedInfo.applyTakeCardPhoto = res.data.data
          }
          return
        }
        if (type == 'train') {
          self.signInfo.applyRePeiXunPhoto = res.data.data
        } else {
          self.signInfo.applyTakeCardPhoto = res.data.data
        }

      })
    },
    // 获取我的培训
    getMyTrain: function () {
      var self = this
      axios.get(self.signUrl + 'app/basic-user-info/list-my-class-plan', {
        params: {},
        headers: {
          token: self.token
        }
      }).then(function (res) {
        self.myTrainList = res.data
      })
    },
    // 报名考试申请-填写信息
    signExamApply: function (id, status) {
      var self = this
      if (status == '确认报名' || status == '重新报名') {
        self.curExamPlanId = id
        self.signStep++
        self.getPersonInfo(false, true)
      }
    },
    // 考试申请-确认报名
    submitExamApply: function () {
      var self = this
      var info = {
        name: self.signInfo.applyName,
        sex: self.signInfo.applySex,
        cardType: self.signInfo.applyCardType,
        cardNumber: self.signInfo.applyCardNumber,
        workUnit: self.signInfo.applyAddress,
        workTitle: self.signInfo.applyPosition,
        phone: self.signInfo.applyPhone,
        classPlanId: self.curExamPlanId,
        education: self.signInfo.applyCultureLevel,
        isFirst: self.signInfo.isFirst,
        trainPhoto: self.signInfo.applyRePeiXunPhoto,
        applyTakeCardPhoto: self.signInfo.applyTakeCardPhoto
      }
      if (!info.cardType) {
        self.$layer.msg('请选择证件类型')
        return
      }
      if (!info.cardNumber) {
        self.$layer.msg('请填写证件号码')
        return
      }
      if (!info.workUnit) {
        self.$layer.msg('请填写工作单位')
        return
      }
      if (!info.workTitle) {
        self.$layer.msg('请填写职务职称')
        return
      }
      if (!info.workTitle) {
        self.$layer.msg('请填写职务职称')
        return
      }
      axios.post(self.signUrl + 'app/applystudentsnew/save', info,{
      // axios.post('http://192.168.0.109:8070/signup/app/applystudentsnew/save', info,{
        headers: {
          token: self.token
        }
      }).then(function (res) {
        self.$layer.closeAll()
        self.$layer.msg('报名成功')
        self.isSignSuccess = true
        self.showOrgDetail = false
        // self.tab = 1
      }).catch(function (error) {
        self.$layer.closeAll()
        self.$layer.msg(error.response.data.msg)
      })
    },
    // 获取考试申请计划
    getExamPlan: function () {
      var self = this
      var type
      if (self.workSelectedTypeLv2 != 0) {
        type = self.workSelectedTypeLv2
      } else if (self.workSelectedTypeLv1 != 0) {
        type = self.workSelectedTypeLv1
      } else {
        type = self.workSelectedType
      }
      axios.get(self.signUrl + 'app/examplan/listpageexamplan', {
      // axios.get('http://192.168.0.109:8070/signup/app/examplan/listpageexamplan', {
        params: {
          applyWorkTypeId: type
        },
        headers: {
          token: self.token
        }
      }).then(function (res) {
        self.examPlanList = res.data.rows
      })
    },
    // 重新报名选择证件类型
    reselectCardType: function () {
      if (this.signedInfo.applyCardType == this.personInfo.cardType) {
        this.signedInfo.applyCardNumber = this.personInfo.idCardNumber
        this.hasreCardNum = true
      } else {
        this.signedInfo.applyCardNumber = ''
        this.hasreCardNum = false
      }
    },
    // 报名成功返回
    successBack: function () {
      // this.tab = 0
      // this.signStep = 0
      // this.isSignSuccess = false
      this.$router.go(0)
    },
    // 打开培训评价
    showScoreBox: function (orgId, planId) {
      var self = this
      self.showScore = true
      self.scoreInfo.orgId = orgId
      self.scoreInfo.classPlanId = planId
      this.getOrgAppraise()
      this.getAppraiseTeacher()
    },
    // 关闭培训评价
    hideScore: function () {
      this.showScore = false
      this.scoreInfo.appraiseLevel = 0
    },
    // 获取培训评价的培训机构
    getOrgAppraise: function () {
      var self = this
      axios.get(self.signUrl + 'app/org-appraise/get-org-appraise', {
        params: {
          orgId: self.scoreInfo.orgId,
          classPlanId: self.scoreInfo.classPlanId
        },
        headers: {
          token: self.token
        }
      }).then(function (res) {
        self.scoreInfo.appraiseLevel = res.data.appraiseLevel
      })
    },
    // 提交培训评价
    submitAppraiseScore: function () {
      var self = this
      if (self.scoreInfo.appraiseLevel > 0) {
        axios.post(self.signUrl + 'app/org-appraise/save-org-appraise', self.scoreInfo,{
          headers: {
            token: self.token
          }
        }).then(function (res) {
          if (res.status == '200') {
            self.$layer.msg('评价成功！')
            self.showScore = false
            self.scoreInfo.appraiseLevel = 0
          }
        })
      } else {
        self.$layer.msg('请选择满意度！')
      }
    },
    // 获取评价老师
    getAppraiseTeacher: function () {
      var self = this
      axios.get(self.signUrl + 'app/org-appraise/list-teacher-appraise', {
        params: self.scoreInfo,
        headers: {
          token: self.token
        }
      }).then(function (res) {
        self.teacherList = res.data
      })
    },
    // 提交评价老师
    submitApprasiseTeacher: function () {
      var self = this
      axios.post(self.signUrl + 'app/org-appraise/save-teacher-appraise', {
        teacherAppraiseList: self.teacherList
      },{
        headers: {
          token: self.token
        }
      }).then(function (res) {
        if (res.status == '200') {
          self.$layer.msg('评价成功！')
          self.showScore = false
          self.scoreInfo.appraiseLevel = 0
        }
      })
    },
    // 提交评价
    submitAppraise: function () {
      this.submitAppraiseScore()
      this.submitApprasiseTeacher()
    },
    // 下一步
    nextStep: function () {
      if (this.workSelectedType == 0) {
        this.$layer.msg('请选择科目类型')
        return
      }
      if (this.workSelectedTypeLv1 == 0 && this.workTypeLv1.length > 0) {
        this.$layer.msg('请选择报名工种')
        return
      }
      this.signInfo.applyWorkTypeId = this.workSelectedTypeLv1
      this.signStep++
      if (this.isExamApply) {
        this.getExamPlan()
      } else {
        this.getOrgList()
      }
      // this.getPersonInfo(true)
      // if (this.signStep == 1) {
      //   this.isPromising = true
      // }
    },
    // 同意承诺说明
    agree: function () {
      var self = this
      this.isPromising = false
      // this.signStep++
      this.getOrgList()

    },
    // 报名-填写信息
    signOrg: function (planId, orgId, name) {
      var self = this
      self.curOrg = orgId
      self.signStep++
      self.signInfo.applyInstitutionId = orgId
      this.getPersonInfo(true)
      this.getPapersType()
      this.getSex()
      this.getCulture()
      this.getHealthy()
      this.$nextTick(function () {
        laydate.render({
          elem: "#birth",
          type: 'date',
          done: function (value) {
            self.signInfo.applyDataBirth = value
          }
        });
      })
    },
    // 确认报名
    submitSignOrg: function () {
      var self = this
      if (self.readPromise) {
        var type
        if (self.workSelectedTypeLv2 != 0) {
          type = self.workSelectedTypeLv2
        } else if (self.workSelectedTypeLv1 != 0) {
          type = self.workSelectedTypeLv1
        } else {
          type = self.workSelectedType
        }

        var info = self.signInfo
        info['applyInstitutionId'] = self.curOrg
        info['applyWorkTypeId'] = type
        info['bindUserAccount'] = self.bindUserAccount
        info.applyUserCardPhoto = self.personInfo.userPhotoId
        if (info.applyFenLei != '1' && !info.takeCardTime) {
          self.$layer.msg('请选择取得证件时间')
          return
        }
        if (info.applyFenLei != '1' && !info.takeCardNumber) {
          self.$layer.msg('证件号码不能为空！')
          return
        }
        if (info.applyFenLei != '1' && !info.cardTimeLimit && self.htmlTypeId == '530279c5-32a9-44db-bbf0-a04ef1cdae66' ) {
          self.$layer.msg('请选择证件有效期！')
          return
        }
        // if (info.applyFenLei != '1' && !info.rePeiXunDate && self.htmlTypeId == '530279c5-32a9-44db-bbf0-a04ef1cdae66') {
        //   self.$layer.msg('请选择再培训时间！')
        //   return
        // }
        if (!self.signInfo.applyCardNumber) {
          self.$layer.msg('身份证号不能为空！')
          return
        }
        if (!self.signInfo.applyUnitName) {
          self.$layer.msg('工作单位不能为空！')
          return
        }
        if (self.htmlTypeId == '530279c5-32a9-44db-bbf0-a04ef1cdae66') {
          if (!self.signInfo.applyLeiBie) {
            self.$layer.msg('培训类别不能为空！')
            return
          }
          if (!self.signInfo.applyUnitType) {
            self.$layer.msg('单位类型不能为空！')
            return
          }
          if (!self.signInfo.applyUnitWork) {
            self.$layer.msg('职务不能为空！')
            return
          }
          if (!self.signInfo.applyUnitBelong) {
            self.$layer.msg('单位所在区域不能为空！')
            return
          }
          if (!self.signInfo.applySchool) {
            self.$layer.msg('毕业院校不能为空！')
            return
          }
          if (!self.signInfo.applySubject) {
            self.$layer.msg('所学专业不能为空！')
            return
          }
          if (!self.signInfo.applyZhiCheng) {
            self.$layer.msg('职称不能为空！')
            return
          }
        }
        axios.post(self.signUrl + 'app/apply/save', info, {
          headers: {
            token: self.token
          }
        }).then(function (res) {
          self.$layer.closeAll()
          self.$layer.msg('报名成功')
          self.isSignSuccess = true
          self.showOrgDetail = false
          // self.tab = 1
        }).catch(function (error) {
          self.$layer.closeAll()
          self.$layer.msg(error.response.data.msg)
        })
      } else {
        self.$layer.msg('请先阅读承诺告知书')
      }
    },
    // 获取个人信息
    getUserInfo: function () {
      var self = this
      axios.get(self.url + 'app/user/get-app-user', {
        headers: {
          token: self.token
        }
      }).then(function (res) {
        if (res.status === 200) {
          self.userInfo = res.data
        }
      })
    },
    // 退出登录
    doLogout: function () {
      var self = this
      this.$layer.open({
        content: '确认退出登录吗？',
        yes: function () {
          sessionStorage.clear()
          self.$layer.closeAll()
          self.$router.push('/')
        }
      })
    },
    // 获取工种
    getWorkType: function (lv, e, value, isFirst) {
      var self = this
      var workTypeParentId = 0
      var cur
      self.isLoading = true
      if (self.workSelectedType == 0 && !isFirst) {
        self.workTypeLv1 = []
        self.isLoading = false
      } else {
        if (lv == 0) {
          workTypeParentId = self.workSelectedType
          self.workSelectedTypeLv1 = 0
          self.workSelectedTypeLv2 = 0
          self.workTypeLv1 = []
          self.workTypeLv2 = []
        } else if (lv == 1) {
          workTypeParentId = self.workSelectedTypeLv1
          cur = e.target.selectedIndex - 1
          if (cur >= 0) {
            self.promiseText = self.workTypeLv1[cur].workTypeWrittenDocument
          }
          self.workSelectedTypeLv2 = 0
          self.workTypeLv2 = []
        }
        axios.get(self.signUrl + 'app/worktype/listByParentId', {
          params: {
            workTypeParentId: workTypeParentId
          },
          headers: {
            token: self.token
          }
        }).then(function (res) {
          if (lv == null) {
            self.workType = res.data
          } else if (lv == 0) {
            self.workTypeLv1 = res.data
          } else if (lv == 1) {
            if (cur >= 0) {
              self.workTypeLv2 = res.data
            }
          }
          self.isLoading = false
        })
      }
    },
    // 获取证件类型
    getPapersType: function () {
      var self = this
      axios.get(self.signUrl + 'app/data/listbyparentid/76c5044f-805a-4313-b1e8-79e966b97c0d', {
        headers: {
          token: self.token
        }
      }).then(function (res) {
        self.paperTypeList = res.data
      })
    },
    // 获取性别
    getSex: function () {
      var self = this
      axios.get(self.signUrl + 'app/data/listbyparentid/4ef46940-76ab-4758-b5f0-0cbc93ffc660', {
        headers: {
          token: self.token
        }
      }).then(function (res) {
        self.sexList = res.data
      })
    },
    // 获取民族
    getNation: function () {
      var self = this
      axios.get(self.signUrl + 'app/data/listbyparentid/a981579c-572b-4fd1-8e76-5d17df97f6a4', {
        headers: {
          token: self.token
        }
      }).then(function (res) {
        self.nationList = res.data
      })
    },
    // 获取政治面貌
    getPolitical: function () {
      var self = this
      axios.get(self.signUrl + 'app/data/listbyparentid/b2c96de0-3df8-41db-99b1-bc4e24ac6c24', {
        headers: {
          token: self.token
        }
      }).then(function (res) {
        self.politicalList = res.data
      })
    },
    // 获取文化程度
    getCulture: function () {
      var self = this
      axios.get(self.signUrl + 'app/data/listbyparentid/d6b9f026-6ea9-456a-b48b-0c18d502523b', {
        headers: {
          token: self.token
        }
      }).then(function (res) {
        self.cultureList = res.data
      })
    },
    // 获取身体状况
    getHealthy: function () {
      var self = this
      axios.get(self.signUrl + 'app/data/listbyparentid/e4680c90-7a1f-4f09-96c8-0c583d8031ba', {
        headers: {
          token: self.token
        }
      }).then(function (res) {
        self.healthyList = res.data
      })
    },
    // 上传照片
    uploadImg: function (e, isResign) {
      var self = this
      var file = e.target.files[0]
      var formdata = new FormData()
      var reader = new FileReader()
      reader.readAsDataURL(file)
      reader.onload = function (e) {
        self.previewPhoto = reader.result
      }
      formdata.append('image', file)
      self.isLoading = true
      axios.post(self.signUrl + 'app/file/uploadimage', formdata, {
        headers: {
          token: self.token
        }
      }).then(function (res) {
        self.$layer.msg('上传成功')
        self.isLoading = false
        if (isResign) {
          self.signedInfo.applyUserCardPhoto = res.data.data
        } else {
          self.signInfo.applyUserCardPhoto = res.data.data
        }

      })
    },
    // 填写个人信息下一步
    personInfoNext: function () {
      if (!this.signInfo.applyName) {
        this.$layer.msg('姓名不能为空')
        return
      }
      if (!this.signInfo.applyDataBirth) {
        this.$layer.msg('生日不能为空')
        return
      }
      if (!this.signInfo.applyCardNumber) {
        this.$layer.msg('证件号码不能为空')
        return
      }
      if (!this.signInfo.applyPhone) {
        this.$layer.msg('手机号不能为空')
        return
      }
      if (!this.signInfo.applyUnitName) {
        this.$layer.msg('单位名称不能为空')
        return
      }
      if (!this.signInfo.applyMajorYear) {
        this.$layer.msg('从事专业年份不能为空')
        return
      }
      if (!this.signInfo.applyPosition) {
        this.$layer.msg('职务职称不能为空')
        return
      }
      if (this.signInfo.applySex == 0) {
        this.$layer.msg('请选择性别')
        return
      }
      if (this.signInfo.applyCardType == 0) {
        this.$layer.msg('请选择证件类型')
        return
      }
      if (!this.signInfo.education) {
        this.$layer.msg('请选择文化程度')
        return
      }
      if (!this.signInfo.applyUserCardPhoto) {
        this.$layer.msg('请上传照片')
        return
      }

      this.signStep++
      // this.getOrgList()
    },
    // 获取培训结构列表
    getOrgList: function () {
      var self = this
      var catalogId
      self.isLoading = true
      if (self.workSelectedTypeLv2 != 0 && self.workTypeLv2.length> 0) {
        catalogId = self.workSelectedTypeLv2
      } else if (self.workSelectedTypeLv1 != 0 && self.workTypeLv1.length> 0) {
        catalogId = self.workSelectedTypeLv1
      } else {
        catalogId = self.workSelectedType
      }
      var info = {}
      var type
      if (self.workSelectedTypeLv2 != 0) {
        type = self.workSelectedTypeLv2
      } else if (self.workSelectedTypeLv1 != 0) {
        type = self.workSelectedTypeLv1
      } else {
        type = self.workSelectedType
      }
      info['workTypeId'] = type
      info['keywords'] = self.orgKeywords
      axios.get(self.signUrl + 'app/apply/list-apply-work-type', {
        // axios.get('http://192.168.0.120:7009/signup/app/apply/list-apply-work-type', {
        params: info,
        headers: {
          token: self.token
        }
      }).then(function (res) {
        self.isLoading = false
        // for (let i = 0; i < res.data.length; i++) {
        //   res.data[i].qrCode = 'data:image/jpg;base64,' + res.data.rows[i].qrCode
        // }
        self.orgList = res.data
      })
    },
    // 上一步
    prevStep: function () {
      this.signStep--
    },
    // 获取我的报名信息
    getMyApply: function () {
      var self = this
      self.isLoading = true
      axios.get(self.signUrl + 'app/apply/listPageMyApply', {
        // axios.get('http://192.168.0.109:8070/signup/app/apply/listPageMyApply', {
        headers: {
          token: self.token
        },
        params: self.page
      }).then(function (res) {
        self.myApplyList = res.data.rows
        self.isLoading = false
        self.page.page = res.data.page
        self.page.totalPage = Math.ceil(res.data.total / self.page.rows)
      })
    },
    // 取消报名
    cancelSign: function (id) {
      var self = this
      this.$layer.open({
        content: '确认取消报名吗？',
        yes: function () {
          axios.put(self.signUrl + 'app/apply/updateAuditStateRecall/' + id, {}, {
            headers: {
              token: self.token
            }
          }).then(function (res) {
            if (res.status == 200) {
              self.$layer.closeAll()
              self.$layer.msg('取消成功！')
              self.getMyApply()
            }
          }).catch(function (error) {
            self.$layer.msg(error.response.data.msg)
          })
        }
      })

    },
    // 分页
    paging: function (page) {
      this.page.page = page
      if (this.tab == 1) {
        this.getMyApply()
      } else if (this.tab == 0) {
        this.getOrgList()
      } else if (this.tab == 2) {
        this.getExamList()
      } else if (this.tab == 3) {
        this.getAchievement()
      }
    },
    // 查看审核记录
    checkRecord: function (id) {
      var self = this
      axios.get(self.signUrl + 'app/applyauditlog/list', {
        params: {
          applyId: id
        },
        headers: {
          token: self.token
        }
      }).then(function (res) {
        self.showRecord = true
        self.handleRecordList = res.data
      })
    },
    // 查看报名记录
    checkSigned: function (id, isResign, type) {
      var self = this
      self.resignHtmlType = type
      axios.get(self.signUrl + 'app/apply/get/'+ id, {
        headers: {
          token: self.token
        }
      }).then(function (res) {
        self.getPapersType()
        self.getHealthy()
        self.getCulture()
        self.getSex()
        self.signedInfo = res.data
        if (!isResign) {
          self.signedInfo['isDisabled'] = 1
        } else {
          self.showResignBtn = true
        }
        self.checkingSigned = true
        self.changeResignIsFirst()
      })
    },
    // 提交重新报名
    submitResign: function (id) {
      var self = this
      // if (self.signedInfo.applyFenLei != '1') {
      //   if (!self.signedInfo.applyTakeCardPhoto || !self.signedInfo.applyRePeiXunPhoto) {
      //     self.$layer.msg('请上传再培训证明和证书个人信息页照片')
      //     return
      //   }
      // }
      axios.put(self.signUrl + 'app/apply/updateapply/' + id, self.signedInfo, {
        headers: {
          token: self.token
        }
      }).then(function (res) {
        if (res.status == 200) {
          self.$layer.msg('修改成功！')
          self.checkSigned(self.signedInfo.applyId, true, self.signedInfo.applyParentWorkTypeId)
          // self.checkingSigned = false
          // self.showResignBtn = false
          self.getMyApply()
        }
      }).catch(function (error) {
        self.$layer.msg(error.response.data.msg)
        self.isLoading = false
      })
    },
    // 获取我的考试列表
    getExamList: function () {
      var self = this
      self.isLoading = true
      axios.get(self.signUrl + 'app/basic-user-info/list-my-exam', {
        // axios.get('http://192.168.0.109:8070/signup/app/basic-staff-info/list-my-exam', {
        params: {},
        headers: {
          token: self.token
        }
      }).then(function (res) {
        self.examList = res.data
        self.isLoading = false
      })
    },
    // 下载准考证
    downloadTicket: function (path) {
      downloadjs(path)
    },
    // 获取个人信息
    getPersonInfo: function (fromSign, fromExam) {
      var self = this
      self.isLaoding = true
      axios.get(self.personUrl + 'app/basic-user-info/get-basic-user-info', {
      // axios.get('http://192.168.0.109:8070/signup/app/basic-user-info/get-basic-user-info', {
        headers: {
          token: self.token
        }
      }).then(function (res) {
        if (!res.data.gender) {
          res.data.gender = 0
        }
        if (!res.data.nation) {
          res.data.nation = 0
        }
        if (!res.data.cardType) {
          res.data.cardType = 0
        }
        if (!res.data.politicalStatus) {
          res.data.politicalStatus = 0
        }
        if (!res.data.education) {
          res.data.education = 0
        }
        if (fromSign || fromExam) {
          self.signInfo.applyName = res.data.fullName
          self.signInfo.applyDataBirth = res.data.birthDate
          self.signInfo.applySex = res.data.gender
          self.signInfo.applyPhone = res.data.telephone
          self.signInfo.applyCultureLevel = res.data.education
          self.signInfo.applyAddress = res.data.workInOrgAddr
          self.signInfo.applyPosition = res.data.workJob
          self.signInfo.applyMajorYear = res.data.workingYears
          self.bindUserAccount = res.data.bindUserAccount
        }
        self.personInfo = res.data
        self.signInfo.idCardFrontPhoto = res.data.idCardFront
        self.signInfo.idCardBackPhoto = res.data.idCardBack
        self.signInfo.educationPhoto = res.data.educationPhoto
        self.signInfo.applyUserCardPhoto = res.data.userPhotoId
        self.signInfo.applyCardNumber = res.data.idCardNumber

        if (!res.data.bindUserAccount) {
          self.$layer.msg('请先完善个人信息！')
          self.tab = 7
          self.$nextTick(function () {
            laydate.render({
              elem: "#birthday",
              type: 'date',
              done: function (value) {
                self.personInfo.birthDate = value
              }
            });
          })
        } else {
          self.bindUserAccount = res.data.bindUserAccount
          // self.personInfo['isEdit'] = 0
        }
        self.isLaoding = false
      })
    },
    // 保存个人信息
    savePersonInfo: function () {
      var self = this
      if (!self.isLaoding) {
        if (!this.personInfo.fullName) {
          self.$layer.msg('姓名不能为空！')
          return
        }
        if (this.personInfo.gender == '0') {
          self.$layer.msg('请选择性别')
          return
        }
        if (!this.personInfo.idCardNumber) {
          self.$layer.msg('证件号码不能为空')
          return
        }
        if (!this.personInfo.userPhotoId) {
          self.$layer.msg('请上传头像')
          return
        }
        // if (!this.personInfo.idCardFront) {
        //   self.$layer.msg('请上传身份证正面照片')
        //   return
        // }
        // if (!this.personInfo.idCardBack) {
        //   self.$layer.msg('请上传身份证反面照片')
        //   return
        // }
        // if (!this.personInfo.educationPhoto) {
        //   self.$layer.msg('请上传学历证书照片')
        //   return
        // }
        if (!this.personInfo.telephone) {
          self.$layer.msg('联系方式不能为空')
          return
        }
        if (this.personInfo.education == '0') {
          self.$layer.msg('请选择文化程度')
          return
        }
        // if (!this.personInfo.birthDate) {
        //   self.$layer.msg('生日不能为空！')
        //   return
        // }

        // if (this.personInfo.nation == '0') {
        //   self.$layer.msg('请选择民族')
        //   return
        // }
        // if (this.personInfo.cardType == '0') {
        //   self.$layer.msg('请选择证件类型')
        //   return
        // }



        var phoneReg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/;
        if (!phoneReg.test(this.personInfo.telephone)) {
          self.$layer.msg('手机号格式不正确')
          return false;
        }
        self.isLaoding = true
        axios.post(self.personUrl + 'app/basic-user-info/save', self.personInfo, {
          // axios.post('http://192.168.0.109:8070/signup/app/basic-user-info/save', self.personInfo, {
          headers: {
            token: self.token
          }
        }).then(function (res) {
          if (res.status == 200) {
            self.$layer.msg('保存成功！')
            self.isLaoding = false
            self.getPersonInfo()
          }
        })
      }
    },
    // 上传头像
    uploadAvatar: function (e) {
      var self = this
      self.isLaoding = true
      var file = e.target.files[0]
      var formdata = new FormData()
      formdata.append('image', file)
      axios.post(self.personUrl + 'app/file/uploadimage', formdata, {
        // axios.post('http://192.168.0.109:8070/signup/app/file/uploadimage', formdata, {
        headers: {
          token: self.token
        }
      }).then(function (res) {
        self.$layer.msg('上传成功')
        self.isLaoding = false
        self.personInfo.userPhotoId = res.data.data
        // self.getPersonInfo()
      })
    },
    // 报名选择证件类型判断回填
    selectCardType: function () {
      if (this.signInfo.applyCardType == this.personInfo.cardType) {
        this.signInfo.applyCardNumber = this.personInfo.idCardNumber
        this.hasCardNum = true
      } else {
        this.signInfo.applyCardNumber = ''
        this.hasCardNum = false
      }
    },
    // 打印准考证
    print: function(img) {
      window.document.body.innerHTML = '<html><body><div><img src="'+ img +'"/></div></body></html>';
      setTimeout(function() {
        window.print();
        window.location.reload()
      }, 500);
    },
    // 获取我的成绩
    getAchievement: function () {
      var self = this
      axios.get(self.signUrl + 'app/applystudentsnew/get-grade', {
        // axios.get('http://192.168.0.13:8089/signup/app/applystudentsnew/get-grade', {
        params: self.page,
        headers: {
          token: self.token
        }
      }).then(function (res) {
        for (let i = 0; i < res.data.rows.length; i++) {
          if (!res.data.rows[i].examGrade) {
            res.data.rows[i].examGrade = '未出成绩'
          }
        }
        self.achievementList = res.data.rows
        // self.page.page = res.data.page
        // self.page.totalPage = Math.ceil(res.data.total / self.page.rows)
      })
    },
    // 查看机构详情
    checkOrgDetail: function (idx) {
      this.orgDetail = this.orgList[idx]
      this.showOrgDetail = true
    },
    // 查看机构地图
    checkMap: function (lng, lat) {
      this.showOrgDetail = true
      this.showOrgMap = true
      this.$nextTick(function () {
        var map = new BMap.Map("map");    // 创建Map实例
        map.centerAndZoom(new BMap.Point(lng,lat), 14);  // 初始化地图,设置中心点坐标和地图级别
        map.setCurrentCity("包头");          // 设置地图显示的城市 此项是必须设置的
        map.enableScrollWheelZoom(true);
        var markers = [{"lng":lng,"lat":lat}]
        function addMarker(points) {
          for(var i=0, pointsLen = points.length; i<pointsLen; i++) {
            var point = new BMap.Point(points[i].lng, points[i].lat); //将标注点转化成地图上的点
            var marker = new BMap.Marker(point); //将点转化成标注点
            map.addOverlay(marker);  //将标注点添加到地图上
          }
        }
        addMarker(markers)
      })
    },
    // 关闭机构详情
    closeOrgDetail: function () {
      this.showOrgDetail = false
    },
    // 关闭机构地图
    closeOrgMap: function () {
      this.showOrgDetail = false
      this.showOrgMap = false
    }
  },
  mounted: function () {
    if (this.$route.query.tab) {
      this.tab = this.$route.query.tab - 1
      if (this.tab == 0) {
        this.getMyApply()
      } else if (this.tab == 2) {
        this.getExamList()
      }
    }

    this.getPersonInfo()
    this.getPapersType()
    this.getCulture()
    this.getSex()
    this.getNation()
    this.getPolitical()
    this.getUserInfo()
    this.getWorkType(null,null,null,true)
    this.getHealthy()
  }
}
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
.id-card-box
  display inline-block
  vertical-align top
  width 50%
  label
    font-size 16px
    color #fff
    cursor pointer
    display inline-block
    padding 0 10px
    background #0d6ec0
    line-height 40px
    border-radius 5px
  img
    display block
    max-width 90%
    margin-top 10px
    height 150px
.no-data
  padding 150px 0
  text-align center
  img
    width 200px
.score
  position fixed
  top 0
  left 0
  right 0
  bottom 0
  background rgba(0,0,0,0.6)
  .score-box
    position absolute
    top 50%
    left 50%
    transform translate(-50%, -50%)
    padding 15px
    border-radius 10px
    background #fff
    width 600px
    h3
      font-weight normal
      text-align center
      font-size 22px
      color #000
    .score-container
      height 300px
      overflow-y auto
      .score-list
        margin-top 10px
        p
          font-size 14px
          color #000
          line-height 30px
          em
            color #0d6ec0
        span
          display inline-block
          width 20px
          height 20px
          background url("~@/assets/images/star.png") no-repeat center
          background-size 100% 100%
          cursor pointer
          &.on
            background url("~@/assets/images/star-on.png") no-repeat center
            background-size 100% 100%
    .score-btn
      text-align center
      margin-top 10px
      button
        width 100px
        height 35px
        color #fff
        font-size 16px
        background #0d6ec0
        border none
        outline none
        cursor pointer
        border-radius 5px
.promise-container
  position fixed
  top 0
  left 0
  bottom 0
  right 0
  background rgba(0,0,0,0.6)
  .promise-box
    position absolute
    top 50%
    left 50%
    transform translate(-50%, -50%)
    padding 20px
    background #fff9ec
    border-radius 5px
    width 900px
    .promise-content
      height 400px
      overflow-y auto
    button
      cursor pointer
      width 200px
      height 35px
      display block
      margin 10px auto 0
      background #11a5fa
      color #fff
      border none
      outline none
      font-size 16px
.loading
  position fixed
  top 50%
  left 50%
  transform translate(-50%, -50%)
  background rgba(255,255,255,0.6)
  padding 30px
  border-radius 10px
  box-shadow 0 0 17px #DEDEDE
.org-detail
  position fixed
  top 0
  left 0
  right 0
  bottom 0
  background rgba(0,0,0,0.6)
  .org-detail-box
    position absolute
    top 50%
    left 50%
    transform translate(-50%, -50%)
    padding 20px
    border-radius 10px
    background #fff
    width 900px
    box-sizing border-box
    table
      table-layout fixed
      width 100%
      border-collapse collapse
      td
        height 40px
        font-size 16px
        color #000
        padding 0 5px
        border 1px solid #000
        &:nth-child(odd)
          text-align center
        span
          font-weight bold
          &.count
            font-weight normal
            margin-right 10px
            &.type1
              color #4184dd
            &.type2
              color orange
            &.type3
              color green
        button
          border none
          outline none
          cursor pointer
          width 100%
          height 40px
          color #fff
          font-weight bold
          font-size 18px
          background #11a5fa
    .detail-btn
      text-align center
      margin-top 10px
      button
        width 120px
        height 40px
        color #fff
        background #11a5fa
        cursor pointer
        border none
        outline none
        font-size 16px
        &.signed
          background rgba(255,0,0,0.6)
        &.close
          background #fff
          color #333
          border 1px solid #333
.pager
  text-align center
  font-size 0
  margin-bottom 15px
  span
    display inline-block
    padding 0 15px
    line-height 30px
    color #333
    font-size 14px
    margin 0 5px
    vertical-align middle
    cursor pointer
    border 1px solid #CCCCCC
  ul
    display inline-block
    overflow hidden
    vertical-align middle
    li
      width 30px
      line-height 30px
      float left
      margin-right 10px
      cursor pointer
      text-align center
      font-size 14px
      color #333
      border 1px solid #CCCCCC
      &.active
        color: #0d6ec0
        border 1px solid #0d6ec0
        box-sizing border-box
      &:last-child
        margin 0
.container{
  position fixed
  top 0
  left 0
  right 0
  bottom 0
  background #f0f0f0
  overflow-y auto
}
.center-header
  height 110px
  padding 10px 0
  box-sizing border-box
  background url("~@/assets/images/login-head-bg.png") no-repeat top center
  .header-container
    width 1200px
    margin 0 auto
    overflow hidden
    .title
      float left
      height 60px
      line-height 60px
      font-size 34px
      color #fff
      cursor pointer
    .person-info
      float right
      a
        display inline-block
        font-size 16px
        color #fff
        margin-right 30px
        line-height 60px
        height 60px
        &.user-name
          i
            background url("~@/assets/images/icon_aggregate1.png") no-repeat left top
            background-position 0 0
            display inline-block
            width 17px
            height 20px
            vertical-align middle
            margin-right 5px
        &.back
          padding-right 30px
          border-right 1px solid #1cb0ec
          margin-right 20px
          i
            background url("~@/assets/images/icon_aggregate1.png") no-repeat left top
            background-position -20px 0
            display inline-block
            width 19px
            height 20px
            vertical-align middle
            margin-right 5px
        &.logout
          i
            background url("~@/assets/images/icon_aggregate1.png") no-repeat left top
            background-position -43px 0
            display inline-block
            width 17px
            height 16px
            vertical-align middle
            margin-right 5px
.content
  width 1200px
  margin 30px auto
  &:after
    content ''
    display block
    clear both
  .left
    width 180px
    float left
    img
      width 100%
    ul
      li
        height 45px
        margin-top 10px
        cursor pointer
        &:first-child
          background url("~@/assets/images/center-tab1.png") no-repeat
          background-size 100% 100%
          &.active
            background url("~@/assets/images/center-tab1-on.png") no-repeat
            background-size 100% 100%
        &:nth-child(2)
          background url("~@/assets/images/center-tab2.png") no-repeat
          background-size 100% 100%
          &.active
            background url("~@/assets/images/center-tab2-on.png") no-repeat
            background-size 100% 100%
        &:nth-child(3)
          background url("~@/assets/images/center-tab9.png") no-repeat
          background-size 100% 100%
          &.active
            background url("~@/assets/images/center-tab9-on.png") no-repeat
            background-size 100% 100%
        &:nth-child(4)
          background url("~@/assets/images/center-tab3.png") no-repeat
          background-size 100% 100%
          &.active
            background url("~@/assets/images/center-tab3-on.png") no-repeat
            background-size 100% 100%
        &:nth-child(5)
          background url("~@/assets/images/center-tab4.png") no-repeat
          background-size 100% 100%
          &.active
            background url("~@/assets/images/center-tab4-on.png") no-repeat
            background-size 100% 100%
        &:nth-child(6)
          background url("~@/assets/images/center-tab5.png") no-repeat
          background-size 100% 100%
          &.active
            background url("~@/assets/images/center-tab5-on.png") no-repeat
            background-size 100% 100%
        &:nth-child(7)
          background url("~@/assets/images/center-tab6.png") no-repeat
          background-size 100% 100%
          &.active
            background url("~@/assets/images/center-tab6-on.png") no-repeat
            background-size 100% 100%
  .right
    float right
    width 1000px
    min-height 650px
    padding 20px
    box-sizing border-box
    background #fff
    .right-title
      text-align center
      font-weight bold
      font-size 20px
      color #000
      margin-bottom 20px
    .process
      overflow hidden
      padding-left 130px
      .process-box
        float left
        width 60px
        text-align center
        position relative
        margin-right 150px
        &:last-child
          margin-right 0
        &:after
          content ''
          display block
          width 165px
          height 5px
          background #dcdada
          position absolute
          top 20px
          right -157px
        &:last-child
          &:after
            display none
        .process-icon
          width 45px
          height 45px
          margin 0 auto
          border-radius 50%
          background #dcdada
          .iconfont
            font-size 24px
            color #666
            line-height 45px
        .process-name
          margin-top 5px
          font-size 14px
          color #000
        &.cur
          &:after
            background #1195fa
          .process-icon
            background #1195fa
            .iconfont
              color #fff
          .process-name
            color  #1195fa
    .sign-select
      margin 40px 0 20px
      padding 0 20px
      min-height 360px
      .row
        margin-bottom 20px
        height 35px
        line-height 35px
        font-size 14px
        color #000
        select
          width 400px
          height 35px
          border #D2D2D2 1px solid
          box-sizing border-box
          outline none
          font-size 16px
          padding 0 5px
          margin-left 10px
        input
          margin-left 10px
          vertical-align middle
          margin-top -2px
        label
          cursor pointer
    .btn-box
      text-align center
      button
        width 300px
        height 40px
        border none
        outline none
        color #fff
        font-size 18px
        background #11a5fa
        cursor pointer
        font-weight bold
        &:first-child
          margin-right 30px
    .promise
      border 1px solid #000
      padding 20px
      h3
        font-size 24px
        color #444
        text-align center
        margin-bottom 20px
      .promise-content
        min-height 300px
        p
          font-size 18px
          color #444
          line-height 40px
      button
        display block
        border none
        outline none
        margin 100px auto 0
        cursor pointer
        width 300px
        height 40px
        font-size 18px
        background #11a5fa
        font-weight bold
        color #fff
    .sign-info
      margin 40px 0
      table
        table-layout fixed
        width 100%
        border-collapse separate
        border-spacing 0 10px
        td
          font-size 14px
          height 40px
          color #000
          vertical-align top
          line-height 40px
          &:nth-child(odd)
            text-align right
          span
            color red
          input[type=text], input[type=number], select
            outline none
            width 80%
            height 40px
            margin-left 10px
            border 1px solid #f0f0f0
            padding 0 5px
            box-sizing border-box
          input[type=file]
            display none
          .upload-img-btn
            display inline-block
            width 95px
            height 40px
            text-align center
            line-height 40px
            color #fff
            cursor pointer
            border-radius 2px
            margin-left 10px
            font-size 14px
            background #1E9FFF
          .example
            width 100%
            padding 10px
            box-sizing border-box
            background #f8f8f8
            text-align center
            p
              font-size 14px
              color red
              margin-bottom 5px
            img
              width 100%
          button
            display inline-block
            width 300px
            height 40px
            border none
            outline none
            background #11a5fa
            color #fff
            font-size 18px
            font-weight bold
            cursor pointer
    .search-org
      margin 40px 0 20px
      input
        width 805px
        height 40px
        border 1px solid #D2D2D2
        box-sizing border-box
        padding 0 10px
        vertical-align top
        font-size 16px
      button
        border none
        outline none
        cursor pointer
        width 150px
        height 40px
        color #fff
        font-weight bold
        font-size 18px
        background #11a5fa
        vertical-align top
    .org-list
      ul
        &:after
          content ''
          display block
          clear both
        li
          width 32%
          border 1px solid #eeeeee
          padding 15px
          box-sizing border-box
          border-radius 10px
          margin-bottom 15px
          margin-right 2%
          float left
          &:nth-child(3n)
            margin-right 0
          //&:nth-child(even)
          //  float right
          h3
            color #000
            font-weight normal
            font-size 20px
            overflow hidden
            white-space nowrap
            text-overflow ellipsis
          p
            font-size 16px
            color #333
            margin-top 5px
            .type1
              color #4184dd
            .type2
              color orange
            .type3
              color green
            &.address
              height 30px
              line-height 30px
              padding-right 30px
              position relative
              display inline-block
              white-space nowrap
              overflow hidden
              text-overflow ellipsis
              max-width 100%
              box-sizing border-box
              button
                width 30px
                height 30px
                border none
                cursor pointer
                outline none
                background url("~@/assets/images/map.png") no-repeat center
                background-size 21px 20px
                position absolute
                top 0
                right 0
          .img-btn
            &:after
              content ''
              display block
              clear both
            .img
              //float left
              //width 32%
              //height 90px
              text-align center
              position relative
              display inline-block
              vertical-align top
              margin-top 10px
              &:hover
                .hide-img-box
                  display block
              img
                //width 90px
                height 30px
                border-radius 5px
                //display block
              .hide-img-box
                width 200px
                padding 10px
                //height 150px
                position absolute
                left 50%
                top -225px
                box-shadow 0 0 10px #aaa
                display none
                background #fff
                z-index 100
                img
                  width 100%
                  height 200px
                  border-radius 0
                p
                  line-height 16px
                  margin-top 5px
            .btn
              //float right
              button
                //display block
                width 42%
                height 30px
                border none
                background #11a5fa
                cursor pointer
                border-radius 5px
                color #fff
                margin-top 10px
    .org-box
      padding 20px
      border 1px solid #b2b2b2
      border-radius 8px
      margin-bottom 20px
    .prev-btn
      display block
      margin 0 auto
      width 140px
      height 40px
      color #fff
      border none
      background #11a5fa
      outline none
      cursor pointer
      font-size 16px
    .sign-list
      margin 20px 0
      .signed-box
        overflow hidden
        box-shadow 0 0 10px #eee
        position relative
        margin-bottom 20px
        .signed-left
          width 100%
          padding 0 30px 25px
          box-sizing border-box
          position relative
          .status
            position absolute
            top 0
            left 0
            width 110px
            height 40px
            border-top-left-radius 5px
            border-bottom-right-radius 20px
            text-align center
            line-height 40px
            color #fff
            &.complete
              background #4184dd
            &.wait
              background #5bd9f0
            &.error
              background #f6704d
          h3
            font-size 18px
            color #333
            line-height 40px
            margin-left 95px

          table
            table-layout fixed
            width 100%
            td
              height 35px
              font-size 16px
              color #000
              span
                margin-right 10px
                &.type1
                  color #4184dd
                &.type2
                  color orange
                &.type3
                  color green
            button
              width 100px
              height 35px
              color #fff
              font-size 16px
              background #0d6ec0
              border none
              outline none
              cursor pointer
              border-radius 5px
        .train-left
          h3
            margin 0
            background #ffdfb0
            display inline-block
            border-top-left-radius 5px
            border-bottom-right-radius 20px
            padding 0 10px
            margin-left -30px
        .exam-left
          h3
            margin 0
            background #5bd9f0
            display inline-block
            border-top-left-radius 5px
            border-bottom-right-radius 20px
            padding 0 10px
            margin-left -30px
        .signed-right
          width 30%
          padding 0 10px
          box-sizing border-box
          height 100%
          position absolute
          top 0
          right 0
          background #f6f6f6
          padding-top 10px
          text-align center
          font-size 0
          h3
            color #000
            margin-bottom 5px
            font-weight bold
            font-size 16px
          p
            color red
            font-size 16px
          button
            width 60%
            height 30px
            background #0d6ec0
            border none
            outline none
            color #fff
            font-size 16px
            margin-top 10px
            cursor pointer
            border-radius 5px
            &.operation-btn
              width 40%
              font-size 14px
              display block
              margin 5px auto 0
    .my-certificate
      width 470px
      height 95px
      cursor pointer
      margin 0 auto 20px
      &:first-child
        margin-top 70px
      img
        width 100%
        height 100%
    .receive
      p
        font-size 16px
        color #444
        line-height 35px
    .repair
      text-align center
      button
        border none
        outline none
        width 200px
        height 60px
        cursor pointer
        font-size 30px
        color #fff
        font-weight bold
        &.repair-btn
          background #1E9FFF
          margin-right 20px
        &.change-btn
          background #FF5722
        i
          font-size 28px
    .repair-content
      table
        table-layout fixed
        width 100%
        border-collapse separate
        border-spacing 0 20px
        td
          height 40px
          font-size 16px
          color #000
          vertical-align top
          line-height 40px
          &:nth-child(odd)
            text-align right
          &:nth-child(even)
            padding-left 15px
          input[type=text], select
            width 80%
            height 40px
            border 1px solid #d2d2d2
            box-sizing border-box
            padding 0 10px
          .select-area
            width 29%
          .address
            width 92%
          textarea
            width 80%
            height 100px
            padding 10px
            box-sizing border-box
            border 1px solid #D2D2D2
          button
            display block
            margin 0 auto
            width 300px
            height 40px
            color #fff
            font-size 18px
            background #11a5fa
            cursor pointer
            border none
            outline none
          input[type=file]
            display none
          label
            margin-right 15px
            cursor pointer
            &.btn
              display inline-block
              width 130px
              height 40px
              cursor pointer
              color #fff
              font-size 16px
              background #11a5fa
              text-align center
              line-height 40px
    .record
      margin 20px 0
      .record-box
        table
          table-layout fixed
          width 100%
          border-collapse collapse
          border-spacing 0 20px
          td
            border 1px solid #D2D2D2
            padding 20px
            span
              font-size 16px
              &.repair-type
                color #1e9fff
              &.change-type
                color #ff5722
            .table-left
              float left
              width 49%
              text-align left
              p
                white-space nowrap
                overflow hidden
                text-overflow ellipsis
            .table-right
              width 49%
              float right
              text-align left
              p
                white-space nowrap
                overflow hidden
                text-overflow ellipsis
            em
              display block
            .status
              display block
              margin 10px 0
              color red
            button
              width 100px
              height 30px
              font-size 14px
              background #11a5fa
    .person-info
      margin 20px 0
      table
        table-layout fixed
        width 100%
        border-collapse separate
        border-spacing 0 20px
        td
          font-size 16px
          color #000
          height 40px
          vertical-align top
          line-height 40px
          &:nth-child(odd)
            text-align right
          &:nth-child(even)
            padding-left 15px
          input, select
            width 80%
            height 40px
            border 1px solid #D2D2D2
            padding 0 10px
            box-sizing border-box
          input[type=file]
            display none
          label
            cursor pointer
          button
            display block
            width 150px
            height 40px
            border none
            outline none
            cursor pointer
            margin 0 auto
            color #fff
            background #0d6ec0
            font-size 16px
          span
            color red
.footer
  margin-top 20px
  text-align center
  padding 20px 0
  background #fff
  min-width 1200px
  p
    font-size 16px
    color #333
    line-height 35px
.examine-record
  position fixed
  top 0
  left 0
  right 0
  bottom 0
  background rgba(0,0,0,0.6)
  .record
    position absolute
    top 50%
    left 50%
    transform translate(-50%, -50%)
    padding 10px 20px
    background #fff
    border-radius 5px
    width 750px
    .record-title
      border-bottom 1px solid #EEE
      line-height 40px
      font-size 18px
      color #333
      margin-bottom 10px
      padding-left 30px
      position relative
      a
        display block
        width 20px
        height 20px
        position absolute
        top 50%
        right 0
        margin-top -10px
        img
          width 100%
          height 100%
    .record-box
      padding-left 15px
      margin-left 15px
      border-left 1px solid #eee
      position relative
      padding-bottom 10px
      &:after
        content ''
        display block
        width 16px
        height 16px
        border-radius 50%
        border 1px solid greenorange
        position absolute
        background #fff
        top 0
        left -9px
      &:last-child
        border none
      table
        table-layout fixed
        width 100%
        margin-top 5px
        th
          background #eee
          border 1px solid #DDD
          height 40px
          padding 0 10px
        td
          height 40px
          font-size 16px
          color #000
          padding 0 10px
          border 1px solid #DDD
.ticket-container
  margin-bottom 15px
  min-height 500px
  .ticket-table
    table-layout fixed
    width 100%
    th
      text-align center
      font-size 16px
      border 1px solid #dddddd
      background #eee
      height 40px
    td
      text-align center
      font-size 16px
      height 40px
      border 1px solid #dddddd
      a
        color #0d6ec0
.success-img
  display block
  margin 150px auto 20px
  width 80px
.success-text
  text-align center
  font-size 18px
  color #333
  margin-bottom 80px
.success-btn
  width 300px
  height 40px
  border none
  outline none
  color #fff
  font-size 18px
  background #11a5fa
  cursor pointer
  font-weight bold
  display block
  margin 0 auto
</style>
