<template>
  <div class="userCenter">
    <header>
      <span class="fl icon-header_icon_left" @click="$router.push({path: '/'})"></span>
    </header>

    <div class="bg">
      <img src="../../../static/img/tu.png"  class="bg-img">
      <div class="clearfix">
        <img :src="loginInfo.header" alt="用户图像">
        <p>{{loginInfo.member_realname}}<br>账号到期时间：{{loginInfo.end_time | format}}</p>
      </div>
      <div class="daohang">
        <div class="daohang1">
          <p>需学习</p>
          <p><span>{{time.study_num}}</span>课</p>
        </div>
        <div class="daohang1">
          <p>已完成</p>
          <p><span>{{time.study_course_num}}</span>课</p>
        </div>
        <div class="daohang1 liuyan1">
          <p>剩余应学</p>
          <p><span>{{time.study_num - time.study_course_num}}</span>课</p>
        </div>

      </div>
    </div>
    <!-- goPage('/ExamList') -->
    <div class="kaoshi" @click="setPopupVisible">
      <img src="../../../static/img/shijuan.png" alt="">
      <p>考试记录</p>
    </div>
    <mt-popup
      v-model="popupVisible"
      popup-transition="popup-fade"
      style="width:100%;height:100%;"
    >
    <mt-button @click="goPage('/ExamList',2)" type="default" class="" style="width:100%;height:50%">模拟考试成绩</mt-button>
    <mt-button @click="goPage('/ExamList',3)" type="default" class="" style="width:100%;height:50%">正式考试成绩</mt-button>
    </mt-popup>
    <ul>
     <li>
        <div class="clearfix">
          <img src="../../../static/img/xsjc.png" width="24" height="24" alt="">
          <p>新手教程</p>
          <div class="clearfixR">
             <mt-switch v-model="tutorial" @change="headJiao"></mt-switch>
          </div>
        </div>
      </li>
      <li v-for="(v,k) in list">
        <div v-for="item in v" :key="item.key" class="clearfix" :class="item.border?'borderBotton':''" @click="goPage(item.link)">
          <img :src="item.img" width="24" height="24" alt="">
          <p>{{ item.desc }}</p>
        </div>
      </li>
    </ul>

  </div>
</template>

<script>
  import { mapState } from "vuex";
  import { Toast } from "mint-ui";
  import { getStore, removeStore, setStore } from '@/utils/storage'
  export default {
    name: "UserCenter",
    data(){
      return {
        user:{},
        tutorial: true,  //0是开 1是关
        list:[
          [
            {
              key:1,
              img:'/static/img/shezhi.png',
              desc:'修改密码',
              border:false,
              link:'/user/changepwd'
            }
          ],
          [
            {
              key:2,
              img:'../../../static/img/bind.png',
              desc:'绑定手机号',
              border:false,
              link:'/user/bind'
            }
          ],
          [
            {
              key:4,
              img:'../../../static/img/upload.jpg',
              desc:'上传证件照',
              border:true,
              link:'/user/uploadphoto'
            },
          ],
          [
            {
              key:3,
              img:'../../../static/img/tuichu.png',
              desc:'退出登录',
              border:true,
              link:'1'
            },
          ],
          
          // [
          //   {
          //     key:5,
          //     img:'../../../static/img/wysiwygEditor.jpg',
          //     desc:'反馈',
          //     border:true,
          //     link:'/user/use'
          //   },
          // ],
        ],
        time:{study_num:0, study_section_num:0, study_course_num:0},
        popupVisible: false,
      }
    },
    methods:{
      goback(){
        this.$router.go(-1);
      },
      goPage (path,num) {
        if (path == 1){
          this.quit();
        } else {
          this.$router.push({path: path,query:{num:num}})
        }
      },
      quit(){
        this.getData("/Member/loginOut",{ token:getStore('token') }).then(
          data => {
              if(data.code){
                Toast(data.msg)
                removeStore('token')
                this.$router.push({ path: '/login2' });
              }
          },err => {
          })
      },
      getPageData(){
        this.getData('/Member/getStudyTime',{token:getStore('token')}).then(
          data=>{
            if(data.code==1){
              this.time = data.data;
              // console.log("=------------",data.data)
            }else{
              Toast(data.msg);
            }
          },
          err=>{  })
          this.getData('/Member/getFindTutorial',{token:getStore('token')}).then(
           data=>{
             if(data.code==1){
               if(data.data == 1){
                 this.tutorial = false
               }else{
                 this.tutorial = true
               }
               setStore('is_lead1',data.data)
             }else{
               Toast(data.msg);
             }
          })
      },
      headJiao(){
        let a = ''
        if(this.tutorial == false){
          a = 1
        }else{
          a = 0
        }
        this.getData('/Member/getTutorial',{token:getStore('token'), tutorial: a}).then(
         data=>{
           if(data.code==1){
             Toast(data.msg);
           }else{
             this.tutorial = true
             Toast(data.msg);
           }
           setStore('is_lead1',a)
        })
      },
      setPopupVisible() {
        this.popupVisible = true;
      },
    
    },
    mounted(){
      this.getPageData();
    },
    created(){
    },
    computed: {
      ...mapState(["loginInfo"])
    }

  }
</script>

<style lang="scss" scoped>
  .userCenter{
    header {
      width: 100%;
      height: 5rem;
      font-size: 1rem;
      position: fixed;
      top: 0;
      z-index: 99;
      .icon-header_icon_left {
        line-height: 5rem;
        display: inline-block;
        width: 6rem;
        height: 100%;
        &::before {
          font-size: 1.8rem;
        }
      }
    }
    .bg{
      height: 20rem;
      padding-top: 5rem;
      position: relative;
      .bg-img{
        display: block;
        width: 100%;
        height: 100%;
        z-index: -1;
        position: absolute;
        top: 0;
        left: 0;
      }
      .clearfix {
        padding: 0 2rem;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        color: #fff;
        img{
          width: 6rem;
          height: 6rem;
          object-fit: contain;
        }
        p{
          font-size:1.3rem;
          font-family:MicrosoftYaHei;
          font-weight:400;
          margin-left: 1rem;
          text-align: left;
        }
      }
      .daohang{
        width: 90%;
        height: 6rem;
        margin:2rem auto;
        display: flex;
        justify-content: space-between;
        align-items: center;
        color: #fff;
        .daohang1{
          width: 335%;
          border-right: 1px solid #CCCCCC;
          font-size:1.35rem;
          span{
            font-size:2.08rem;
          }
        }
        .liuyan1{
          border-right: none;
        }
        .tupian{
          width: 2.5rem;
          height: 2.5rem;
          margin-bottom: 0.5rem;
        }
        .liuyan{
          height: 2rem;
        }

      }
    }

    .kaoshi{
      width: 90%;
      height: 4rem;
      margin:2rem auto;
      background: url("../../../static/img/shijuanbg.png");
      background-size: 100% 100%;
      font-size:1.35rem;
      font-family:MicrosoftYaHei;
      font-weight:400;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      color: #4B2600;
      img{
        width: 2rem;
        height: 2rem;
        margin: 0 1rem;
      }
    }
    ul{
      width: 100%;
      li{
        line-height: 5rem;
        border-bottom: 1px solid #C2C2C2;
        padding:0 2rem;
        .clearfix{
          display: flex;
          align-items: center;
          font-size:1.56rem;
          font-family:MicrosoftYaHei;
          font-weight:400;
          img{
            margin-right: 1rem;
          }
          .clearfixR{
            position: absolute;
            right: 2rem;
          }
        }
      }
    }


  }
</style>
