<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}" @click="changeTab(0)"></li>
            <li :class="{active: tab == 1}" @click="changeTab(1)"></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 class="promise" v-if="isPromising" >
              <div class="promise-content" v-html="promiseText"></div>
              <button @click="agree">我同意，下一步</button>
            </div>
            <div v-else>
              <h3 class="right-title" v-if="signStep == 0">网上报名-选择报考工种</h3>
              <h3 class="right-title" v-if="signStep == 1">网上报名-填写报名信息</h3>
              <h3 class="right-title" v-if="signStep == 2">网上报名-选择培训机构</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-tianxieziliao"></i>
                  </div>
                  <div class="process-name">
                    填写信息
                  </div>
                </div>
                <div class="process-box" :class="{cur: signStep > 2}">
                  <div class="process-icon">
                    <i class="iconfont icon-peixun"></i>
                  </div>
                  <div class="process-name">
                    选择培训机构
                  </div>
                </div>
                <div class="process-box" :class="{cur: signStep > 3}">
                  <div class="process-icon">
                    <i class="iconfont icon-shenhe2"></i>
                  </div>
                  <div class="process-name">
                    培训机构审核
                  </div>
                </div>
                <div class="process-box" :class="{cur: signStep > 4}">
                  <div class="process-icon">
                    <i class="iconfont icon-Sign"></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)">
                      <option value="0">请选择</option>
                      <option :value="item.workTypeId" v-for="item in workTypeLv1">{{ item.workTypeName }}</option>
                    </select>
                  </div>
                  <div class="row" v-if="workTypeLv2 && workTypeLv2.length > 0">
                    <select v-model="workSelectedTypeLv2" @change="getWorkType(2, $event)" style="margin-left: 70px">
                      <option value="0">请选择</option>
                      <option :value="item.workTypeId" v-for="item in workTypeLv2">{{ item.workTypeName }}</option>
                    </select>
                  </div>
                  <div class="row">
                    培训类型
                    <input type="radio" id="radio1" value="1" name="type" v-model="planType">
                    <label for="radio1">初训</label>
                    <input type="radio" id="radio2" value="2" name="type" v-model="planType">
                    <label for="radio2">复训</label>
                  </div>
                </div>
                <!--按钮-->
                <div class="btn-box">
<!--                  <button>查看培训列表</button>-->
                  <button @click="nextStep">下一步</button>
                </div>
              </div>
              <!--步骤2：填写报名信息-->
              <div v-if="signStep == 1 && !isSignSuccess">
                <div class="sign-info">
                  <table>
                    <tr>
                      <td width="10%">姓名</td>
                      <td width="40%">
                        <input type="text" v-model="signInfo.applyName" :disabled="personInfo.fullName">
                      </td>
                      <td width="10%">出生日期</td>
                      <td width="40%">
                        <input type="text" id="birth" v-model="signInfo.applyDataBirth" :disabled="personInfo.fullName">
                      </td>
                    </tr>
                    <tr>
                      <td width="10%">证件类型</td>
                      <td width="40%">
                        <select v-model="signInfo.applyCardType" @change="selectCardType">
                          <option value="0">请选择证件类型</option>
                          <option :value="item.dataId" v-for="item in paperTypeList">{{item.dataName}}</option>
                        </select>
                      </td>
                      <td width="10%">证件号码</td>
                      <td width="40%">
                        <input type="text" v-model="signInfo.applyCardNumber" :disabled="hasCardNum">
                      </td>
                    </tr>
                    <tr>
                      <td width="10%">手机号码</td>
                      <td width="40%">
                        <input type="text" v-model="signInfo.applyPhone" :disabled="personInfo.telephone">
                      </td>
                      <td width="10%">性别</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%">工作单位</td>
                      <td width="40%">
                        <input type="text" v-model="signInfo.applyUnitName">
                      </td>
                      <td width="10%">文化程度</td>
                      <td width="40%">
                        <select v-model="signInfo.applyCultureLevel">
                          <option value="0">请选择文化程度</option>
                          <option :value="item.dataId" v-for="item in cultureList">{{item.dataName}}</option>
                        </select>
                      </td>
                    </tr>
                    <tr>
                      <td width="10%">单位电话</td>
                      <td width="40%">
                        <input type="text" v-model="signInfo.applyUnitPhone">
                      </td>
                      <td width="10%">身体状况</td>
                      <td width="40%">
                        <select v-model="signInfo.applyPhysicalState">
                          <option value="0">请选择身体状况</option>
                          <option :value="item.dataId" v-for="item in healthyList">{{item.dataName}}</option>
                        </select>
                      </td>
                    </tr>
                    <tr>
                      <td width="10%">单位地址</td>
                      <td width="40%">
                        <input type="text" v-model="signInfo.applyUnitAddress">
                      </td>
                      <td width="10%">邮编</td>
                      <td width="40%">
                        <input type="text" v-model="signInfo.applyPostcode">
                      </td>
                    </tr>
                    <tr>
                      <td width="10%">职务</td>
                      <td width="40%">
                        <input type="text" v-model="signInfo.applyPosition">
                      </td>
                      <td width="10%" style="line-height: 20px">从事专业（年）</td>
                      <td width="40%">
                        <input type="number" v-model="signInfo.applyMajorYear">
                      </td>
                    </tr>
                    <tr>
                      <td width="10%">技术职称</td>
                      <td width="40%">
                        <input type="text" v-model="signInfo.applyTechnicalTitles">
                      </td>
                      <td width="10%">通讯地址</td>
                      <td width="40%">
                        <input type="text" v-model="signInfo.applyAddress">
                      </td>
                    </tr>
                    <tr>
                      <td width="10%">证件照片</td>
                      <td width="40%">
                        <input type="file" id="upload-img" @change="uploadImg($event)">
                        <label for="upload-img">上传照片</label>

                      </td>
                      <td width="10%"></td>
                      <td width="40%"></td>
                    </tr>
                    <tr>
                      <td width="10%"></td>
                      <td width="40%">
                        <img :src="previewPhoto" alt="" v-if="previewPhoto">
                        <div class="example" v-else>
                          <p>(照片格式说明)</p>
                          <img src="@/assets/images/example.jpg" alt="">
                        </div>
                      </td>
                      <td width="10%"></td>
                      <td width="40%"></td>
                    </tr>
                    <tr>
                      <td colspan="4" style="text-align: center">
                        <button @click="prevStep">上一步</button>
                        <button @click="personInfoNext">下一步</button>
                      </td>
                    </tr>
                  </table>
                </div>
              </div>
              <!--步骤3：选择培训机构-->
              <div v-if="signStep == 2 && !isSignSuccess">
                <div class="search-org">
                  <input type="text" placeholder="请输入名称搜索培训机构" v-model="orgKeywords" @keyup.enter="getOrgList">
                  <button @click="getOrgList">搜索</button>
                </div>
                <div class="org-list">
                  <div class="org-box" v-for="item in orgList">
                    <table>
                      <tr>
                        <td width="10%">机构名称:</td>
                        <td width="30%"><span>{{item.planName}}</span></td>
                        <td width="10%">培训地点:</td>
                        <td width="30%"><span>{{item.planAddress}}</span></td>
                        <td width="20%" rowspan="4">
                          <button @click="signOrg(item.classPlanId, item.orgId, item.planName)" v-if="item.applyClassPlanState == 0">报考</button>
                          <button v-else-if="item.applyClassPlanState == 1" style="background: #eee">已报考</button>
                        </td>
                      </tr>
                      <tr>
                        <td width="10%">报名时间:</td>
                        <td width="30%">{{ item.signUpStartTime }} <br>至<br> {{ item.signUpEndTime }}</td>
                        <td width="10%">开班人数:</td>
                        <td width="30%">{{ item.planPersonNum  }}人</td>
                      </tr>
                      <tr>
                        <td width="10%">开班时间:</td>
                        <td width="30%">{{ item.planStartTime  }} <br>至<br> {{ item.planEndTime   }}</td>
                        <td width="10%">已报名数:</td>
                        <td width="30%">{{ item.applyClassPlanUserNumber }}人</td>
                      </tr>
                      <tr>
                        <td width="10%">联系人</td>
                        <td width="30%">{{ item.chargePerson }}</td>
                        <td width="10%">联系电话:</td>
                        <td width="30%">{{ item.chargePersonTel }}</td>
                      </tr>
                    </table>
                  </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>
                <button class="prev-btn" @click="prevStep">上一步</button>
              </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 class="signed-box" v-for="item in myApplyList">
                <div class="signed-left">
                  <table>
                    <tr>
                      <td width="10%">姓　　名:</td>
                      <td width="40%">{{ item.applyName }}</td>
                      <td width="10%">培训计划:</td>
                      <td width="40%">{{ item.applyClassName }}</td>
                    </tr>
                    <tr>
                      <td>证件类型:</td>
                      <td>{{ item.applyCardTypeName }}</td>
                      <td>证件号码:</td>
                      <td>{{ item.applyCardNumber }}</td>
                    </tr>
                    <tr>
                      <td>报名时间:</td>
                      <td>2021-04-27 09:38:08</td>
                      <td>手　　机:</td>
                      <td>{{ item.applyPhone }}</td>
                    </tr>
                    <tr>
                      <td>报名情况:</td>
                      <td>
                        <p v-if="item.applyAuditState == 0">待审核</p>
                        <p v-if="item.applyAuditState == 1" style="color: red">用户撤回</p>
                        <p v-if="item.applyAuditState == 2" style="color: #00FF00">审核通过</p>
                        <p v-if="item.applyAuditState == 3" style="color: #00FF00">报名完成</p>
                        <p v-if="item.applyAuditState == -1" style="color: red">审核不通过</p>
                      </td>
                    </tr>
                    <tr>
                      <td>操　　作:</td>
                      <td colspan="3">
                        <button v-if="item.applyAuditState == 0" @click="cancelSign(item.applyId)" 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="checkSigned(item.applyId, false)" class="operation-btn">报名详情</button>
                        <button v-if="item.applyAuditState == -1 || item.applyAuditState == 1" @click="checkSigned(item.applyId, true)" class="operation-btn">重新报名</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="sign-info" v-else>
              <table>
                <tr>
                  <td width="10%">姓名</td>
                  <td width="40%">
                    <input type="text" v-model="signedInfo.applyName" :disabled="signedInfo.isDisabled">
                  </td>
                  <td width="10%">出生日期</td>
                  <td width="40%">
                    <input type="text" v-model="signedInfo.applyDataBirth" :disabled="signedInfo.isDisabled">
                  </td>
                </tr>
                <tr>
                  <td width="10%">证件类型</td>
                  <td width="40%">
                    <select v-model="signedInfo.applyCardType" :disabled="signedInfo.isDisabled">
                      <option value="0">请选择证件类型</option>
                      <option :value="item.dataId" v-for="item in paperTypeList">{{item.dataName}}</option>
                    </select>
                  </td>
                  <td width="10%">证件号码</td>
                  <td width="40%">
                    <input type="text" v-model="signedInfo.applyCardNumber" :disabled="signedInfo.isDisabled">
                  </td>
                </tr>
                <tr>
                  <td width="10%">手机号码</td>
                  <td width="40%">
                    <input type="text" v-model="signedInfo.applyPhone" :disabled="signedInfo.isDisabled">
                  </td>
                  <td width="10%">性别</td>
                  <td width="40%">
                    <select v-model="signedInfo.applySex" :disabled="signedInfo.isDisabled">
                      <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%">文化程度</td>
                  <td width="40%">
                    <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>
                  <td width="10%">单位电话</td>
                  <td width="40%">
                    <input type="text" v-model="signedInfo.applyUnitPhone" :disabled="signedInfo.isDisabled">
                  </td>
                  <td width="10%">身体状况</td>
                  <td width="40%">
                    <select v-model="signedInfo.applyPhysicalState" :disabled="signedInfo.isDisabled">
                      <option value="0">请选择身体状况</option>
                      <option :value="item.dataId" v-for="item in healthyList">{{item.dataName}}</option>
                    </select>
                  </td>
                </tr>
                <tr>
                  <td width="10%">单位地址</td>
                  <td width="40%">
                    <input type="text" v-model="signedInfo.applyUnitAddress" :disabled="signedInfo.isDisabled">
                  </td>
                  <td width="10%">邮编</td>
                  <td width="40%">
                    <input type="text" v-model="signedInfo.applyPostcode" :disabled="signedInfo.isDisabled">
                  </td>
                </tr>
                <tr>
                  <td width="10%">职务</td>
                  <td width="40%">
                    <input type="text" v-model="signedInfo.applyPosition" :disabled="signedInfo.isDisabled">
                  </td>
                  <td width="10%" style="line-height: 20px">从事专业（年）</td>
                  <td width="40%">
                    <input type="number" v-model="signedInfo.applyMajorYear" :disabled="signedInfo.isDisabled">
                  </td>
                </tr>
                <tr>
                  <td width="10%">技术职称</td>
                  <td width="40%">
                    <input type="text" v-model="signedInfo.applyTechnicalTitles" :disabled="signedInfo.isDisabled">
                  </td>
                  <td width="10%">通讯地址</td>
                  <td width="40%">
                    <input type="text" v-model="signedInfo.applyAddress" :disabled="signedInfo.isDisabled">
                  </td>
                </tr>
                <tr>
                  <td width="10%">证件照片</td>
                  <td width="40%">
                    <input type="file" id="upload-img1" @change="uploadImg($event, 1)">
                    <label for="upload-img1" style="width: auto;height: auto;">
                      <img :src="signUrl + 'route/file/download/true/' + signedInfo.applyUserCardPhoto" alt="">
                    </label>
                  </td>
                  <td width="10%"></td>
                  <td width="40%"></td>
                </tr>
                <tr>
                  <td width="10%"></td>
                  <td width="40%">
<!--                    <img :src="previewPhoto" alt="" v-if="previewPhoto">-->
                    <div class="example">
                      <p>(照片格式说明)</p>
                      <img src="@/assets/images/example.jpg" alt="">
                    </div>
                  </td>
                  <td width="10%"></td>
                  <td width="40%"></td>
                </tr>
                <tr v-if="checkingSigned && showResignBtn">
                  <td colspan="4" style="text-align: center">
                    <button @click="checkingSigned = false">返回</button>
                    <button @click="submitResign(signedInfo.applyId)">提交修改</button>
                  </td>
                </tr>
                <tr v-else>
                  <td colspan="4">
                    <button @click="checkingSigned = false" style="display: block;margin: 0 auto">返回</button>
                  </td>
                </tr>
              </table>
            </div>
          </div>
          <div v-if="tab == 2">
            <h3 class="right-title">我的考试</h3>
            <div class="ticket-container">
              <table class="ticket-table">
                <tr>
                  <th width="5%">序号</th>
                  <th width="15%">培训机构</th>
                  <th width="19%">培训计划</th>
                  <th width="13%">考试开始时间</th>
                  <th width="13%">考试结束时间</th>
                  <th width="20%">考试地点</th>
                  <th width="10%">操作</th>
                </tr>
                <tr v-for="(item,idx) in examList">
                  <td>{{ idx+1 }}</td>
                  <td>{{ item.orgName }}</td>
                  <td>{{ item.planName }}</td>
                  <td>{{ item.examTimeStart }}</td>
                  <td>{{ item.examTimeEnd }}</td>
                  <td>{{ item.examAddress }}</td>
                  <td>
<!--                    <router-link :to="{path: '/print', query: {distributionCardCode : item.distributionCardCode}}" target="_blank">打印准考证</router-link>-->
                    <a href="javascript: void(0);" @click="print(item.distributionCardCode)">打印准考证</a>
                  </td>
                </tr>
              </table>
            </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 v-if="tab == 3">
            <div class="no-data">
              暂无记录
            </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>
            <router-link to="/" tag="div" class="my-certificate">
              <img src="@/assets/images/btn_hr2.png" alt="">
            </router-link>
            <router-link to="/" tag="div" class="my-certificate">
              <img src="@/assets/images/btn_general.png" alt="">
            </router-link>
            <router-link to="/" tag="div" class="my-certificate">
              <img src="@/assets/images/btn_safe.png" alt="">
            </router-link>
          </div>
          <div v-if="tab == 5">
            <h3 class="right-title">关于包头市领取安全生产考试资格证书有关事项的通告</h3>
            <div class="receive">
              <p>根据《应急管理部办公厅关于更新安全生产知识和管理能力考核合格证、特种作业操作证式样的通知》，自2019年9月1日起对安全生产知识和管理能力考核合格证、特种作业操作证式样进行了更新。</p>
              <p>新版证书分为PVC卡实体证书和电子证书（含普通纸质打印版），电子证书与实体证书一一对应，具有同等法律效力。</p>
              <p>1.电子证书领取方式：</p>
              <p>使用手机关注官方微信公众号（国家安全生产考试，见下图），按要求注册并进行身份认证后，登录“我的证书”功能获取下载打印电子证书。</p>
              <p>2.实体证书领取方式：</p>
              <p>请到本市各自助打证终端服务点自制领取，自助打证服务地点如下：</p>
            </div>
          </div>
          <div v-if="tab == 6">
            <div class="repair" v-if="tab6Content == 1">
              <h3 class="right-title">补证及证件信息变更</h3>
              <button class="repair-btn" @click="tab6Content = 2">
                <i class="iconfont icon-xinzeng"></i>
                补证
              </button>
              <button class="change-btn" @click="tab6Content = 3">
                <i class="iconfont icon-xinzeng"></i>
                变更
              </button>
              <div class="record">
                <div class="record-box">
                  <table>
                    <tr>
                      <td width="10%">
                        <span class="repair-type">补证</span>
                      </td>
                      <td width="70%">
                        <div class="table-left">
                          <p>姓　　名: 董博</p>
                          <p>证书初领证日期: 2021-04-01</p>
                          <p>证件有效期开始: 2021-04-01</p>
                        </div>
                        <div class="table-right">
                          <p>手　　机: 19847345521</p>
                          <p>发证机关: 包头市应急管理局</p>
                          <p>证件有效期结束: 2021-04-28</p>
                        </div>
                      </td>
                      <td width="20%">
                        <em>申请情况</em>
                        <span class="status">待审核</span>
                        <button @click="tab6Content = 2">详细信息</button>
                      </td>
                    </tr>
                    <tr>
                      <td width="10%">
                        <span class="change-type">变更</span>
                      </td>
                      <td width="70%">
                        <div class="table-left">
                          <p>姓　　名: 董博</p>
                          <p>证书初领证日期: 2021-04-01</p>
                          <p>证件有效期开始: 2021-04-01</p>
                        </div>
                        <div class="table-right">
                          <p>手　　机: 19847345521</p>
                          <p>发证机关: 包头市应急管理局</p>
                          <p>证件有效期结束: 2021-04-28</p>
                        </div>
                      </td>
                      <td width="20%">
                        <em>申请情况</em>
                        <span class="status">待审核</span>
                        <button @click="tab6Content = 3">详细信息</button>
                      </td>
                    </tr>
                  </table>
                </div>
              </div>
            </div>
            <div class="repair-content" v-if="tab6Content == 2">
              <h3 class="right-title">补证</h3>
              <table>
                <colgroup>
                  <col width="15%">
                  <col width="35%">
                  <col width="15%">
                  <col width="35%">
                </colgroup>
                <tr>
                  <td><a href="javascript: void(0)" @click="tab6Content = 1">返回</a></td>
                </tr>
                <tr>
                  <td width="15%">姓名</td>
                  <td width="35%"><input type="text"></td>
                  <td width="15%">性别</td>
                  <td width="35%">
                    <select>
                      <option value="0">请选择性别</option>
                      <option value="1">男</option>
                      <option value="2">女</option>
                    </select>
                  </td>
                </tr>
                <tr>
                  <td width="15%">身份证号码</td>
                  <td width="35%"><input type="text"></td>
                  <td width="15%">联系电话</td>
                  <td width="35%"><input type="text"></td>
                </tr>
                <tr>
                  <td width="15%">证书初领证日期</td>
                  <td width="35%"><input type="text"></td>
                  <td width="15%">发证机关</td>
                  <td width="35%">
                    <select>
                      <option value="0">请选择发证机关</option>
                      <option value="1">发证机关1</option>
                      <option value="2">发证机关2</option>
                    </select>
                  </td>
                </tr>
                <tr>
                  <td width="15%">证件有效期开始</td>
                  <td width="35%"><input type="text"></td>
                  <td width="15%">证件有效期结束</td>
                  <td width="35%"><input type="text"></td>
                </tr>
                <tr>
                  <td width="15%">快递地区</td>
                  <td width="35%" colspan="3">
                    <select class="select-area">
                      <option value="1">北京</option>
                      <option value="2">内蒙古自治区</option>
                      <option value="3">吉林省</option>
                      <option value="4">辽宁省</option>
                    </select>
                    <select class="select-area">
                      <option value="1">北京</option>
                      <option value="2">内蒙古自治区</option>
                      <option value="3">吉林省</option>
                      <option value="4">辽宁省</option>
                    </select>
                    <select class="select-area">
                      <option value="1">北京</option>
                      <option value="2">内蒙古自治区</option>
                      <option value="3">吉林省</option>
                      <option value="4">辽宁省</option>
                    </select>
                  </td>
                </tr>
                <tr>
                  <td>快递详细地址</td>
                  <td colspan="3"><input type="text" class="address"></td>
                </tr>
                <tr>
                  <td width="15%">补证原因</td>
                  <td width="35%">
                    <textarea></textarea>
                  </td>
                  <td width="15%">准操项目</td>
                  <td width="35%">
                    <select>
                      <option value="0">请选择准操项目</option>
                      <option value="1">准操项目1</option>
                      <option value="2">准操项目2</option>
                      <option value="3">准操项目3</option>
                      <option value="4">准操项目4</option>
                    </select>
                  </td>
                </tr>
                <tr>
                  <td colspan="4">
                    <button>保存并上传</button>
                  </td>
                </tr>
              </table>
            </div>
            <div class="repair-content" v-if="tab6Content == 3">
              <h3 class="right-title">信息变更</h3>
              <table>
                <colgroup>
                  <col width="15%">
                  <col width="35%">
                  <col width="15%">
                  <col width="35%">
                </colgroup>
                <tr>
                  <td><a href="javascript: void(0)" @click="tab6Content = 1">返回</a></td>
                </tr>
                <tr>
                  <td>变更事项(可多选)</td>
                  <td colspan="3">
                    <input type="checkbox" id="date">
                    <label for="date">证件日期</label>
                    <input type="checkbox" id="number">
                    <label for="number">证件号码</label>
                    <input type="checkbox" id="name">
                    <label for="name">姓名</label>
                    <input type="checkbox" id="gender">
                    <label for="gender">性别</label>
                  </td>
                </tr>
                <tr>
                  <td width="15%">变更前姓名</td>
                  <td width="35%"><input type="text"></td>
                  <td width="15%">性别</td>
                  <td width="35%">
                    <select>
                      <option value="0">请选择性别</option>
                      <option value="1">男</option>
                      <option value="2">女</option>
                    </select>
                  </td>
                </tr>
                <tr>
                  <td width="15%">变更后姓名</td>
                  <td width="35%"><input type="text"></td>
                  <td width="15%">联系电话</td>
                  <td width="35%"><input type="text"></td>
                </tr>
                <tr>
                  <td width="15%">变更前身份证号码</td>
                  <td width="35%"><input type="text"></td>
                  <td width="15%">发证机关</td>
                  <td width="35%">
                    <select>
                      <option value="0">请选择发证机关</option>
                      <option value="1">发证机关1</option>
                      <option value="2">发证机关2</option>
                    </select>
                  </td>
                </tr>
                <tr>
                  <td width="15%">变更后身份证号码</td>
                  <td width="35%"><input type="text"></td>
                  <td width="15%">证件有效期结束</td>
                  <td width="35%"><input type="text"></td>
                </tr>
                <tr>
                  <td width="15%">证书初领证日期</td>
                  <td width="35%">
                    <input type="text">
                  </td>
                  <td width="15%">准操项目</td>
                  <td width="35%">
                    <select>
                      <option value="0">请选择准操项目</option>
                      <option value="1">准操项目1</option>
                      <option value="2">准操项目2</option>
                      <option value="3">准操项目3</option>
                      <option value="4">准操项目4</option>
                    </select>
                  </td>
                </tr>
                <tr>
                  <td>证件有效期开始</td>
                  <td><input type="text" class="address"></td>
                </tr>
                <tr>
                  <td width="15%">原有误信息</td>
                  <td width="35%">
                    <textarea></textarea>
                  </td>
                  <td width="15%">应修改为正确信息</td>
                  <td width="35%">
                    <textarea></textarea>
                  </td>
                </tr>
                <tr>
                  <td width="15%">变更原因</td>
                  <td width="35%">
                    <textarea></textarea>
                  </td>
                </tr>
                <tr>
                  <td>证明上传</td>
                  <td>
                    <input type="file" id="zm-file">
                    <label for="zm-file" class="btn">上传图片</label>
                  </td>
                  <td>变更原件上传</td>
                  <td>
                    <input type="file" id="yj-file">
                    <label for="yj-file" class="btn">上传图片</label>
                  </td>
                </tr>
                <tr>
                  <td colspan="4">
                    <button>保存并上传</button>
                  </td>
                </tr>
              </table>
            </div>
          </div>
          <div v-if="tab == 7">
            <h3 class="right-title">个人资料</h3>
            <div class="person-info">
              <table>
                <tr>
                  <td width="10%">真实姓名</td>
                  <td width="40%">
                    <input type="text" v-model="personInfo.fullName" :disabled="personInfo.isEdit">
                  </td>
                  <td width="10%">出生日期</td>
                  <td width="40%">
                    <input type="text" id="birthday" v-model="personInfo.birthDate">
                  </td>
                </tr>
                <tr>
                  <td>性别</td>
                  <td>
                    <select v-model="personInfo.gender">
                      <option value="0">请选择性别</option>
                      <option :value="item.dataId" v-for="item in sexList">{{item.dataName}}</option>
                    </select>
                  </td>
                  <td>民族</td>
                  <td>
                    <select v-model="personInfo.nation">
                      <option value="0">请选择民族</option>
                      <option :value="item.dataId" v-for="item in nationList">{{item.dataName}}</option>
                    </select>
                  </td>
                </tr>
                <tr>
                  <td>证件类型</td>
                  <td>
                    <select v-model="personInfo.cardType">
                      <option value="0">请选择证件类型</option>
                      <option :value="item.dataId" v-for="item in paperTypeList">{{item.dataName}}</option>
                    </select>
                  </td>
                  <td>证件号码</td>
                  <td>
                    <input type="text" v-model="personInfo.idCardNumber">
                  </td>
                </tr>
                <tr>
                  <td>联系方式</td>
                  <td>
                    <input type="text" v-model="personInfo.telephone">
                  </td>
                  <td>政治面貌</td>
                  <td>
                    <select v-model="personInfo.politicalStatus">
                      <option value="0">请选择政治面貌</option>
                      <option :value="item.dataId" v-for="item in politicalList">{{item.dataName}}</option>
                    </select>
                  </td>
                </tr>
                <tr>
                  <td>头像</td>
                  <td>
                    <input type="file" id="upload-avatar" @change="uploadAvatar($event)">
                    <label for="upload-avatar" v-if="!personInfo.userPhotoId">点击上传</label>
                    <label for="upload-avatar" v-else>
                      <img :src="personUrl + 'route/file/download/true/' + personInfo.userPhotoId" alt="">
                    </label>
                  </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>联系电话：0769-22229839</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>
</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,
          planType: '',
          promiseText: '',
          paperTypeList: [],
          sexList: [],
          cultureList: [],
          healthyList: [],
          signInfo: {
            applyName: '',
            applyDataBirth: '',
            applyCardType: 0,
            applyCardNumber: '',
            applyPhone: '',
            applySex: 0,
            applyUnitName: '',
            applyUnitAddress: '',
            applyPostcode: '',
            applyMajorYear: '',
            applyPosition: '',
            applyTechnicalTitles: '',
            applyUserCardPhoto: '',
            applyCultureLevel: '',
            applyUnitPhone: '',
            applyPhysicalState: 0,
            applyAddress: ''
          },
          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: '',
          basicStaffInfoId: '',
          isSignSuccess: false,
          hasCardNum: false
        }
    },
    methods: {
      // 切换左侧菜单
      changeTab: function (tab) {
        var self = this
        if (this.basicStaffInfoId) {
          this.tab = tab
          this.page.page = 1
          this.page.totalPage = 1
          if (tab == 1) {
            this.getMyApply()
            this.checkingSigned = false
          } else if (tab == 2) {
            this.getExamList()
          }
          if (tab == 7) {
            this.getPersonInfo()

            this.$nextTick(function () {
              laydate.render({
                elem: "#birthday",
                type: 'date',
                done: function (value) {
                  self.personInfo.birthDate = value
                }
              });
            })
          }
        } else {
          this.$layer.msg('请先完善个人信息')
        }
      },
      // 报名成功返回
      successBack: function () {
        this.tab = 0
        this.signStep = 0
        this.isSignSuccess = false
      },
      // 下一步
      nextStep: function () {
        if (this.workSelectedType == 0) {
          this.$layer.msg('请选择科目类型')
          return
        }
        if (this.workSelectedTypeLv1 == 0) {
          this.$layer.msg('请选择报考工种')
          return
        }
        if (this.planType == 0) {
          this.$layer.msg('请选择培训类型')
          return
        }
        this.signStep++
        this.getPersonInfo(true)
        if (this.signStep == 1) {
          this.isPromising = true
        }
      },
      // 同意承诺说明
      agree: function () {
        var self = this
        this.isPromising = false
        this.getPapersType()
        this.getSex()
        this.getCulture()
        this.getHealthy()
        this.$nextTick(function () {
          laydate.render({
            elem: "#birth",
            type: 'date',
            done: function (value) {
              self.signInfo.applyDataBirth = value
            }
          });
        })
      },
      // 报考
      signOrg: function (planId, orgId, name) {
        var self = this
        self.$layer.open({
          content: '确定选择该培训机构吗?<br>一旦选择确定后无法修改',
          btn: ['确认', '取消'],
          yes: function () {
            var info = self.signInfo
            info['applyClassId'] = planId
            info['applyClassName'] = name
            info['applyInstitutionId'] = orgId
            axios.post(self.signUrl + 'app/apply/save', info,{
            // axios.post('http://192.168.109:8070/signup/app/apply/save', info,{
              headers: {
                token: self.token
              }
            }).then(function (res) {
              self.$layer.closeAll()
              self.$layer.msg('报考成功')
              self.isSignSuccess = true
              // self.tab = 1
            }).catch(function (error) {
              self.$layer.msg(error.response.data.msg)
            })
          },
          btn2: function () {

          }
        })
      },
      // 获取个人信息
      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) {
        var self = this
        var workTypeParentId = 0
        var cur
        self.isLoading = true
        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
        self.isLoading = true
        var file = e.target.files[0]
        var size = file.size
        var type = file.type.split('/')[1]
        if (type != 'jpg' && type != 'jpeg') {
          self.$layer.msg('图片格式应为jpg或jpeg')
          return
        }
        if (size > 30720) {
          self.$layer.msg('图片大小不能大于30kb')
          self.isLoading = false
          return
        }
        var formdata = new FormData()
        var reader = new FileReader()
        reader.readAsDataURL(file)
        reader.onload = function (e) {
          self.previewPhoto = reader.result
        }
        formdata.append('image', file)
        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.applyUnitAddress) {
          this.$layer.msg('单位地址不能为空')
          return
        }
        if (!this.signInfo.applyPostcode) {
          this.$layer.msg('邮编不能为空')
          return
        }
        if (!this.signInfo.applyMajorYear) {
          this.$layer.msg('从事专业年份不能为空')
          return
        }
        if (!this.signInfo.applyPosition) {
          this.$layer.msg('职务不能为空')
          return
        }
        if (!this.signInfo.applyTechnicalTitles) {
          this.$layer.msg('技术职称不能为空')
          return
        }
        if (!this.signInfo.applyUnitPhone) {
          this.$layer.msg('单位电话不能为空')
          return
        }
        if (this.signInfo.applySex == 0) {
          this.$layer.msg('请选择性别')
          return
        }
        if (this.signInfo.applyPhysicalState == 0) {
          this.$layer.msg('请选择身体状况')
          return
        }
        if (this.signInfo.applyCardType == 0) {
          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 {
          catalogId = self.workSelectedTypeLv1
        }
        var info = self.page
        info['workerCatalog'] = catalogId
        info['planType'] = self.planType
        info['applyCardNumber'] = self.signInfo.applyCardNumber
        info['keywords'] = self.orgKeywords
        axios.get(self.signUrl + 'app/apply/listPageApplyClassPlan', {
        // axios.get('http://192.168.0.109:8070/signup/app/apply/listPageApplyClassPlan', {
          params: info,
          headers: {
            token: self.token
          }
        }).then(function (res) {
          self.isLoading = false
          self.orgList = res.data.rows
          self.page.page = res.data.page
          self.page.totalPage = Math.ceil(res.data.total / self.page.rows)
        })
      },
      // 上一步
      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()
        }
      },
      // 查看审核记录
      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) {
        var self = this
        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
        })
      },
      // 提交重新报名
      submitResign: function (id) {
        var self = this
        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.checkingSigned = false
            self.showResignBtn = false
            self.getMyApply()
          }
        })
      },
      // 获取我的考试列表
      getExamList: function () {
        var self = this
        self.isLoading = true
        axios.get(self.signUrl + 'app/basic-staff-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) {
          console.log(res)
          self.examList = res.data
          self.isLoading = false
        })
      },
      // 下载准考证
      downloadTicket: function (path) {
        downloadjs(path)
      },
      // 获取个人信息
      getPersonInfo: function (fromSign) {
        var self = this
        self.isLaoding = true
        axios.get(self.personUrl + 'app/basic-staff-info/get-basic-staff-info', {
        // axios.get('http://192.168.0.109:8070/signup/app/basic-staff-info/get-basic-staff-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 (fromSign) {
            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.personInfo = res.data
          if (!res.data.basicStaffInfoId) {
            self.$layer.msg('请先完善个人信息！')
            self.tab = 7
            self.$nextTick(function () {
              laydate.render({
                elem: "#birthday",
                type: 'date',
                done: function (value) {
                  self.personInfo.birthDate = value
                }
              });
            })
          } else {
            self.basicStaffInfoId = res.data.basicStaffInfoId
            self.personInfo['isEdit'] = 0
          }
          self.isLaoding = false
        })
      },
      // 保存个人信息
      savePersonInfo: function () {
        var self = this
        if (this.personInfo.fullName) {
          self.isLaoding = true
          axios.post(self.personUrl + 'app/basic-staff-info/save', self.personInfo, {
          // axios.post('http://192.168.0.109:8070/signup/app/basic-staff-info/save', self.personInfo, {
            headers: {
              token: self.token
            }
          }).then(function (res) {
            if (res.status == 200) {
              self.$layer.msg('保存成功！')
              self.isLaoding = false
              self.getPersonInfo()
            }
          })
        } else {
          self.$layer.msg('姓名不能为空！')
        }
      },
      // 上传头像
      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, {
          headers: {
            token: self.token
          }
        }).then(function (res) {
          self.$layer.msg('上传成功')
          self.isLaoding = false
          self.personInfo.userPhotoId = res.data.data
        })
      },
      // 报名选择证件类型判断回填
      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);
      }
    },
    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.getSex()
      this.getNation()
      this.getPolitical()
      this.getUserInfo()
      this.getWorkType()
    }
}
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
.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
.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
      margin-top 5px
      a
        display inline-block
        font-size 16px
        color #fff
        margin-right 30px
        line-height 20px
        height 20px
        &.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 top
            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 top
            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 top
            margin-right 5px
.content
  width 1200px
  margin 30px auto
  overflow hidden
  .left
    width 210px
    float left
    img
      width 100%
    ul
      li
        height 55px
        margin-top 10px
        cursor pointer
        &:first-child
          background url("~@/assets/images/center-tab6.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-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(4)
          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(5)
          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(6)
          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 950px
    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
      .process-box
        float left
        width 60px
        text-align center
        position relative
        margin-right 90px
        &:last-child
          margin-right 0
        &:after
          content ''
          display block
          width 105px
          height 5px
          background #dcdada
          position absolute
          top 20px
          right -98px
        &: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
          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
          label
            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 730px
        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-box
      padding 20px
      border 1px solid #b2b2b2
      border-radius 8px
      margin-bottom 20px
      table
        table-layout fixed
        width 100%
        td
          height 40px
          font-size 16px
          color #000
          span
            font-weight bold
          button
            border none
            outline none
            cursor pointer
            width 100%
            height 40px
            color #fff
            font-weight bold
            font-size 18px
            background #11a5fa
    .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
        border #e8e8e8 solid 1px
        position relative
        margin-bottom 10px
        .signed-left
          width 100%
          padding 25px 30px
          box-sizing border-box
          table
            table-layout fixed
            width 100%
            td
              height 35px
              font-size 16px
              color #000
            button
              width 100px
              height 35px
              color #fff
              font-size 16px
              background #0d6ec0
              border none
              outline none
              cursor pointer
              border-radius 5px
        .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
    .no-data
      text-align center
      padding 30px 0
      font-size 16px
      color #000
    .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
          &: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
.footer
  margin-top 20px
  text-align center
  padding 20px 0
  background #fff
  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 greenyellow
        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>
