<template>
    <div>
        <div class="identity_person_pc_1"><!--使用此组件，请复制此div-->
            <div class="container">
                <div class="container-bg">
                    <div class="row">
                        <div class="col-lg-3 col-md-4 col-sm-5 col-xs-12 percenter-left-padding">
                            <div class="percenter-left">
                                <div class="percenter-left-header clearfix">
                                    <span class="sp1">
                                        <a href="">
                                            <img v-if="userinfo.photo" :src="userinfo.photo" alt="">
                                            <img v-if="!userinfo.photo" src="../../theme-chalk/src/images/headphoto.png"
                                                 alt="">
                                        </a>
                                    </span>
                                    <span class="sp2">
                        <span class="spp1">{{userinfo.custName}}</span>
                        <span v-if="userinfo.idcarNo" class="spp2">实名认证</span>
                                        <span v-if="!userinfo.idcarNo" class="spp2">未认证</span>
                     </span>
                                </div>
                                <ul class="percenter-left-info">
                                    <li><span>手机号：</span>{{userinfo.phone}}</li>
                                    <li><span>身份证号：</span>{{userinfo.idcarNo?userinfo.idcarNo:'暂未填写'}}</li>
                                    <!--<li><span>最近登录：</span>2020-01-05 12:00:21</li>-->
                                </ul>
                                <div class="percenter-left-nav">
                                    <ul>
                                        <li><span><a href="">我的学习</a></span>
                                            <ul class="second-ul">
                                                <li v-bind:class="{'on':sitemenu===1}" v-on:click="sitemenu=1"><a
                                                        href="javascript:;" v-on:click="sitemenu=1">我的培训计划</a></li>
                                                <li v-bind:class="{'on':sitemenu===2}" v-on:click="sitemenu=2"><a
                                                        href="javascript:;" v-on:click="sitemenu=2">我的课程</a></li>
                                                <li v-bind:class="{'on':sitemenu===3}" v-on:click="sitemenu=3"><a
                                                        href="javascript:;" v-on:click="sitemenu=3">已获学时证书</a></li>
                                            </ul>
                                        </li>
                                        <li v-on:click="sitemenu=4"><span><a href="javascript:;">交易中心</a></span></li>
                                        <li v-on:click="sitemenu=5"><span><a href="javascript:;">账户设置</a></span></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-9 col-md-8 col-sm-7 col-xs-12 percenter-right-padding">
                            <div class="percenter-right">
                                <div class="percenter-right-data" v-if="sitemenu==0"><!--功能模块：数据环图-->
                                    <div class="percenter-right-data-up">
                                        <span><i>{{coursecount.bsNum?coursecount.bsNum:0}}</i>家<br>培训机构总数</span>
                                        <span><i>{{schcount.signedTcNum?schcount.signedTcNum:0}}</i>个<br>教学计划总数</span>
                                        <span><i>{{schcount.signedCsNum?schcount.signedCsNum:0}}</i>门<br>课程总数</span>
                                    </div>
                                    <div class="percenter-right-data-huantu clearfix">
                                        <div class="percenter-right-data-huantu-part">
                                            <span class="sp1" id="huantu1"></span>
                                            <span class="sp2"><i>{{coursecount.bsNum?coursecount.bsNum:0}}</i></span>
                                            <span class="sp3">我的培训机构(个)</span>
                                        </div>
                                        <div class="percenter-right-data-huantu-part">
                                            <span class="sp1" id="huantu2"></span>
                                            <span class="sp2"><i>{{schcount.finishedTcNum?schcount.finishedTcNum:0}}</i>/{{schcount.signedTcNum?schcount.signedTcNum:0}}</span>
                                            <span class="sp3">已完成的教学计划(个)</span>
                                        </div>
                                        <div class="percenter-right-data-huantu-part">
                                            <span class="sp1" id="huantu3"></span>
                                            <span class="sp2"><i>{{schcount.finishedCsNum?schcount.finishedCsNum:0}}</i>/{{schcount.signedCsNum?schcount.signedCsNum:0}}</span>
                                            <span class="sp3">已学完课程(个)</span>
                                        </div>
                                        <div class="percenter-right-data-huantu-part">
                                            <span class="sp1" id="huantu4"></span>
                                            <span class="sp2"><i>{{schcount.finishedStudyLength?schcount.finishedStudyLength:0}}</i></span>
                                            <span class="sp3">已获学时(个)</span>
                                        </div>
                                        <div class="percenter-right-data-huantu-part">
                                            <span class="sp1" id="huantu5"></span>
                                            <span class="sp2"><i>{{schcount.signedStudyLength?schcount.signedStudyLength:0}}</i></span>
                                            <!--<span class="sp4"><i>36</i>小时<br><i>24</i>分钟</span>-->
                                            <span class="sp3">已报课程学时(个)</span>
                                        </div>
                                    </div>
                                </div>
                                <div class="percenter-right-notice" v-if="sitemenu==0"><!--功能模块：近期公告-->
                                    <div class="percenter-right-title">
                                        <span>近期公告</span>
                                    </div>
                                    <ul class="percenter-right-notice-ul clearfix">
                                        <li v-for="(notice,index) in noticelist" :key="index"
                                            @click.prevent="goDetails(notice.articleId)"
                                            v-bind:class="{'hot':notice.posid==1}">
                                            <a href="javascript:;" @click.prevent="goDetails(notice.articleId)">{{notice.title}}</a>
                                            <span>{{notice.newsPubDate}}</span>
                                        </li>
                                    </ul>
                                </div>
                                <!--功能模块：我的证书-->
                                <div class="percenter-right-dongtai" v-if="sitemenu==3">
                                    <div class="percenter-right-title">
                                        <span>我的证书</span>
                                    </div>
                                    <table class="percenter-right-dongtai-table">
                                        <tr v-for="(item, index) in certlist" :key="index">
                                            <td class="td3">({{item.ucCertNo}}){{item.ucCertName}}</td>
                                            <td class="td1">{{item.ucGenTime}}</td>
                                            <td class="td1"><a target="_blank"
                                                               :href="'/cert-service/cert/CtUserCert/downloadUserCert?ucId=' + item.ucId">下载</a>
                                            </td>
                                        </tr>
                                        <tr>
                                        <td class="td3">【金属非金属矿山培训】安全生产法规与安全生产管理证书</td>
                                        <td class="td1">2020-07-01 14:30:20</td>
                                        <td class="td1"><a href="">下载</a></td>
                                        </tr>
                                    </table>
                                    <div class="tp-page">
                                        <el-pagination
                                                background
                                                layout="total, sizes, prev, pager, next, jumper"
                                                :page-sizes="[10, 15, 20, 25]"
                                                @current-change="certChange"
                                                @prev-click="certprevClick"
                                                @next-click="certnextClick"
                                                @size-change="certsizeChange"
                                                :total="certnum">
                                        </el-pagination>
                                    </div>
                                </div>
                                <!--功能模块：我的课程-->
                                <div class="percenter-right-myplan" v-if="sitemenu==2">
                                    <div class="percenter-right-title">
                                        <span>我的课程 &nbsp;<text
                                                style="color: red;font-size:14px">(学习时间和进度5分钟之内更新一次数据！)</text></span>
                                    </div>
                                    <!--<div class="percenter-right-myplan-filtrate clearfix">-->
                                    <!--<select name="" id="" class="width1">-->
                                    <!--<option value="">2020年度</option>-->
                                    <!--<option value="">2019年度</option>-->
                                    <!--</select>-->
                                    <!--<select name="" id="" class="width2">-->
                                    <!--<option value="">近三个月</option>-->
                                    <!--<option value="">全部</option>-->
                                    <!--</select>-->
                                    <!--<select name="" id="" class="width1">-->
                                    <!--<option value="">三岗培训</option>-->
                                    <!--<option value="">全部培训</option>-->
                                    <!--</select>-->
                                    <!--<select name="" id="" class="width1">-->
                                    <!--<option value="">选择完成状态</option>-->
                                    <!--<option value="">未完成</option>-->
                                    <!--</select>-->
                                    <!--<button>搜索</button>-->
                                    <!--</div>-->
                                    <div class="common-table">
                                        <table>
                                            <thead>
                                            <td>课程名称</td>
                                            <td width="110px">入驻商家名称</td>
                                            <td>最后学习时间</td>
                                            <td width="90px">学习进度</td>
                                            <td width="90px">学习时间</td>
                                            <td>状&nbsp;&nbsp;态</td>
                                            </thead>
                                            <tr v-for="(item, index) in courselist" :key="index">
                                                <td class="blacktext">{{item.csName}}</td>
                                                <td>{{item.bsName}}</td>
                                                <td>{{item.updateDate}}</td>
                                                <td>{{item.lcsProcess?parseInt(item.lcsProcess):'0'}}%</td>
                                                <td>{{item.lcsStudyTime?getNowTime(item.lcsStudyTime):'未学习'}}</td>
                                                <td v-if="item.lcsFinished=='1'">已完成<br/>
                                                    <a class="bluetext" href="javascript:;"
                                                       @click="goCourseDetails(item.thirdCsId,item.bsId)">[继续学习]
                                                    </a>
                                                </td>
                                                <td v-if="item.lcsFinished=='0'&&item.lcsProcess=='0.00'">
                                                    <a class="bluetext" href="javascript:;"
                                                       @click="goCourseDetails(item.thirdCsId,item.bsId)">[开始学习]
                                                    </a>
                                                </td>
                                                <td v-if="item.lcsFinished=='0'&&item.lcsProcess!=='0.00'">
                                                    <a class="bluetext" href="javascript:;"
                                                       @click="goCourseDetails(item.thirdCsId,item.bsId)">[继续学习]
                                                    </a>
                                                </td>
                                            </tr>
                                            <!--<tr>-->
                                            <!--<td class="blacktext">露天或地下开采安全（小型露天采石场含排土场）课程一</td>-->
                                            <!--<td>三岗培训</td>-->
                                            <!--<td>【金属非金属矿山培训】安全生产法规与安全生产管理取证培训</td>-->
                                            <!--<td>2020</td>-->
                                            <!--<td>2020-07-01 14:30:20</td>-->
                                            <!--<td>12</td>-->
                                            <!--<td class="orangetext">待审核</td>-->
                                            <!--</tr>-->
                                            <!--<tr>-->
                                            <!--<td class="blacktext">露天或地下开采安全（小型露天采石场含排土场）课程一</td>-->
                                            <!--<td>三岗培训</td>-->
                                            <!--<td>【金属非金属矿山培训】安全生产法规与安全生产管理取证培训</td>-->
                                            <!--<td>2020</td>-->
                                            <!--<td>2020-07-01 14:30:20</td>-->
                                            <!--<td>12</td>-->
                                            <!--<td class="redtext a-details">未通过<span><a href="">查看详情</a></span></td>-->
                                            <!--</tr>-->
                                        </table>
                                        <div class="tp-page">
                                            <el-pagination
                                                    background
                                                    layout="total, sizes, prev, pager, next, jumper"
                                                    :page-sizes="[10, 15, 20, 25]"
                                                    @current-change="courseChange"
                                                    @prev-click="courseprevClick"
                                                    @next-click="coursenextClick"
                                                    @size-change="coursesizeChange"
                                                    :total="coursenum">
                                            </el-pagination>
                                        </div>
                                    </div>
                                </div>
                                <!--功能模块：我的培训机构-->
                                <!--<div class="percenter-right-jigou">-->
                                <!--<div class="percenter-right-title">-->
                                <!--<span>我的培训机构</span>-->
                                <!--</div>-->
                                <!--<ul class="percenter-right-jigou-ul">-->
                                <!--<li><a href="">金学安全云服务平台1</a></li>-->
                                <!--<li><a href="">金学安全云服务平台2</a></li>-->
                                <!--</ul>-->
                                <!--</div>-->
                                <!--功能模块：我的培训计划-->
                                <div class="percenter-right-myplan" v-if="sitemenu==1||sitemenu==0">
                                    <div class="percenter-right-title">
                                        <span>我的培训计划</span>
                                    </div>
                                    <!--<div class="percenter-right-myplan-filtrate clearfix">-->
                                    <!--<select name="" id="" class="width1">-->
                                    <!--<option value="">2020年度</option>-->
                                    <!--<option value="">2019年度</option>-->
                                    <!--</select>-->
                                    <!--<select name="" id="" class="width2">-->
                                    <!--<option value="">近三个月</option>-->
                                    <!--<option value="">全部</option>-->
                                    <!--</select>-->
                                    <!--<select name="" id="" class="width1">-->
                                    <!--<option value="">三岗培训</option>-->
                                    <!--<option value="">全部培训</option>-->
                                    <!--</select>-->
                                    <!--<select name="" id="" class="width1">-->
                                    <!--<option value="">选择完成状态</option>-->
                                    <!--<option value="">未完成</option>-->
                                    <!--</select>-->
                                    <!--<button>搜索</button>-->
                                    <!--</div>-->
                                    <table class="myplan-table" v-for="(item,index) in planlist" :key="index">
                                        <tr class="tb-border">
                                            <td class="tb-center tb-orangetext tb-boldtext" style="width: 15%;">培训计划名称
                                            </td>
                                            <td colspan="5" class="tb-title">{{item.tcName}}<span></span></td>
                                        </tr>
                                        <tr>
                                            <td class="tb-center tb-orangetext">项目名称</td>
                                            <td colspan="2" class="tb-graytext">{{item.proName}}</td>
                                            <td class="tb-center tb-orangetext">项目编码</td>
                                            <td colspan="2" class="tb-bluetext">{{item.proCode}}</td>
                                        </tr>
                                        <tr>
                                            <td class="tb-center tb-orangetext">报名开始时间</td>
                                            <td colspan="2" class="tb-graytext">{{item.proSignStartDate}}</td>
                                            <td class="tb-center tb-orangetext">报名结束时间</td>
                                            <td colspan="2" class="tb-graytext">{{item.proSignEndDate}}</td>
                                        </tr>
                                        <tr>
                                            <td class="tb-center tb-orangetext">总学时要求</td>
                                            <td colspan="2" class="tb-graytext">{{item.proStudylength}}</td>
                                            <td class="tb-center tb-orangetext">是否完成</td>
                                            <td colspan="2" v-if="item.finished=='1'" class="tb-graytext">已完成</td>
                                            <td colspan="2" v-if="item.finished!=='1'" class="tb-graytext">未完成</td>
                                        </tr>
                                        <tr>
                                            <td class="tb-center tb-orangetext">简介</td>
                                            <td colspan="5" class="tb-graytext tb-zhengshu">{{item.tcContent}}</td>
                                        </tr>
                                    </table>
                                    <div class="tp-page">
                                        <el-pagination
                                                background
                                                layout="total, sizes, prev, pager, next, jumper"
                                                :page-sizes="[10, 15, 20, 25]"
                                                @current-change="planChange"
                                                @prev-click="planprevClick"
                                                @next-click="plannextClick"
                                                @size-change="plansizeChange"
                                                :total="plannum">
                                        </el-pagination>
                                    </div>
                                </div>
                                <div class="percenter-right-myplan" v-if="sitemenu==4"><!--功能模块：我的订单-->
                                    <div class="percenter-right-title">
                                        <span>我的订单</span>
                                    </div>
                                    <!--<div class="percenter-right-myplan-filtrate clearfix">-->
                                    <!--<select name="" id="" class="width1">-->
                                    <!--<option value="">2020年度</option>-->
                                    <!--<option value="">2019年度</option>-->
                                    <!--</select>-->
                                    <!--<select name="" id="" class="width2">-->
                                    <!--<option value="">近三个月</option>-->
                                    <!--<option value="">全部</option>-->
                                    <!--</select>-->
                                    <!--<select name="" id="" class="width1">-->
                                    <!--<option value="">三岗培训</option>-->
                                    <!--<option value="">全部培训</option>-->
                                    <!--</select>-->
                                    <!--<select name="" id="" class="width1">-->
                                    <!--<option value="">选择完成状态</option>-->
                                    <!--<option value="">未完成</option>-->
                                    <!--</select>-->
                                    <!--<button>搜索</button>-->
                                    <!--</div>-->
                                    <table class="myplan-table" v-for="(item, index) in orderlist" :key="index">
                                        <tr class="tb-border">
                                            <td class="tb-center tb-orangetext tb-boldtext" style="width: 15%;">订单名称
                                            </td>
                                            <td colspan="5" class="tb-title tb-zhengshu">{{item.name}}
                                                <span v-if="item.status==1">【待付订单】<a href="javascript:;"
                                                                                     @click="toPay(item.orderId,item.bsId)">继续支付</a></span>
                                                <span v-if="item.status==2">【过期订单】</span>
                                                <span v-if="item.status==3">【已完成订单】</span>
                                                <span v-if="item.status==6">【已退订单】</span>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td class="tb-center tb-orangetext">订单编号</td>
                                            <td colspan="2" class="tb-graytext">{{item.sn}}</td>
                                            <td class="tb-center tb-orangetext">订单金额</td>
                                            <td colspan="2" class="tb-bluetext">￥{{item.realPrice}}</td>
                                        </tr>
                                        <tr>
                                            <td class="tb-center tb-orangetext">订单时间</td>
                                            <td colspan="2" class="tb-graytext">{{item.createDate}}</td>
                                            <td class="tb-center tb-orangetext">下单人</td>
                                            <td colspan="2" class="tb-redtext">{{item.userName}}</td>
                                        </tr>
                                        <tr>
                                            <td class="tb-center tb-orangetext">订单备注</td>
                                            <td colspan="5" class="tb-graytext tb-zhengshu">{{item.remark}}
                                            </td>
                                        </tr>
                                    </table>
                                    <div class="tp-page">
                                        <el-pagination
                                                background
                                                layout="total, sizes, prev, pager, next, jumper"
                                                :page-sizes="[10, 15, 20, 25]"
                                                @current-change="orderChange"
                                                @prev-click="orderprevClick"
                                                @next-click="ordernextClick"
                                                @size-change="ordersizeChange"
                                                :total="ordernum">
                                        </el-pagination>
                                    </div>
                                </div>
                                <div class="percenter-right-myinfo" v-if="sitemenu==5">
                                    <div class="percenter-right-title">
                                        <span>信息设置</span>
                                    </div>
                                    <div class="orgcenter-peixun-shenbao-part">
                                        <el-form :model="userData" :rules="rules" ref="userData" label-width="100px"
                                                 class="userData-info">
                                            <el-form-item label="姓名" prop="custName">
                                                <el-input v-model="userData.custName"></el-input>
                                            </el-form-item>
                                            <!--<el-form-item label="活动区域" prop="region">-->
                                            <!--<el-select v-model="userData.region" placeholder="请选择活动区域">-->
                                            <!--<el-option label="区域一" value="shanghai"></el-option>-->
                                            <!--<el-option label="区域二" value="beijing"></el-option>-->
                                            <!--</el-select>-->
                                            <!--</el-form-item>-->
                                            <el-form-item label="性别" prop="resource">
                                                <el-radio-group v-model="userData.sex">
                                                    <el-radio label="1">男</el-radio>
                                                    <el-radio label="2">女</el-radio>
                                                </el-radio-group>
                                            </el-form-item>
                                            <el-form-item label="身份证" prop="idcarNo">
                                                <el-input v-model="userData.idcarNo"></el-input>
                                            </el-form-item>
                                            <el-form-item label="手机号" prop="phone">
                                                <el-input v-model.number="userData.phone"></el-input>
                                            </el-form-item>
                                            <el-form-item label="地址" prop="adress">
                                                <el-input v-model="userData.adress"></el-input>
                                            </el-form-item>
                                            <el-form-item label="单位" prop="office">
                                                <el-input v-model="userData.office"></el-input>
                                            </el-form-item>
                                            <el-form-item label="头像" prop="imageUrl">
                                                <el-upload
                                                        class="avatar-uploader"
                                                        :action="uploadurl"
                                                        :show-file-list="false"
                                                        :on-success="handleAvatarSuccess"
                                                        :before-upload="beforeAvatarUpload">
                                                    <img v-if="imageUrl" :src="imageUrl" class="avatar">
                                                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                                                </el-upload>
                                            </el-form-item>
                                            <el-form-item>
                                                <el-button type="primary" @click="usersave('userData')">确认并保存
                                                </el-button>
                                                <!--<el-button @click="resetForm('userData')">重置</el-button>-->
                                            </el-form-item>
                                        </el-form>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script type="text/babel">
  import formMixin from '../../../src/mixins/formMixin';
  import lenye_base from 'lenye_base';
  import echarts from 'echarts';
  import msg from '../../message';

  export default {
    name: 'ElAccountPerson',
    mixins: [formMixin],
    components: {},
    data() {
      let idCardValidity = (rule, code, callback) => {
        var city = {
          11: '北京',
          12: '天津',
          13: '河北',
          14: '山西',
          15: '内蒙古',
          21: '辽宁',
          22: '吉林',
          23: '黑龙江 ',
          31: '上海',
          32: '江苏',
          33: '浙江',
          34: '安徽',
          35: '福建',
          36: '江西',
          37: '山东',
          41: '河南',
          42: '湖北 ',
          43: '湖南',
          44: '广东',
          45: '广西',
          46: '海南',
          50: '重庆',
          51: '四川',
          52: '贵州',
          53: '云南',
          54: '西藏 ',
          61: '陕西',
          62: '甘肃',
          63: '青海',
          64: '宁夏',
          65: '新疆',
          71: '台湾',
          81: '香港',
          82: '澳门',
          91: '国外 '
        };
        var tip = '';
        var pass = true;

        if (!code || !/^\d{6}(18|19|20)?\d{2}(0[1-9]|1[012])(0[1-9]|[12]\d|3[01])\d{3}(\d|X)$/i.test(code)) {
          tip = '身份证号格式错误';
          pass = false;
        } else if (!city[code.substr(0, 2)]) {
          tip = '地址编码错误';
          pass = false;
        } else {
          // 18位身份证需要验证最后一位校验位
          if (code.length === 18) {
            // code = code.split('');
            // ∑(ai×Wi)(mod 11)
            // 加权因子
            // var factor = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2];
            // // 校验位
            // var parity = [1, 0, 'X', 9, 8, 7, 6, 5, 4, 3, 2];
            // var sum = 0;
            // var ai = 0;
            // var wi = 0;
            // for (var i = 0; i < 17; i++) {
            //     ai = code[i];
            //     wi = factor[i];
            //     sum += ai * wi;
            // }
            // var last = parity[sum % 11];
            // if (parity[sum % 11] !== code[17]) {
            //     tip = '校验位错误';
            //     pass = false;
            // }
          }
        }
        if (!pass) {
          callback(new Error(tip));
        } else {
          callback();
        }
        // if (!pass) alert(tip)
        // return pass
      };
      return {
        noticelist: [],
        courselist: [],
        coursenum: 0,
        courserows: 10,
        coursepage: 1,
        certlist: [],
        certnum: 0,
        certrows: 10,
        certpage: 1,
        orderlist: [],
        ordernum: 0,
        orderrows: 10,
        orderpage: 1,
        planlist: [],
        plannum: 0,
        planrows: 10,
        planpage: 1,
        //    站点数据
        siteData: '',
        //    用户数据
        userData: '',
        userinfo: {
          'photo': '',
          'idcarNo': '',
          'phone': '',
          'custName': ''
        },
        coursecount: [],
        schcount: [],
        sitemenu: 0, //侧边选中
        //信息提交
        custName: '',
        imageUrl: '',
        imageUrlid: '',
        uploadurl: '',
        rules: {
          custName: [
            {required: true, message: '请输入姓名', trigger: 'blur'},
            {min: 0, max: 18, message: '长度在 0 到 18 个字符', trigger: 'blur'}
          ],
          idcarNo: [
            {required: false, message: '请输入证件号', trigger: 'blur'},
            {
              pattern: /(^\d{8}(0\d|10|11|12)([0-2]\d|30|31)\d{3}$)|(^\d{6}(18|19|20)\d{2}(0\d|10|11|12)([0-2]\d|30|31)\d{3}(\d|X|x)$)/,
              message: '请输入正确的证件号',
              trigger: 'blur'
            },
            {validator: idCardValidity, trigger: 'blur'}
          ],
          phone: [
            {required: true, message: '请输入手机号', trigger: 'blur'},
            {
              pattern: /^((0\d{2,3}-\d{7,8})|(1[358497]\d{9}))$/,
              message: '请输入合法手机号',
              trigger: 'blur'
            }
          ]
        }
      };
    },
    created() {
      this.siteData = lenye_base.site_data.getsiteData();
      console.log('站点', this.siteData);
      this.userData = lenye_base.user_data.getuserData();
      console.log('个人信息', this.userData);
    },
    mounted() {
      console.log('站点数据', this.siteData);
      this.uploadurl = lenye_base.base_data.getapiUrl() + lenye_base.api_url.file.upload;
      this.getuserdetail(1);
      this.getData();
      this.getuserplan();
      this.getNowTime();
    },
    watch: {
      'sitemenu'(newvalue) {
        if (newvalue === 1) {
          this.getuserplan();
        } else if (newvalue === 2) {
          this.getusercourse();
        } else if (newvalue === 3) {
          this.getusercert();
        } else if (newvalue === 4) {
          this.getuserorder();
        } else if (newvalue === 5) {
          this.getuserdetail();
        }
      }
    },
    methods: {
        getNowTime(value){
            var secondTime = parseInt(value); // 秒
            var minuteTime = 0 // 分
            var hourTime = 0 // 小时
            var dayTime = 0 // 天
            var result = ''
            if (value < 60) {
                result = secondTime + '秒'
            } else {
                if (secondTime >= 60) { // 如果秒数大于60，将秒数转换成整数
                    // 获取分钟，除以60取整数，得到整数分钟
                    minuteTime = parseInt(secondTime / 60)
                    // 获取秒数，秒数取佘，得到整数秒数
                    secondTime = parseInt(secondTime % 60)
                    // 如果分钟大于60，将分钟转换成小时
                    if (minuteTime >= 60) {
                        // 获取小时，获取分钟除以60，得到整数小时
                        hourTime = parseInt(minuteTime / 60)
                        // 获取小时后取佘的分，获取分钟除以60取佘的分
                        minuteTime = parseInt(minuteTime % 60)
                        if (hourTime >= 24) {
                            // 获取天数， 获取小时除以24，得到整数天
                            dayTime = parseInt(hourTime / 24)
                            // 获取小时后取余小时，获取分钟除以24取余的分；
                            hourTime = parseInt(hourTime % 24)
                        }
                    }
                }
                if (secondTime > 0) {
                    secondTime = parseInt(secondTime) >= 10 ? secondTime : secondTime
                    result = '' + secondTime + '秒'
                }
                if (minuteTime > 0) {
                    minuteTime = parseInt(minuteTime) >= 10 ? minuteTime : minuteTime;
                    result = '' + minuteTime + '分钟' + result
                }
                if (hourTime > 0) {
                    result = '' + parseInt(hourTime) + '小时' + result
                }
                if (dayTime > 0) {
                    result = '' + parseInt(dayTime) + '天' + result
                }
            }
            return result
        },
      goCourseDetails(csId, bsId) {
        if (csId) {
          let token = '';
          if (lenye_base.user_data.getuserData()) {
            token = lenye_base.user_data.getuserData().token;
          }
          // window.open(csId + '&token=' + token);

          lenye_base.httpPost(lenye_base.base_data.getapiUrl() + '/base-service/api2/thirdBusinessMng/queryById.do', lenye_base.base_data.getformatting({
            bsId: bsId
          }), function(res) {
            if (res.success == '1') {
              var url = res.data.callbaclUrl02;
              if (url) {
                window.open(url.replace('{courseId}', csId).replace('{token}', token));
              } else {
                msg.error('无学习地址');
              }
            } else {
              msg.error(res.message);
            }
          });
        } else {
          msg.warning('暂无课程链接');
        }
      },
      toPay(orderId, bsId) {
        const that = this;
        if (orderId) {
          let token = '';
          if (lenye_base.user_data.getuserData()) {
            token = lenye_base.user_data.getuserData().token;
          }
          lenye_base.httpPost(lenye_base.base_data.getapiUrl() + '/base-service/api2/thirdBusinessMng/queryById.do', lenye_base.base_data.getformatting({
            bsId: bsId
          }), function(res) {
            if (res.success == '1') {
              var url = res.data.callbaclUrl01;
              if (url) {
                that.isPay(orderId);
                window.open(url.replace('{orderId}', orderId).replace('{token}', token));
              } else {
                msg.error('无支付地址');
              }
            } else {
              msg.error(res.message);
            }
          });
        } else {
          msg.warning('暂无支付地址');
        }
      },
      isPay(orderIds) {
        var hasPay = setInterval(() => {
          if (this.sitemenu === 4) {
            lenye_base.httpPost(lenye_base.base_data.getapiUrl() + '/orderform-service/api2/ordOrderform/queryMultiOrderStatus.do', lenye_base.base_data.getformatting({
              orderIds: orderIds
            }), function(res) {
              if (res.success == '1') {
                if (res.data.status === '0') {
                  this.getuserorder();
                  msg.success('支付完成！');
                  clearInterval(hasPay);
                }
              } else {
                msg.error(res.message);
              }
            });
          }
        }, 3000);
      },
      // 详情
      goDetails(articleId) {
        window.open(`/infodetail?id=${articleId}`);
      },
      //    获取公告列表
      getData() {
        const that = this;
        lenye_base.httpPost(lenye_base.base_data.getapiUrl() + lenye_base.api_url.news.queryShowPage, lenye_base.base_data.getformatting({
          siteId: this.siteData.siteId,
          sorts: 'updateDate=0',
          catName: '近期公告',
          page: 1,
          rows: 8
        }), function(e) {
          console.log('近期公告', e);
          that.noticelist = e.data;
        });
        lenye_base.httpPost(lenye_base.base_data.getapiUrl() + '/course-service/api2/crsCustLearnCourse/queryBsNumByCustId.do', lenye_base.base_data.getformatting({
          studyUserId: this.userData.custId
        }), function(e) {
          console.log('课程统计', e);
          that.coursecount = e.data;
        });
        lenye_base.httpPost(lenye_base.base_data.getapiUrl() + '/schoolclass-service/api2/proStudentTeachcontent/studentCsAndTcCount.do', lenye_base.base_data.getformatting({
          custId: this.userData.custId
        }), function(e) {
          console.log('计划统计', e);
          that.schcount = e.data;
        });
        let huantu1 = echarts.init(document.getElementById('huantu1'));
        let huantu2 = echarts.init(document.getElementById('huantu2'));
        let huantu3 = echarts.init(document.getElementById('huantu3'));
        let huantu4 = echarts.init(document.getElementById('huantu4'));
        let huantu5 = echarts.init(document.getElementById('huantu5'));
        huantu1.setOption({
          backgroundColor: '#fff',
          title: {
            text: ``,
            subtext: '',
            left: 'center',
            top: 'center',//top待调整
            textStyle: {
              color: '#000',
              fontSize: 18
            },
            subtextStyle: {
              color: '#000',
              fontSize: 14,
              top: 'center'
            },
            itemGap: -4//主副标题间距
          },
          series: [{
            name: 'pie1',
            type: 'pie',
            clockWise: true,
            radius: ['46px', '50px'],
            itemStyle: {
              normal: {
                label: {
                  show: false
                },
                labelLine: {
                  show: false
                }
              }
            },
            hoverAnimation: false,
            data: [{
              value: 80,
              name: 'completed',
              itemStyle: {
                normal: {
                  borderWidth: 6,
                  borderColor: {
                    colorStops: [{
                      offset: 0,
                      color: '#c258a1' // 0% 处的颜色
                    }, {
                      offset: 1,
                      color: '#ebba38' // 100% 处的颜色
                    }]
                  },
                  color: { // 完成的圆环的颜色
                    colorStops: [{
                      offset: 0,
                      color: '#1d54f7' // 0% 处的颜色
                    }, {
                      offset: 1,
                      color: '#68eaf9' // 100% 处的颜色
                    }]
                  },
                  label: {
                    show: false
                  },
                  labelLine: {
                    show: false
                  }
                }
              }
            }, {
              name: 'gap',
              value: 100 - 80,
              itemStyle: {
                normal: {
                  label: {
                    show: false
                  },
                  labelLine: {
                    show: false
                  },
                  color: 'rgba(0, 0, 0, 0)',
                  borderColor: 'rgba(0, 0, 0, 0)',
                  borderWidth: 0
                }
              }
            }]
          }]
        });
        huantu2.setOption({
          backgroundColor: '#fff',
          title: {
            text: ``,
            subtext: '',
            left: 'center',
            top: 'center',//top待调整
            textStyle: {
              color: '#000',
              fontSize: 18
            },
            subtextStyle: {
              color: '#000',
              fontSize: 14,
              top: 'center'
            },
            itemGap: -4//主副标题间距
          },
          series: [{
            name: 'pie1',
            type: 'pie',
            clockWise: true,
            radius: ['46px', '50px'],
            itemStyle: {
              normal: {
                label: {
                  show: false
                },
                labelLine: {
                  show: false
                }
              }
            },
            hoverAnimation: false,
            data: [{
              value: 80,
              name: 'completed',
              itemStyle: {
                normal: {
                  borderWidth: 6,
                  borderColor: {
                    colorStops: [{
                      offset: 0,
                      color: '#ff5acc'// 0% 处的颜色
                    }, {
                      offset: 1,
                      color: '#fff30b'// 100% 处的颜色
                    }]
                  },
                  color: { // 完成的圆环的颜色
                    colorStops: [{
                      offset: 0,
                      color: '#ff5acc'// 0% 处的颜色
                    }, {
                      offset: 1,
                      color: '#fff30b' // 100% 处的颜色
                    }]
                  },
                  label: {
                    show: false
                  },
                  labelLine: {
                    show: false
                  }
                }
              }
            }, {
              name: 'gap',
              value: 100 - 80,
              itemStyle: {
                normal: {
                  label: {
                    show: false
                  },
                  labelLine: {
                    show: false
                  },
                  color: 'rgba(0, 0, 0, 0)',
                  borderColor: 'rgba(0, 0, 0, 0)',
                  borderWidth: 0
                }
              }
            }]
          }]
        });
        huantu3.setOption({
          backgroundColor: '#fff',
          title: {
            text: ``,
            subtext: '',
            left: 'center',
            top: 'center',//top待调整
            textStyle: {
              color: '#000',
              fontSize: 18
            },
            subtextStyle: {
              color: '#000',
              fontSize: 14,
              top: 'center'
            },
            itemGap: -4//主副标题间距
          },
          series: [{
            name: 'pie1',
            type: 'pie',
            clockWise: true,
            radius: ['46px', '50px'],
            itemStyle: {
              normal: {
                label: {
                  show: false
                },
                labelLine: {
                  show: false
                }
              }
            },
            hoverAnimation: false,
            data: [{
              value: 80,
              name: 'completed',
              itemStyle: {
                normal: {
                  borderWidth: 6,
                  borderColor: {
                    colorStops: [{
                      offset: 0,
                      color: '#0df6fc'// 0% 处的颜色
                    }, {
                      offset: 1,
                      color: '#3e57ff'// 100% 处的颜色
                    }]
                  },
                  color: { // 完成的圆环的颜色
                    colorStops: [{
                      offset: 0,
                      color: '#0df6fc'// 0% 处的颜色
                    }, {
                      offset: 1,
                      color: '#3e57ff' // 100% 处的颜色
                    }]
                  },
                  label: {
                    show: false
                  },
                  labelLine: {
                    show: false
                  }
                }
              }
            }, {
              name: 'gap',
              value: 100 - 80,
              itemStyle: {
                normal: {
                  label: {
                    show: false
                  },
                  labelLine: {
                    show: false
                  },
                  color: 'rgba(0, 0, 0, 0)',
                  borderColor: 'rgba(0, 0, 0, 0)',
                  borderWidth: 0
                }
              }
            }]
          }]
        });
        huantu4.setOption({
          backgroundColor: '#fff',
          title: {
            text: ``,
            subtext: '',
            left: 'center',
            top: 'center',//top待调整
            textStyle: {
              color: '#000',
              fontSize: 18
            },
            subtextStyle: {
              color: '#000',
              fontSize: 14,
              top: 'center'
            },
            itemGap: -4//主副标题间距
          },
          series: [{
            name: 'pie1',
            type: 'pie',
            clockWise: true,
            radius: ['46px', '50px'],
            itemStyle: {
              normal: {
                label: {
                  show: false
                },
                labelLine: {
                  show: false
                }
              }
            },
            hoverAnimation: false,
            data: [{
              value: 80,
              name: 'completed',
              itemStyle: {
                normal: {
                  borderWidth: 6,
                  borderColor: {
                    colorStops: [{
                      offset: 0,
                      color: '#c93ae9'// 0% 处的颜色
                    }, {
                      offset: 1,
                      color: '#3e57ff'// 100% 处的颜色
                    }]
                  },
                  color: { // 完成的圆环的颜色
                    colorStops: [{
                      offset: 0,
                      color: '#c93ae9'// 0% 处的颜色
                    }, {
                      offset: 1,
                      color: '#33d8e5' // 100% 处的颜色
                    }]
                  },
                  label: {
                    show: false
                  },
                  labelLine: {
                    show: false
                  }
                }
              }
            }, {
              name: 'gap',
              value: 100 - 80,
              itemStyle: {
                normal: {
                  label: {
                    show: false
                  },
                  labelLine: {
                    show: false
                  },
                  color: 'rgba(0, 0, 0, 0)',
                  borderColor: 'rgba(0, 0, 0, 0)',
                  borderWidth: 0
                }
              }
            }]
          }]
        });
        huantu5.setOption({
          backgroundColor: '#fff',
          title: {
            text: ``,
            subtext: '',
            left: 'center',
            top: 'center',//top待调整
            textStyle: {
              color: '#000',
              fontSize: 18
            },
            subtextStyle: {
              color: '#000',
              fontSize: 14,
              top: 'center'
            },
            itemGap: -4//主副标题间距
          },
          series: [{
            name: 'pie1',
            type: 'pie',
            clockWise: true,
            radius: ['46px', '50px'],
            itemStyle: {
              normal: {
                label: {
                  show: false
                },
                labelLine: {
                  show: false
                }
              }
            },
            hoverAnimation: false,
            data: [{
              value: 80,
              name: 'completed',
              itemStyle: {
                normal: {
                  borderWidth: 6,
                  borderColor: {
                    colorStops: [{
                      offset: 0,
                      color: '#71f79a'// 0% 处的颜色
                    }, {
                      offset: 1,
                      color: '#e1ee39'// 100% 处的颜色
                    }]
                  },
                  color: { // 完成的圆环的颜色
                    colorStops: [{
                      offset: 0,
                      color: '#71f79a'// 0% 处的颜色
                    }, {
                      offset: 1,
                      color: '#e1ee39' // 100% 处的颜色
                    }]
                  },
                  label: {
                    show: false
                  },
                  labelLine: {
                    show: false
                  }
                }
              }
            }, {
              name: 'gap',
              value: 100 - 80,
              itemStyle: {
                normal: {
                  label: {
                    show: false
                  },
                  labelLine: {
                    show: false
                  },
                  color: 'rgba(0, 0, 0, 0)',
                  borderColor: 'rgba(0, 0, 0, 0)',
                  borderWidth: 0
                }
              }
            }]
          }]
        });
      },
      //    获取课程列表
      getusercourse() {
        const that = this;
        function getlist(){
          lenye_base.httpPost(lenye_base.base_data.getapiUrl() + '/course-service/api2/crsCustLearnCourse/queryUserCoursePageById.do', lenye_base.base_data.getformatting({
            orderType: 1,
            courseinfo: 1,
            page: that.coursepage,
            rows: that.courserows
          }), function(e) {
            console.log('我的课程', e);
            that.courselist = e.data;
            that.coursenum = e.totalCount;
          });
        }
        getlist();
        setInterval(() => {
          getlist()
        }, 3e4);
      },
      // 翻页：当前页数的显示条数改变触发
      coursesizeChange(rows) {
        console.log(rows);
        this.courserows = rows;
        this.getusercourse();
      },
      // 翻页：选中当前页
      courseChange(page) {
        console.log(page);
        this.coursepage = page;
        this.getusercourse();
      },
      // 翻页：上一页
      courseprevClick(page) {
        console.log(page);
        this.coursepage = page;
        this.getusercourse();
      },
      // 翻页：下一页
      coursenextClick(page) {
        console.log(page);
        this.coursepage = page;
        this.getusercourse();
      },
      //    获取证书列表
      getusercert() {
        const that = this;
        lenye_base.httpPost(lenye_base.base_data.getapiUrl() + lenye_base.api_url.cert.certList, lenye_base.base_data.getformatting({
          ucUserId: this.userData.custId,
          page: 1,
          rows: 10
        }), function(e) {
          console.log('我的证书', e);
          that.certlist = e.data;
          that.certnum = e.totalCount;
        });
      },
      // 翻页：当前页数的显示条数改变触发
      certsizeChange(rows) {
        console.log(rows);
        this.certrows = rows;
        this.getusercert();
      },
      // 翻页：选中当前页
      certChange(page) {
        console.log(page);
        this.certpage = page;
        this.getusercert();
      },
      // 翻页：上一页
      certprevClick(page) {
        console.log(page);
        this.certpage = page;
        this.getusercert();
      },
      // 翻页：下一页
      certnextClick(page) {
        console.log(page);
        this.certpage = page;
        this.getusercert();
      },
      //    获取订单列表
      getuserorder() {
        const that = this;
        lenye_base.httpPost(lenye_base.base_data.getapiUrl() + '/orderform-service/api2/ordOrderform/queryManagePageByCurId.do', lenye_base.base_data.getformatting({
          page: this.orderpage,
          rows: this.orderrows
        }), function(e) {
          console.log('我的订单', e);
          that.orderlist = e.data;
          that.ordernum = e.totalCount;
        });
      },
      // 翻页：当前页数的显示条数改变触发
      ordersizeChange(rows) {
        console.log(rows);
        this.orderrows = rows;
        this.getuserorder();
      },
      // 翻页：选中当前页
      orderChange(page) {
        console.log(page);
        this.orderpage = page;
        this.getuserorder();
      },
      // 翻页：上一页
      orderprevClick(page) {
        console.log(page);
        this.orderpage = page;
        this.getuserorder();
      },
      // 翻页：下一页
      ordernextClick(page) {
        console.log(page);
        this.orderpage = page;
        this.getuserorder();
      },
      //    获取计划列表
      getuserplan() {
        const that = this;
        lenye_base.httpPost(lenye_base.base_data.getapiUrl() + lenye_base.api_url.schoolclass.proList, lenye_base.base_data.getformatting({
          sorts: 'singupDate=0',
          page: this.planpage,
          rows: this.planrows
        }), function(e) {
          console.log('我的计划', e);
          that.planlist = e.data;
          that.plannum = e.totalCount;
        });
      },
      // 翻页：当前页数的显示条数改变触发
      plansizeChange(rows) {
        console.log(rows);
        this.planrows = rows;
        this.getuserplan();
      },
      // 翻页：选中当前页
      planChange(page) {
        console.log(page);
        this.planpage = page;
        this.getuserplan();
      },
      // 翻页：上一页
      planprevClick(page) {
        console.log(page);
        this.planpage = page;
        this.getuserplan();
      },
      // 翻页：下一页
      plannextClick(page) {
        console.log(page);
        this.planpage = page;
        this.getuserplan();
      },
      //    获取个人信息详情
      getuserdetail(type) {
        const that = this;
        lenye_base.httpPost(lenye_base.base_data.getapiUrl() + lenye_base.api_url.base.detail, lenye_base.base_data.getformatting({
          pt4dict: ''
        }), function(e) {
          if (e.success === '1') {
            console.log('我的信息', e);
            that.userData = e.data;
            if (type === 1) {
              that.userinfo.custName = e.data.custName;
              that.userinfo.phone = e.data.phone;
              that.userinfo.photo = e.data.photo;
              that.userinfo.idcarNo = e.data.idcarNo;
            }
            that.imageUrl = e.data.photo;
          } else {
            that.$message({
              showClose: true,
              message: e.message,
              type: 'warning'
            });
          }
          ;
        });
      },
      usersave() {
        const that = this;
        lenye_base.httpPost(lenye_base.base_data.getapiUrl() + '/base-service/api/cust/userSelf/save.do', lenye_base.base_data.getformatting({
          custId: that.userData.custId,
          custName: that.userData.custName,
          phone: that.userData.phone,
          idcarNo: that.userData.idcarNo,
          adress: that.userData.adress,
          office: that.userData.office,
          photo: that.imageUrlid,
          sex: that.userData.sex
        }), function(e) {
          console.log('我的信息', e);
          if (e.success === '1') {
            that.$message({
              showClose: true,
              message: '保存成功',
              type: 'success'
            });
            window.location.reload();
          } else {
            that.$message({
              showClose: true,
              message: e.message,
              type: 'warning'
            });
          }
          ;
        });
      },
      handleAvatarSuccess(res, file) {
        console.log(res);
        console.log(file);
        // this.imageUrl = URL.createObjectURL(file.raw);
        this.imageUrl = res.data.fileUrl;
        this.imageUrlid = res.data.fileId;
      },
      beforeAvatarUpload(file) {
        console.log(file);
        const isJPG = file.type === 'image/jpeg' || 'image/png';
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return isJPG && isLt2M;
      }
    }
  };
</script>
