<template>
  <div class="m-right-block fr mh576">
    <div class="right-block-bd ng-scope" ui-view="myStudyContent" style="position: relative;">
      <div class="panel-tit clear">
        <p class="fl">推荐课程</p>
      </div>

      <el-row class="pt-line mt20">
        <el-col :span="6" v-for="item in typeList" style="width: 25%;float: left;" :key="item.id" v-if="item.isOpen">
           <span :class="{active:item.name==type }" class="nav-btn w220" @click="type=item.name">{{item.name}} </span>
        </el-col>

        <el-col :span="24" v-if="type=='继续教育' || type=='施工现场专业人员'" class="mt10" >
          <p class="tc" style="color: red;font-size: 18px;">
            报名对象为：2020年度及以后由培训单位核发的和2021年度换发的“电子培训合格证”且每年度需参加继续教育人员
          </p>
        </el-col>
      </el-row>


      <ul class="m-course-list clear mt10 classlist" v-if="total>0">
        <li v-for="(item,index) in list" :key="item.course_id" class="pt-sola mt20 pb10">
          <div>
            <span v-if="item.isFinish==1" class="p-ico2 ico-passed"></span>
            <div class="img">
              <img :src="item.tb">
              <div class="year-label ng-binding">
                  <span v-if="!item.is_pay">还未购买</span>
                  <span v-else-if="!item.is_pass" style="background-color: blue;padding: 2px;border-radius: 2px;">在学习中</span>
                  <span v-else style="background-color: green;padding: 2px;border-radius: 2px;" >已经完成</span>
              </div>

              <div class="hover-block">
                <div class="mask-bg"></div>
                <el-button @click="gotoPlay(item.course_id)" v-if="item.is_pay"
                class="ui-btn">进入学习</el-button>

                <el-button @click="goPay(index)" v-else class="ui-btn btn-o">
                  {{item.can_buy?'购买课程':'开通课程'}}
                  </el-button>
              </div>
            </div>

            <div class="tit"><a>{{item.name}}</a></div>
            <div class="info">
               <p class="w1"><span class="p-ico c1"></span> {{item.type}}</p>
               <p class="w2"><span class="p-ico c2"></span>{{item.nd||'2020'}}</p>
               <p class="w1"  v-if="item.can_buy">
                  <span class="p-ico c5"></span> ￥{{item.fee/100}}元
               </p>
               <p class="w2" >
                 <span class="p-ico c3"></span> {{item.xs/10}}学时
               </p>
            </div>
          </div>
        </li>
      </ul>

      <el-pagination  class="m-pages"
        @current-change="handleCurrentChange"
        :current-page="page"
        :page-size="size" layout="total, prev, pager, next"
        :total="total">
      </el-pagination>

    </div>

    <el-dialog
      class="fc tc"
      :visible.sync="loginDialog"
      :close-on-click-modal="false"
      width="500px"
      @close="loginDialog=false"
    >
      <div class="login-dialog m-login">
        <un-login @login="login"></un-login>
      </div>
    </el-dialog>


    <el-dialog
      :title="title"
      class="fc tc"
      :visible.sync="qrcode"
      width="500px"
      :append-to-body="true"
      @close="closeDialog"
    >
      <div class="qrcode">
        <img :src="qrcodeUrl" />
        <div class="notice">{{notice}}</div>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import {httpServer} from "@/components/httpServer/httpServer.js";
import { MessageBox } from "element-ui";
import unLogin from "../../login/components/unLogin.vue";
import {parseTime} from "@/utils";
import { mapGetters,mapActions } from "vuex";

export default {
  name: "Index",
  data() {
    return {
      page: 1,
      size: 9,
      total: 0,
      type:'',
      list: [],
      showData: [],
      qrcode: false,
      qrcodeUrl: "",
      outTradeNo: "",
      courseFee:0,
      title:'',
      timer: null,
      tickCount: 0,
      listLoading: false,
      loginDialog:false,
      isLoginOk: false,
      media:{},
      notice:'',
      defQrcode:require('@/assets/qrcode.jpg')
    };
  },
  computed: {
  	...mapGetters("user", ["typeList","userInfo"])
  },
  components:{unLogin},
  filters:{
    dateFilter(val) {
      return parseTime(val, '{y}-{m}-{d}')
    }
  },
  watch:{
    type(val){
      localStorage.setItem("@type", val)
      this.getData()
    }
  },
  created() {
    this.type = this.$route.query.type||localStorage.getItem("@type")||'继续教育'
    localStorage.setItem("@type", this.type)
    if( !localStorage.uid || !localStorage.token){
      this.loginDialog = true;
      return;
    }else{
      this.isLoginOk = true;
      this.getData();
    }
  },
  beforeDestroy() {
    if (this.timer) window.clearInterval(this.timer);
  },
  methods: {
    initTimer() {
      if (this.timer) window.clearInterval(this.timer);
      this.timer = window.setInterval(() => {
        this.tickCount++;
        this.tickTimer();
      }, 2000);
    },
    tickTimer() {
      if (this.tickCount > 30) {
        if (this.timer) window.clearInterval(this.timer);
        this.qrcode = false;
      }
      let outTradeNo = this.outTradeNo;
      httpServer("weixin.iswxPay", { outTradeNo }).then((res) => {
        if (res.code == 200) {
          if (!!res.data) {
            if (this.timer) window.clearInterval(this.timer);
            MessageBox("支付成功", "提示", {
              confirmButtonText: "确定",
              showClose: true,
              type: "sucess",
            });
            this.qrcode = false;
            this.getData();
          }
        }
      });
    },
    closeDialog() {
      if (this.timer) window.clearInterval(this.timer);
    },
    getData() {
      let param = {
        size: this.size,
        type: this.type,
        from: (this.page - 1) * this.size
      }
      httpServer("course.getcoursemarket", param).then((res) => {
        if( res.code == 200){
          this.list = res.data.list;
          this.total = res.data.total;
        }
      });
    },
    gotoDetail(courseId) {
      this.$router.push(`/main/course/${courseId}`);
    },
    goPay(index) {
      let item = this.list[index];
      if( item.can_buy === 0 ){
        this.qrcode = true;
        this.qrcodeUrl = this.defQrcode;
        this.courseFee = item.fee
        this.title = '【暂不支持购买】联系管理员开通'
        this.notice = ''
        return;
      }

      httpServer("weixin.DoWxpay", { courseId: item.course_id }).then((res) => {
        if (res.code == 200) {
          let { outTradeNo, showUrl,fee } = res.data;
          this.qrcode = true;
          this.qrcodeUrl = showUrl
          this.courseFee = fee
          this.outTradeNo = outTradeNo;
          this.title = '购买课程'+ item.name
          this.notice = `请注意：本课程费用￥${fee/100}元`
          this.initTimer();
        }
      });
    },
    gotoPlay( courseId ){
      this.$router.push(`/center/class/train`);
    },
    handleCurrentChange(page){
      this.page = page;
      this.getData()
    },
    login( param ){
      httpServer("Auth.LoginStudy" , param).then( res => {
        if(res.code==200){
          let { nickname, token, uid } = res.data;
          localStorage.nickname = nickname;
          localStorage.token = token;
          localStorage.uid = uid
          this.user = { nickname, token, uid };
          this.loginOk = true
          this.loginDialog = false
        }
      })
     }
  },
};
</script>
<style>
  @import "../../../assets/css/content.css";
  @import "../../../assets/css/course.css";
  @import url("./index.css");
</style>
