<template>
  <div class="el-classreg_show_detail_mobile_1">
    <div class="classreg_show_detail_mobile_1">
   <span class="active-detail-pic">
      <span v-if="infos.czStatus=='1'" class="tip1">进行中</span>
      <span v-else-if="infos.czStatus=='2'" class="tip1">已结束</span>
      <span v-else class="tip1">未开始</span>
      <img v-if="infos.czPhoto" :src="infos.czPhoto" alt="">
      <img v-else src="../../theme-chalk/src/images/jslndx-online-apply-pic.png" alt="">
   </span>
   <div class="active-detail-info">
      <span class="sp1">{{infos.czName}}</span>
      <ul class="ul1">
         <li>报名时间：
           <span v-if="infos.czSignStartDate">{{infos.czSignStartDate | $toYMD}}-</span>
           <span>{{infos.czSignEndDate | $toYMD}}</span>
         </li>
         <li>培训费用：
           <span v-if="Number(infos.czTrainingFee)" class="red-spp1">￥{{infos.czTrainingFee}}元</span>
           <span v-else class="red-spp1">免费</span>
        </li>
         <!-- <span class="fav">收藏</span>
         <span class="faving">已收藏</span> -->  <!--当class是fav，为未收藏-->
      </ul>
      <span class="sp2">
         <i>人数限制：{{Number(infos.czMaxNum)}}人</i>
         <i>已报名：{{Number(infos.czJoinupNum)}}人</i>
         <i>已缴费：{{Number(infos.normalNum)}}人</i>
      </span>
      <ul class="ul2" id="isShow" v-show="isShow">
         <li>培训时间：
           <span v-if="infos.czStartDate">{{infos.czStartDate | $toYMD}}-</span>
           <span>{{infos.czEndDate | $toYMD}}</span>
        </li>
         <li>培训老师：<span>{{infos.czMasterTrainer}}</span></li>
         <li>指导老师：<span>{{infos.czSecondaryTrainer}}</span></li>
         <!--<li>培训日程：<span>{{infos.czScheduleDesc}}</span></li>-->
         <li>培训地点：<span>{{infos.czAdress}}</span></li>
         <li>年龄限制：
           <span v-if="infos.czMinAge==''|| infos.czMaxAge==''">不限制</span>
           <span v-else>男性{{infos.czMinAge}}-{{infos.czMaxAge}}周岁 </span>

           <span v-if="infos.czWomenMinAge==''|| infos.czWomenMaxAge==''"> 女性{{infos.czWomenMinAge}}-{{infos.czWomenMaxAge}}周岁</span>
           <span v-else> 不限制</span></li>
      </ul>
      <a href="javascript:void(0)" @click="togger($event)" class="btn1">收起</a>
   </div>
   <div class="active-detail-tab">
      <ul class="ul1">
         <li :class="{'active':active=='0'}"><a @click="active='0'" href="javascript:void(0)">简介</a></li>
         <li :class="{'active':active=='1'}"><a @click="getStudent('1')" href="javascript:void(0)">同学</a></li>
         <li :class="{'active':active=='2'}"><a @click="getCourse('2')" href="javascript:void(0)">课程</a></li>
      </ul>
      <div class="active-detail-bd">
         <div v-show="active=='0'" class="active-detail-bd-part"><!--简介-->
            <p class="intro-p1" v-html="infos.czSummary"></p>
         </div>
         <div v-show="active=='1'" class="active-detail-bd-part"><!--同学-->
            <ul class="meet-ul1 clearfix">
               <li v-for="(list,i) in stuList" :key="i">
                 <img v-if="list.photo" :src="list.photo" alt="">
                 <img v-else src="../../theme-chalk/src/images/header01.jpg" alt="">
                 <span>{{list.custNickname}}</span>
              </li>

            </ul>
         </div>
         <div v-show="active=='2'" class="active-detail-bd-part"><!--课程-->
            <ul class="class-ul1 clearfix">
               <li v-for="(list,i) in couList" :key="i">
                  <span class="c-sp1">
                     <!--<span class="c-tip1"><img src="../../theme-chalk/src/images/tip01.png" alt=""></span> -->
                     <img v-if="list.csPhoto" class="cover" :src="list.csPhoto" alt="">
                     <img v-else class="cover" src="../../theme-chalk/src/images/jslndx-online-apply-pic.png" alt="">
                  </span>
                  <span class="c-sp2"><a href="">{{list.csName}}</a></span>
                  <span class="c-sp3">已学：<i>{{list.lcsProcess}}%</i></span>
               </li>


            </ul>
         </div>
      </div>
   </div>
   <div class="active-detail-btn"  >
     <div v-if="isBm">
        <a href="javascript:void(0)"   class="btn1">您已报名</a>

     </div>
     <div v-else>
       <a href="javascript:void(0)"  @click="toSign" class="btn2">立即报名</a>
       <a href="javascript:void(0)" v-if="Number(status)===0"  class="btn1">暂未开始</a>
     </div>


   </div>
</div>
  </div>
</template>

<script>
 import formMixin from "../../../src/mixins/formMixin";
  import lenye_base from "lenye_base";
  import $ from "fy-kit";
  import { Toast } from "vant";
export default {
  name: 'ElClassregShowDetailMobile1',
  mixins: [formMixin],
  model: {},
  data(){
    return {
      isShow:true,
      czId:'',
      infos:{},
      active:'0',
      stuList:[],
      couList:[],
      userPro:[],
      userData:null,
      status:2,
      isBm:false
    }
   },
  components: {
    [Toast.name]: Toast,
  },
  filters:{
    $toYMD(val){
      if(val){
        return $.date.moment(val).format("YYYY/MM/DD");
      }
    }
  },
  created() {


    this.czId = $.util.urlParams('czId');
    var userData =  $.util.getCookie('userData');


    if(userData){
      this.userData = JSON.parse(userData);
    }
    console.log(this.userData,123)
  },
   mounted() {
      this.init();
   },
   computed: {},
   methods: {
     init(){
       this.detail();
       this.isSignUp();
       this.hasSignUp();
     },
     async getProgress(){
      let res =  await $.util.ajax(
          lenye_base.base_data.getapiUrl() +
            "/schoolclass-service/api2/clzUserClazzCourse/queryUserClazzCoursePage.do",
          lenye_base.base_data.getformatting({
            czId: this.czId,
            page:1,
            rows:999,
            custId:this.userData.custId
          })
        )
         if(res.success=='1'){
            this.userPro = res.data;
          }else{
            Toast.fail(res.message);
            return false;
          }
        return res.data;
     },
     toSign(){
       if(!this.noLogin()){
         return false;
       }

        window.location.href="/classreging?type=0&id="+this.czId

        return  false;

       $.util.ajax(
          lenye_base.base_data.getapiUrl() +
            "/schoolclass-service/api2/clzStudentClazz/signup.do",
          lenye_base.base_data.getformatting({
            czId: this.czId,
            custId:this.userData.custId
          })
        ).then(res=>{
          if(res.success=='1'){
            var status = res.data.status;
                if(status=='1'){
                  Toast.success('报名成功！');
                  setTimeout(()=>{
                    window.location.href="/classreging?type=0&id="+res.data.orderId
                  },1000);
                }else if(status=='2'){
                  Toast.fail(res.data.msg);
                  setTimeout(()=>{
                    window.location.href="/personcenter";
                  },1000);
                }else if(status=='3'){
                  Toast.success("报名成功！");
                  this.init();
                }else{
                  Toast.fail('报名失败！');
                }
          }else{
            Toast.fail(res.message);
          }
      })
     },
     hasSignUp(){
       if(!this.userData){
         return false;
       }
       $.util.ajax(
          lenye_base.base_data.getapiUrl() +
            "/schoolclass-service/api2/clzStudentClazz/signuped.do",
          lenye_base.base_data.getformatting({
            czId: this.czId,
            custId:this.userData.custId
          })
        ).then(res=>{
          if(res.success=='1'){
            if(res.data&&res.data[0].normal=='1'){
              this.isBm = true;
            }else{
              this.isBm = false;
            }
          }else{
            Toast.fail(res.message);
          }
      })
     },
     isSignUp(){
       if(!this.userData){
         return false;
       }
       $.util.ajax(
          lenye_base.base_data.getapiUrl() +
            "/schoolclass-service/api2/clzStudentClazz/checkSignup.do",
          lenye_base.base_data.getformatting({
            czId: this.czId,
          })
        ).then(res=>{
          if(res.success=='1'){
            this.status = res.data.status;
          }else{
            Toast.fail(res.message);
          }
      })
     },
     noLogin(){
        if(!this.userData){
         Toast.fail("请登录！");
         setTimeout(()=>{
           window.location.href = "/reglogin";
         },2000)
         return false;
       }else{
         return true;
       }
     },
     getCourse(num){
       if(!this.noLogin()){
         return false;
       }
       $.util.ajax(
          lenye_base.base_data.getapiUrl() +
            "/schoolclass-service/common/clzClazzCourse/queryShowPage.do",
          lenye_base.base_data.getformatting({
            czId: this.czId,
            page:1,
            rows:999

          })
        ).then(res=>{
          if(res.success=='1'){
            this.active = num;
            this.couList = $.array.addEleById(res.data,this.getProgress(),'csId','lcsProcess');
            console.log(this.couList,123)
          }else{
            Toast.fail(res.message);
          }
      })
     },
     getStudent(num){
       $.util.ajax(
          lenye_base.base_data.getapiUrl() +
            "/schoolclass-service/common/clzStudentClazz/queryShowPage.do",
          lenye_base.base_data.getformatting({
            czId: this.czId,
            page:1,
            rows:999

          })
        ).then(res=>{
          if(res.success=='1'){
            this.active = num;
            this.stuList = res.data;
          }else{
            Toast.fail(res.message);
          }
      })

     },
     togger(ev){
       if(this.isShow){
         this.isShow = false;
         $._.default(ev.target).html('展开')
       }else{
         this.isShow = true;
         $._.default(ev.target).html('收起')
       }

     },
     detail(){
        $.util.ajax(
          lenye_base.base_data.getapiUrl() +
            "/schoolclass-service/common/clzClazz/queryById.do",
          lenye_base.base_data.getformatting({
            czId: this.czId,

          })
        ).then(res=>{
          if(res.success=='1'){
            this.infos = res.data;
          }else{
            Toast.fail(res.message);
          }
        })
     }
   },
};
</script>
