<template>
  <div class="home">
    <el-row class="m-b-10 m-t-20">
      <el-col :xl="{ span: 16, offset: 4 }" :lg="{ span: 16, offset: 4 }" :md="{ span: 18, offset: 2 }"
        :sm="{ span: 20, offset: 2 }" :xs="{ span: 24 }">
        <div class="pd-10 hidden-sm-and-up" style="padding-bottom: 0">
          <img src="../assets/images/logo.png" alt="" style="width: 100%" />
        </div>
        <img src="../assets/images/logo.png" alt="" style="width: 50%" class="hidden-xs-only" />
      </el-col>
    </el-row>
    <el-row class="m-b-20">
      <el-col :span="24" style="background-color: #3084c2" class="hidden-xs-only">
        <el-row>
          <el-col :xl="{ span: 16, offset: 4 }" :lg="{ span: 16, offset: 4 }" :md="{ span: 18, offset: 2 }"
            :sm="{ span: 20, offset: 2 }" :xs="{ span: 24 }" style="position: relative" class="banner">
            <div style="
                height: 100%;
                background: linear-gradient(to right, #3084c2, transparent);
                position: absolute;
                top: 0;
                left: 0;
                z-index: 99;
                width: 20%;
              "></div>
            <!-- <img src="../assets/images/login-bg.jpg" alt="" style="width:100%;height: 360px;" /> -->
            <div style="
                height: 100%;
                background: linear-gradient(to left, #3084c2, transparent);
                position: absolute;
                top: 0;
                right: 0;
                z-index: 99;
                width: 20%;
              "></div>
            <div class="loginBox" style="">
              <div class="flex-ac-jb">
                <div class="tabBox" :class="active == 'qy' ? '' : 'notActive'" @click="choose('qy')">
                  企业登录
                </div>
                <div class="tabBox" :class="active == 'qy' ? 'notActive' : ''" @click="choose('jy')">
                  网络教育登录
                </div>
              </div>
              <div class="pd-20" v-if="active == 'qy'">
                <el-form ref="loginForm" :model="form" :rules="loginRules">
                  <el-form-item prop="username">
                    <el-input v-model="form.username" placeholder="用户名" @keyup.enter.native="onSubmit('qy')">
                      <svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon" />
                    </el-input>
                  </el-form-item>
                  <el-form-item prop="password">
                    <el-input v-model="form.password" type="password" placeholder="密码"
                      @keyup.enter.native="onSubmit('qy')">
                      <svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" />
                    </el-input>
                  </el-form-item>
                  <el-form-item prop="code">
                    <el-input v-model="form.code" auto-complete="off" placeholder="验证码" style="width: 63%"
                      @keyup.enter.native="onSubmit('qy')">
                      <svg-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon" />
                    </el-input>
                    <div class="login-code">
                      <img :src="codeUrl" @click="getCode" class="login-code-img" />
                    </div>
                  </el-form-item>
                  <div class="">
                    <!-- <router-link class="link-type" :to="'/mmzh'" v-if="active == 'qy'"
                      style="color: #fff">找回密码</router-link> -->
                    <el-button type="text" @click="zhmm" style="color: #fff;">找回密码</el-button>
                  </div>
                  <div class="flex-ac-jb">
                    <el-button type="primary" @click="onSubmit('qy')" style="width: 45%">登录</el-button>
                    <el-button type="warning" @click="zhuce" style="width: 45%">注册</el-button>
                  </div>
                </el-form>
              </div>
              <div class="pd-20" v-else>
                <el-form ref="userForm" :model="userForm" :rules="userRules">
                  <el-form-item prop="username">
                    <el-input v-model="userForm.username" placeholder="身份证号" @keyup.enter.native="onSubmit('jy')">
                      <i slot="prefix" class="el-icon-postcard"></i>
                    </el-input>
                  </el-form-item>
                  <el-form-item prop="password">
                    <el-input v-model="userForm.password" placeholder="证书编号" @keyup.enter.native="onSubmit('jy')">
                      <i slot="prefix" class="el-icon-tickets"></i>
                    </el-input>
                  </el-form-item>
                  <el-form-item prop="code">
                    <el-input v-model="userForm.code" auto-complete="off" placeholder="验证码" style="width: 63%"
                      @keyup.enter.native="onSubmit('jy')">
                      <svg-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon" />
                    </el-input>
                    <div class="login-code">
                      <img :src="codeUrl" @click="getCode" class="login-code-img" />
                    </div>
                  </el-form-item>
                  <div style="color: #fff" class="m-b-10">
                    监理工程师网络教育登录入口
                  </div>
                  <div class="flex-ac-jb">
                    <el-button type="primary" @click="onSubmit('jy')" style="width: 100%">登录</el-button>
                  </div>
                </el-form>
              </div>
            </div>
          </el-col>
        </el-row>
      </el-col>
      <el-col :span="24" style="background-color: #3084c2" class="hidden-sm-and-up">
        <div class="loginBox2" style="">
          <div class="flex-ac-jb">
            <div class="tabBox" :class="active == 'qy' ? '' : 'notActive'" @click="choose('qy')">
              企业登录
            </div>
            <div class="tabBox" :class="active == 'qy' ? 'notActive' : ''" @click="choose('jy')">
              网络教育登录
            </div>
          </div>
          <div class="pd-20" v-if="active == 'qy'">
            <el-form ref="loginForm" :model="form" :rules="loginRules">
              <el-form-item prop="username">
                <el-input v-model="form.username" placeholder="用户名">
                  <svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon" />
                </el-input>
              </el-form-item>
              <el-form-item prop="password">
                <el-input v-model="form.password" placeholder="密码">
                  <svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" />
                </el-input>
              </el-form-item>
              <el-form-item prop="code">
                <el-input v-model="form.code" auto-complete="off" placeholder="验证码" style="width: 63%"
                  @keyup.enter.native="onSubmit">
                  <svg-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon" />
                </el-input>
                <div class="login-code">
                  <img :src="codeUrl" @click="getCode" class="login-code-img" />
                </div>
              </el-form-item>
              <div class="m-b-10">
                <router-link class="link-type" :to="'/register'" v-if="active == 'qy'"
                  style="color: #fff">找回密码</router-link>
              </div>
              <div class="flex-ac-jb">
                <el-button type="primary" @click="onSubmit('qy')" style="width: 45%">登录</el-button>
                <el-button type="warning" @click="zhuce" style="width: 45%">注册</el-button>
              </div>
            </el-form>
          </div>
          <div class="pd-20" v-else>
            <el-form ref="userForm" :model="userForm" :rules="userRules">
              <el-form-item prop="username">
                <el-input v-model="userForm.username" placeholder="身份证号">
                  <i slot="prefix" class="el-icon-postcard"></i>
                </el-input>
              </el-form-item>
              <el-form-item prop="password">
                <el-input v-model="userForm.password" placeholder="证书编号">
                  <i slot="prefix" class="el-icon-tickets"></i>
                </el-input>
              </el-form-item>
              <el-form-item prop="code">
                <el-input v-model="userForm.code" auto-complete="off" placeholder="验证码" style="width: 63%"
                  @keyup.enter.native="onSubmit">
                  <svg-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon" />
                </el-input>
                <div class="login-code">
                  <img :src="codeUrl" @click="getCode" class="login-code-img" />
                </div>
              </el-form-item>
              <div style="color: #fff" class="m-b-10">
                监理工程师网络教育登录入口
              </div>
              <div class="flex-ac-jb">
                <el-button type="primary" @click="onSubmit('jy')" style="width: 100%">登录</el-button>
              </div>
            </el-form>
          </div>
        </div>
      </el-col>
    </el-row>
    <el-row class="m-b-20">
      <el-col :xl="{ span: 16, offset: 4 }" :lg="{ span: 16, offset: 4 }" :md="{ span: 18, offset: 2 }"
        :sm="{ span: 20, offset: 2 }" :xs="{ span: 24 }" class="hidden-xs-only">
        <el-row>
          <el-col :span="24">
            <div style="border-bottom: 1px solid #34a150" class="flex-ac m-b-20">
              <div class="pd-10" style="
                  border-bottom: 2px solid #34a150;
                  font-size: 20px;
                  padding-left: 0;
                ">
                网络继续教育安排
              </div>
            </div>
            <div class="jxjy">
              <el-table :data="jxjyList" border style="width: 100%">
                <el-table-column prop="date" label="期次" width="100" align="center">
                  <template slot-scope="scope">
                    <div>
                      {{ scope.row.QiciYear + "年" + scope.row.QiCi + "期" }}
                    </div>
                  </template>
                </el-table-column>
                <el-table-column prop="ZcsZhuanYe" label="类别" width="140" align="center">
                  <template slot-scope="scope">
                    <div>
                      {{
                        scope.row.ZhuanYeType == null
                        ? scope.row.ZcsZhuanYe
                        : scope.row.ZcsZhuanYe +
                        "(" +
                        scope.row.ZhuanYeType +
                        ")"
                      }}
                    </div>
                  </template>
                </el-table-column>
                <el-table-column prop="TrainName" label="继续教育安排"></el-table-column>
                <el-table-column prop="time" label="报名截止" width="100" align="center">
                  <template slot-scope="scope">
                    <div>
                      {{ parseTime(scope.row.BmEndDate, "{y}-{m}-{d}") }}
                    </div>
                  </template>
                </el-table-column>
                <el-table-column prop="bmnum" label="已报人数" width="80" align="center">
                  <template slot-scope="scope">
                    <div style="color: #f56c6c">
                      {{ scope.row.BmNum }}
                    </div>
                  </template>
                </el-table-column>
                <el-table-column prop="sxnum" label="报名上限" width="80" align="center">
                  <template slot-scope="scope">
                    <div style="color: #f56c6c">
                      {{ scope.row.BmNumMax }}
                    </div>
                  </template>
                </el-table-column>
                <el-table-column label="报名" width="90" align="center">
                  <template slot-scope="scope">
                    <el-button type="success" size="small" @click="classSignUp(scope.row)" v-if="Number(scope.row.BmNum) < Number(scope.row.BmNumMax) &&
                      new Date(scope.row.BmEndDate) > new Date()
                      ">
                      报 名
                    </el-button>
                    <el-button size="small" disabled v-else> 结 束 </el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </el-col>
          <el-col :span="24" class="m-t-20">
            <div style="border-bottom: 1px solid #3084c2" class="flex-ac m-b-20">
              <div class="pd-10" style="
                  border-bottom: 2px solid #3084c2;
                  font-size: 20px;
                  padding-left: 0;
                ">
                资格考试安排
              </div>
            </div>
            <div class="zgks">
              <el-table :data="jlksList" border style="width: 100%;font-size: 16px;">
                <el-table-column prop="address" label="资格考试期次安排">
                  <template slot-scope="scope">
                    <div>
                      <img v-if="scope.row.TongZhi != null" @click="viewFile(scope.row.TongZhi)" style="height:18px"
                        src="../assets/images/word.png" alt="">
                      <!-- <el-link icon="el-icon-document"></el-link> -->
                      {{ scope.row.TrainName }}
                    </div>
                  </template>
                </el-table-column>
                <el-table-column prop="time" label="报名截止" width="120" align="center">
                  <template slot-scope="scope">
                    <div>
                      {{ parseTime(scope.row.BmEndDate, "{y}-{m}-{d}") }}
                    </div>
                  </template>
                </el-table-column>
                <el-table-column prop="address" align="center" label="考试地点" width="120">
                  <template slot-scope="scope">
                    <div>
                      <el-select v-model="scope.row.address" readonly placeholder="请选择">
                        <el-option :label="v" :value="i" :key="i" v-for="(v, i) in scope.row.dishi.split('|')">
                          {{ v }}
                        </el-option>
                      </el-select>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column prop="bmnum" label="已报人数" width="100" align="center">
                  <template slot-scope="scope">
                    <div style="color: #f56c6c">
                      <div v-if="scope.row.address == undefined">
                        {{
                          scope.row.BmNum.split("|").reduce(
                            (accumulator, currentValue) =>
                              accumulator + Number(currentValue),
                            0
                          )
                        }}
                      </div>
                      <div v-else>
                        {{ scope.row.BmNum.split("|")[scope.row.address] }}
                      </div>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column prop="sxnum" label="报名上限" width="90" align="center">
                  <template slot-scope="scope">
                    <div style="color: #f56c6c">
                      <div v-if="scope.row.address == undefined">
                        {{
                          scope.row.BmNumMax.split("|").reduce(
                            (accumulator, currentValue) =>
                              accumulator + Number(currentValue),
                            0
                          )
                        }}
                      </div>
                      <div v-else>
                        {{ scope.row.BmNumMax.split("|")[scope.row.address] }}
                      </div>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column label="报名" width="160" align="center">
                  <template slot-scope="scope">
                    <el-row :gutter="5">
                      <el-col :span="12">
                        <el-button type="success" size="small" v-if="new Date(scope.row.BmEndDate) > new Date() &&
                          ((scope.row.address == undefined && scope.row.BmNum.split('|').reduce((accumulator, currentValue) => accumulator + Number(currentValue), 0) < scope.row.BmNumMax.split('|').reduce((accumulator, currentValue) => accumulator + Number(currentValue), 0)) || (scope.row.address != undefined && Number(scope.row.BmNum.split('|')[scope.row.address]) < Number(scope.row.BmNumMax.split('|')[scope.row.address])))
                          " @click="kaoshiBm(scope.row)">
                          报名
                        </el-button>
                        <el-button v-else size="small" disabled>
                          结 束
                        </el-button>
                      </el-col>
                      <el-col :span="12">
                        <el-button type="primary" size="small" @click="search(scope.row)">
                          查询
                        </el-button>
                      </el-col>
                    </el-row>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </el-col>
        </el-row>
      </el-col>
      <el-col :span="24" class="hidden-sm-and-up p-l-20 p-r-20">
        <div>
          <div style="border-bottom: 1px solid #34a150" class="flex-ac m-b-20">
            <div class="pd-10" style="
                border-bottom: 2px solid #34a150;
                font-size: 20px;
                padding-left: 0;
              ">
              网络继续教育安排
            </div>
          </div>
          <div>
            <el-card class="box-card m-b-20" v-for="(v, i) in jxjyList" :key="i">
              <div slot="header" class=" flex-ac-jb" style="width: 100%;">
                <span>{{ v.QiciYear + "年" + v.QiCi + "期" }}</span>
                <el-button type="success" size="small" @click="classSignUpH5(v, 'ks')" v-if="Number(v.BmNum) < Number(v.BmNumMax) &&
                  new Date(v.BmEndDate) > new Date()
                  ">
                  报 名
                </el-button>
                <el-button size="small" disabled v-else> 结 束 </el-button>
              </div>
              <div>
                <div class="m-b-10">类别：{{ v.ZhuanYeType == null
                  ? v.ZcsZhuanYe
                  : v.ZcsZhuanYe +
                  "(" +
                  v.ZhuanYeType +
                  ")" }}</div>
                <div class="m-b-10">继续教育安排：{{ v.TrainName }}</div>
                <div class="m-b-10">报名截止：{{ parseTime(v.BmEndDate, "{y}-{m}-{d}") }}</div>
                <div>
                  报名人数：
                  <span style="color: #f56c6c">
                    {{ v.BmNum + "/" + v.BmNumMax }}
                  </span>
                </div>
              </div>
            </el-card>
          </div>
        </div>
        <div>
          <div style="border-bottom: 1px solid #3084c2" class="flex-ac m-b-20">
            <div class="pd-10" style="
                border-bottom: 2px solid #3084c2;
                font-size: 20px;
                padding-left: 0;
              ">
              资格考试安排
            </div>
          </div>
          <div>
            <el-card class="box-card m-b-20" v-for="(v, i) in jlksList" :key="i">
              <div slot="header" class="clearfix">
                <span>{{ v.QiciYear + "年" + v.QiCi + "期" }}</span>
              </div>
              <div>
                <div class="m-b-10">
                  考试地点：
                  <el-select v-model="v.address" readonly placeholder="请选择">
                    <el-option :label="item" :value="index" :key="index" v-for="(item, index) in v.dishi.split('|')">
                      {{ item }}
                    </el-option>
                  </el-select>
                </div>
                <div class="m-b-10">报名截止：{{ parseTime(v.BmEndDate, "{y}-{m}-{d}") }}</div>
                <div>
                  报名人数：
                  <span style="color: #f56c6c">
                    <span style="color: #f56c6c">
                      <span v-if="v.address == undefined">
                        {{
                          v.BmNum.split("|").reduce(
                            (accumulator, currentValue) =>
                              accumulator + Number(currentValue),
                            0
                          )
                        }}
                      </span>
                      <span v-else>
                        {{ v.BmNum.split("|")[v.address] }}
                      </span>
                    </span>
                  </span>
                </div>
                <div>
                  报名上限：
                  <span style="color: #f56c6c">
                    <span v-if="v.address == undefined">
                      {{
                        v.BmNumMax.split("|").reduce(
                          (accumulator, currentValue) =>
                            accumulator + Number(currentValue),
                          0
                        )
                      }}
                    </span>
                    <span v-else>
                      {{ v.BmNumMax.split("|")[v.address] }}
                    </span>
                  </span>
                </div>
                <div class="p-b-20">
                  <el-button style="float: right; padding: 8px" type="success">报名</el-button>
                  <el-button style="float: right; padding: 8px; margin-right: 10px" type="primary">查询</el-button>
                </div>
              </div>
            </el-card>
          </div>
        </div>
      </el-col>
    </el-row>
    <div style="
        width: 8vw;
        position: fixed;
        top: 20vh;
        right: 0;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
        border-radius: 6px 0 0 6px;
        overflow: hidden;
      " class="box-hover hidden-xs-only">
      <img src="../assets/images/cx.jpg" style="width: 100%" @click="chaxun" />
    </div>
    <!-- 继续教育报名 -->
    <el-dialog title="监理工程师继续教育报名" :visible.sync="show" top="6vh" width="70%" :close-on-click-modal="false">
      <div v-if="show" style="
          height: 74vh;
          overflow-y: auto;
          overflow-x: hidden;
          padding-top: 0;
        " class="pd-10">
        <kaoshi ref="kaoshi" :info="jxjyInfo" @submitSuccess="submitSuccess"></kaoshi>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">报 名</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
    <el-dialog :title="title" :visible.sync="showH5" width="96%">
      <div style="
          height: 74vh;
          overflow-y: auto;
          overflow-x: hidden;
          padding-top: 0;
        " class="pd-10">
        <kaoshi-h5></kaoshi-h5>
      </div>
    </el-dialog>
    <!-- 资格考试报名 -->
    <el-dialog :title="titleInfo + '资格考试报名'" top="3vh" :visible.sync="zgksShow" width="1250px"
      :close-on-click-modal="false">
      <div style="
          height: 74vh;
          overflow-y: auto;
          overflow-x: hidden;
          padding-top: 0;
        " class="pd-10" v-if="zgksShow">
        <el-row type="flex" justify="">
          <el-col :span="8">
            <img src="../assets/images/jly.jpg" alt="">
          </el-col>
          <!-- <el-col :span="8"><img src="./assets/images/jly.png" alt="">
          </el-col>
          <el-col :span="8"><img src="./assets/images/jly.png" alt="">
          </el-col> -->
        </el-row>
        <component ref="zgks" :is="zgks" :info="zgksInfo" @submitSuccess="zgksSubmitSuccess"></component>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="zgksSubmitForm">报 名</el-button>
        <el-button @click="zgksCancel">取 消</el-button>
      </div>
    </el-dialog>
    <!-- 添加或修改资格考试报名对话框 -->
    <el-dialog title="报名信息" top="3vh" :visible.sync="open" width="70%" :close-on-click-modal="false" destroy-on-close>
      <div style="
          height: 74vh;
          overflow-y: auto;
          overflow-x: hidden;
          padding-top: 0;
        " class="pd-10" v-if="open">
        <component ref="zgksXiugai" :is="zgks" :info="zgksInfo" :type="1" :xiugai="xiugaiType"
          @submitSuccess="submitSuccessbaoming">
        </component>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitFormbaoming" v-if="xiugaiType == true">修 改</el-button>
        <el-button @click="cancelXiugai">{{ xiugaiType == true ? '取 消' : '关 闭' }}</el-button>
      </div>
    </el-dialog>
    <el-dialog title="资格考试报名查询" top="3vh" :visible.sync="searchShow" width="40%">
      <el-form style="margin-top: 10px;" ref="rulesForm" :model="form" label-width="80px" :rules="rulesForm">
        <el-form-item label="姓名" prop="cardName">
          <el-input v-model="form.cardName" placeholder="请输入姓名"></el-input>
        </el-form-item>
        <el-form-item label="身份证号" prop="cardNo">
          <el-input v-model="form.cardNo" placeholder="请输入身份证号"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancelSearch">取 消</el-button>
        <el-button type="primary" @click="searchInfo">查询</el-button>
      </span>
    </el-dialog>
    <div class="footer hidden-xs-only">
      <div class="in">
        <p>
          <span>Copyright ©
            中国铁道工程建设协会建设监理专业委员会&nbsp;&nbsp;&nbsp;&nbsp;版权所有</span>
        </p>
        <p>
          <span>技术支持：石家庄亿网科技发展有限公司 &nbsp;&nbsp;QQ群1：273181486
            QQ群2：379067534 QQ群3：684421906 客服QQ：3564246643&nbsp;&nbsp;<a rel="nofollow" href="https://beian.miit.gov.cn"
              target="_blank">
              网站备案号：京ICP备13011762号-1
            </a></span>
        </p>
      </div>
    </div>
    <div class="footer hidden-sm-and-up">
      <div class="in2 pd-20">
        <p>
          <span>Copyright ©
            中国铁道工程建设协会建设监理专业委员会&nbsp;&nbsp;&nbsp;&nbsp;版权所有</span>
        </p>
        <p>
          <span>技术支持：石家庄亿网科技发展有限公司 &nbsp;&nbsp;QQ群1：273181486
            QQ群2：379067534 QQ群3：684421906 客服QQ：3564246643&nbsp;&nbsp;<a rel="nofollow" href="https://beian.miit.gov.cn"
              target="_blank">
              网站备案号：京ICP备13011762号-1
            </a></span>
        </p>
      </div>
    </div>
  </div>
</template>

<script>
import kaoshi from "./components/baoming/kaoshi.vue";
import jly from "./components/baoming/jly.vue";
import zj from "./components/baoming/zj.vue";
import jlgcs from "./components/baoming/jlgcs.vue";
import kaoshiH5 from "./components/baoming/H5.vue";

import { getCodeImg } from "@/api/login";
import { getJxjy } from "@/api/userIndex";
import { getZigePerson, zigePersonQuery } from "@/api/xiehui/zgks/ZigePerson";
import Vue from "vue";
export default {
  name: "userIndex",
  components: {
    kaoshi,
    kaoshiH5,
    jly,
    zj,
    jlgcs,
  },
  data() {
    return {
      // 遮罩层
      loading: true,
      tableData: [],
      jxjyList: [],
      jlksList: [],
      titleInfo: '',
      form: {
        username: "",
        password: "",
        rememberMe: false,
        code: "",
        uuid: "",
        type: null,
        cardName: "",
        cardNo: "",
      },
      userForm: {
        username: "",
        password: "",
        rememberMe: false,
        code: "",
        uuid: "",
        type: null,
      },
      rulesForm: {
        cardName: [
          {
            required: true,
            trigger: "blur",
            message: "请输入姓名",
          },
        ],
        cardNo: [
          {
            required: true,
            trigger: "blur",
            message: "请输入身份证号",
          },
        ],
      },
      loginRules: {
        username: [
          {
            required: true,
            trigger: "blur",
            message: "请输入用户名",
          },
        ],
        password: [
          {
            required: true,
            trigger: "blur",
            message: "请输入密码",
          },
        ],
        code: [
          {
            required: true,
            trigger: "blur",
            message: "请输入验证码",
          },
        ],
      },
      userRules: {
        username: [
          {
            required: true,
            trigger: "blur",
            message: "请输入身份证号",
          },
        ],
        password: [
          {
            required: true,
            trigger: "blur",
            message: "请输入证书编号",
          },
        ],
        code: [
          {
            required: true,
            trigger: "change",
            message: "请输入验证码",
          },
        ],
      },
      show: false, //报名、考试对话框
      type: null, //当前对话框状态
      title: null, ///对话框标头
      searchShow: false, //资格考试查询
      codeUrl: "", //验证码路径
      active: "qy", //当前选中状态
      showH5: false, //h5弹窗展示
      captchaEnabled: true,
      loading: false,
      redirect: null,
      jxjyInfo: null,
      xiugaiType: false,
      searchRow: null,
      //资格考试组件
      zgksShow: false,
      zgks: null,
      zgksInfo: null,
      open: false
    };
  },
  watch: {
    $route: {
      handler: function (route) {
        this.redirect = route.query && route.query.redirect;
      },
      immediate: true,
    },
  },
  created() {
    this.getCode();
    this.getJxjyList();
  },
  methods: {
    viewFile(url) {
      window.open(process.env.VUE_APP_BASE_API + url, '_blank'); // '_blank' 确保在新标签页中打开
    },
    cancelSearch() {
      this.searchShow = false
      this.form.cardName = ""
      this.form.cardNo = ""
    },
    // 取消按钮
    cancelXiugai() {
      this.$refs.zgksXiugai.reset();
      this.open = false;
    },
    searchInfo() {
      // this.$modal.loading('查询中,请稍候...');
      this.$refs.rulesForm.validate((valid) => {
        if (valid) {
          zigePersonQuery({ TrainId: this.searchRow.id, UserName: this.form.cardName, UserCord: this.form.cardNo }).then((res) => {
            console.log("🚀 ~ zigePersonQuery ~ res:", res)
            let type = null
            if (res.data.grshenhe == 0 || res.data.grshenhe == 2) {
              type = true
            } else {
              type = false
            }
            if (type == undefined) {
              this.xiugaiType = true
            } else {
              this.xiugaiType = type
            }
            // this.xiugaiType = type == undefined ? true : false;
            // this.loading = true;
            // getZigePerson(res.data.zigeperson.PersonId).then((response) => {
            console.log("🚀 ~ getZigePerson ~ response.data:", res.data)
            // this.form = response.data;
            if (res.data.ZcsZhuanYe == "8" || res.data.ZcsZhuanYe == "监理工程师") {
              this.zgks = "jlgcs";
            } else if (res.data.ZcsZhuanYe == "28" || res.data.ZcsZhuanYe == "监理员") {
              this.zgks = "jly";
            } else {
              this.zgks = "zj";
            }
            this.zgksInfo = res.data;
            console.log("🚀 ~ getZigePerson ~ response.data:", res.data)
            this.loading = false;
            this.open = true;
            // this.$modal.closeLoading();
            // }).catch(() => {
            //   this.$modal.closeLoading();
            // })
          })
        } else {

        }
      })
    },
    //获取继续教育列表
    getJxjyList() {
      getJxjy().then((res) => {
        let index = 0
        for (let i in res.data) {
          if (i < 10) {
            Vue.set(this.jxjyList, i, res.data[i])
          } else {
            Vue.set(this.jlksList, index, res.data[i])
            index++
          }
        }
      });
    },
    //pc报名
    classSignUp(row) {
      this.jxjyInfo = row;
      this.show = true;
    },
    //考试报名
    kaoshiBm(row) {
      console.log("5869", row);
      if (row.address == null) {
        this.$message({
          type: "warning",
          message: "请选择培训地点",
        });
      } else {
        row.City = row.dishi.split("|")[row.address];
        console.log("row.ZcsZhuanYe", row.ZcsZhuanYe);
        if (row.ZcsZhuanYe == "8" || row.ZcsZhuanYe == "监理工程师") {
          this.zgks = "jlgcs";
          row.ZcsZhuanYe = "监理工程师";
        } else if (row.ZcsZhuanYe == "28" || row.ZcsZhuanYe == "监理员") {
          this.zgks = "jly";
          row.ZcsZhuanYe = "监理员";
        } else {
          this.zgks = "zj";
          row.ZcsZhuanYe = "总监理工程师";
        }
        this.titleInfo = row.ZcsZhuanYe

        this.zgksInfo = row;
        this.zgksShow = true;
      }
    },
    //H5报名
    classSignUpH5(row, type) {
      this.type = type;
      if (type == "kc") {
        this.title = "监理工程师继续教育报名";
      } else {
        this.title = "监理工程师资格考试报名";
      }
      this.showH5 = true;
    },
    //考试查询
    search(row) {
      this.searchRow = row
      console.log("🚀 ~ 考试查询 ~ row:", row)
      this.searchShow = true;
    },
    getCode() {
      getCodeImg().then((res) => {
        this.captchaEnabled =
          res.captchaEnabled === undefined ? true : res.captchaEnabled;
        if (this.captchaEnabled) {
          this.codeUrl = "data:image/gif;base64," + res.img;
          this.form.uuid = res.uuid;
          this.userForm.uuid = res.uuid;
        }
      });
    },
    choose(v) {
      this.active = v;
      if (v == "qy") {
        this.form = {
          username: "",
          password: "",
          rememberMe: false,
          code: "",
        };
        setTimeout(() => {
          this.$refs.loginForm.clearValidate();
        }, 500);
      } else {
        this.userForm = {
          username: "",
          password: "",
          rememberMe: false,
          code: "",
        };
        setTimeout(() => {
          this.$refs.userForm.clearValidate();
        }, 500);
      }
    },
    //注册企业账号
    zhuce() {
      let url = '/register'
      const routePath = this.$router.resolve({ path: url }).href
      window.open(routePath, '_blank');
    },
    //找回密码
    zhmm() {
      let url = '/mmzh'
      const routePath = this.$router.resolve({ path: url }).href
      window.open(routePath, '_blank');
    },
    //登陆
    onSubmit(type) {
      if (type == "qy") {
        this.$refs.loginForm.validate((valid) => {
          if (valid) {
            this.loading = true;
            this.form.type = "0";
            this.$store.commit("setType", "0");
            this.$store
              .dispatch("Login", this.form)
              .then(() => {
                this.$router
                  .push({
                    path: this.redirect || "/index",
                  })
                  .catch(() => { });
              })
              .catch((error) => {
                this.loading = false;
                if (this.captchaEnabled) {
                  // this.$message({
                  // 	type:"error",
                  // 	message:error.msg
                  // })
                  this.getCode();
                }
              });
          }
        });
      } else {
        this.$refs.userForm.validate((valid) => {
          if (valid) {
            this.loading = true;
            this.form.type = "1";
            this.$store.commit("setType", "1");
            this.$store
              .dispatch("Login", this.userForm)
              .then(() => {
                this.$router
                  .push({
                    path: this.redirect || "/index",
                  })
                  .catch(() => { });
              })
              .catch(() => {
                this.loading = false;
                if (this.captchaEnabled) {
                  // this.$message({
                  // 	type:"error",
                  // 	message:error.msg
                  // })
                  this.getCode();
                }
              });
          }
        });
      }
    },
    submitForm() {
      this.$refs.kaoshi.submit();
    },
    submitSuccess(e) {
      this.getJxjyList()
      this.$refs.kaoshi.reset();
      this.show = e;
    },
    submitFormbaoming() {
      this.$refs.zgksXiugai.submit();
      this.open = false

    },
    submitSuccessbaoming(e) {
      this.$refs.zgksXiugai.reset();
      this.show = e;
    },
    cancel() {
      this.$refs.kaoshi.reset();
      this.show = false;
    },
    zgksSubmitForm() {
      this.$refs.zgks.zgksXiugai();
    },
    zgksSubmitSuccess(e) {
      this.$refs.zgks.reset();
      this.getJxjyList();
      this.zgksShow = e;
    },
    zgksCancel() {
      this.$refs.zgks.reset();
      this.zgksShow = false;
    },
    chaxun() {
      // this.$router.push({ path: "/zhengshuSearch" })
      let url = '/zhengshuSearch'
      const routePath = this.$router.resolve({ path: url }).href
      window.open(routePath, '_blank');
    }
  },
};
</script>

<style scoped lang="scss">
::v-deep .el-dialog__body {
  padding: 10px 20px;
  color: #606266;
  font-size: 14px;
  word-break: break-all;
}

::v-deep .jxjy .el-table__header-wrapper th {
  background-color: #34a150;
  /* 举例颜色 */
  color: #fff;
  font-weight: bold;
}

::v-deep .zgks .el-table__header-wrapper th {
  background-color: #3084c2;
  /* 举例颜色 */
  color: #fff;
  font-size: 17px;
  font-weight: bold;
}

.footer {
  margin: 0;
  border: 0;
  padding: 0;
  list-style: none;
  font-size: 14px;
  color: #333;
  font-family: "Microsoft YaHei Mono", "微软雅黑";
  background-color: #3084c2;
}

.in {
  width: 80vw;
  margin: 0 auto;
  text-align: center;
  padding: 15px 0;
  color: #fff;
}

.in2 {
  margin: 0 auto;
  text-align: center;
  color: #fff;
}

.loginBox {
  width: 300px;
  position: absolute;
  z-index: 100;
  top: 50%;
  transform: translateY(-50%);
  right: 0%;
  background-color: rgba(28, 107, 115, 0.6);
  border-radius: 6px;
  color: #fff;
  overflow: hidden;
}

.loginBox2 {
  width: 100%;
  background-color: rgba(28, 107, 115, 0.6);
  border-radius: 6px;
  color: #fff;
  overflow: hidden;
}

.tabBox {
  padding: 15px;
  text-align: center;
  font-size: 18px;
  width: 50%;
  box-sizing: border-box;
}

.tabBox:hover {
  cursor: pointer;
}

.notActive {
  background-color: #619395;
}

.login-code {
  width: 33%;
  height: 36px;
  float: right;

  img {
    cursor: pointer;
    vertical-align: middle;
  }
}

.login-code-img {
  height: 36px;
}

.banner {
  height: 360px;
  background-image: url("../assets/images/login-bg.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
</style>
