<template>
  <div class="ng-scope">
    <div class="waphide">
      <navbar :user="userInfo" @openLoginDialog="openLoginDialog"></navbar>
    </div>

    <div class="banner-box">
      <div class="p-wrap-full clear pt30">
        <el-card class="training-category opacity-bg fl waphide" style="border-radius: 20px;padding-top: -5px;" >
          <h2 align="center" style="background-color: white; color: #000000;padding-top:5px;">文件通知</h2>
          <el-table :data="postList"  highlight-current-row
          :show-header="false" height="240px" >
            <el-table-column min-width="600px">
              <template slot-scope="{row, $index}">
                <span @click="gotoDetail(row.postId)">{{(page*size)-size+$index+1}}、{{ row.title }}</span>
              </template>
            </el-table-column>
            <el-table-column  width="160px">
              <template slot-scope="{row}">
                <span>{{ row.publishTime  }}</span>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination class="tc m-page"
            @current-change="handlePageChange"
            :current-page="page"
            :page-size="size"
            layout="total, prev, pager, next"
            :total="total">
          </el-pagination>

        </el-card>

        <div class="m-login opacity-bg">
          <is-login v-if="loginOk" :user="userInfo" @logout="logout"></is-login>
          <un-login v-else @login="login" :err="err"></un-login>
        </div>
      </div>
    </div>
    <!--  -->
    <div class="waphide">
      <learn-time></learn-time>
    </div>

    <div class="p-wrap-full mb20 ng-scope waphide">
      <div class="title-box mt5 clear">
        <h2 class="title">继续教育</h2>
      </div>
      <el-row :gutter="20" class="shadow p10 mt20" >
        <el-col :span="+item.span" class="nopad"  v-for="(item, index) in typeList" :key="index" v-if="!item.isNew && item.span>0">
          <el-card shadow="hover" class="grid-content nopad "  >
            <div class="mt10 typelist" @click="gotoCourse(item)">
              <i class="p-ico"  :class="item.icon" style="color:#69c0ff"></i>
              <p style="font-size: 13px;">{{ item.name }}</p>
              <p class="mt10" style="font-size: 16px;" v-if="!item.isOpen">(暂未开放)</p>
              <p class="mt10" style="font-size: 16px;" v-else>{{ item.content }}</p>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>

    <div class="p-wrap-full mb20 ng-scope waphide">
      <div class="title-box mt5 clear">
        <h2 class="title">教育培训</h2>
      </div>
      <el-row :gutter="20" class="shadow p10 mt20" >
        <el-col :span="+item.span" class="nopad" style="flex:1" v-for="(item, index) in typeList" :key="index" v-if="item.isNew==1">
          <el-card shadow="hover" class="grid-content nopad"  >
            <div class="mt10 typelist" @click="gotoCourse(item)">
              <i class="p-ico"  :class="item.icon" style="color:#69c0ff"></i>
              <p style="font-size: 13px;">{{ item.name }}</p>
              <p class="mt10" style="font-size: 16px;" v-if="!item.isOpen">(暂未开放)</p>
              <p class="mt10" style="font-size: 16px;" v-else>{{ item.content }}</p>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>

    <div class="right-nav waphide">
      <img class="right-img" src="../../assets/wxapp.jpg" alt="">
      <p>使用小程序</p>
      <p>学习更轻松</p>
    </div>


    <div class="p-wrap-full ng-scope waphide">
      <div class="title-box mt5 clear">
        <h2 class="title">友情链接</h2>
      </div>
      <friendlink></friendlink>
    </div>

    <el-dialog
      class="fc tc login-dialog"
      :visible.sync="loginDialog"
       :show-close='false'
      width="330px"
      style="padding:0px;"
      @close="closeDialog"
    >
      <div class="m-login" style="background: none;">
        <un-login @login="login" :err="err"></un-login>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import isLogin from "./components/isLogin.vue";
import unLogin from "./components/unLogin.vue";
import LearnTime from "./components/learnTime/learnTime.vue";
import navbar from "@/components/nav/navbar.vue";
import Friendlink from "./components/friendlink/friendlink.vue";
import { httpServer } from "@/components/httpServer/httpServer.js";
import { mapGetters,mapActions } from "vuex";

export default {
  components: {
    LearnTime,
    isLogin,
    unLogin,
    Friendlink,
    navbar
  },
  data() {
    return {
      loginOk: false,
      periodObj: {
        userName: "",
        idNum: "",
      },
      postList:[],
      page:1,
      size: 5,
      total:0,
      loginDialog: false,
      err: {},
    };
  },
  computed: {
  	...mapGetters("user", ["typeList", "userInfo"])
  },
  // beforeMount(){
  //    if( this.userInfo && this.userInfo.token){
  //      this.loginOk = true
  //    }else{
  //      this.loginOk = false
  //    }
  // },
  created(){
    this.getPostList()
    this.loginOk = false
    if( this.userInfo && this.userInfo.token && this.userInfo.uid){
      this.loadBaseInfo().then(res=>{
         if( !res || !res.uid ){
           this.loginOk = false
           this.doLogout()
         }else{
           this.loginOk = true
         }
      })
    }
  },
  methods: {
    ...mapActions("user", ["loadBaseInfo", "doLogout", "doLogin"]),
    logout() {
      this.doLogout().then( res=>{
        console.log("loginOk", res);
        this.loginOk = false;
      } )
    },
    login(param, cb) {
      this.doLogin( param ).then( res => {
        if( !res ){
          this.err.loginErrorEnter = "登入失败"
          this.loginOk = false;
          cb &&cb()
        }else{
          this.loginOk = true;
          this.loginDialog = false;
        }
      })
    },
    getPostList(){
      let {page,size} = this;
      let param = {page,size,type:'操作指南'}
      httpServer("course.getPostList", param).then( res=>{
        if( res.code == 200){
          this.postList = res.data.list
          this.total = res.data.total;
        }
      })
    },
    handlePageChange(page){
      this.page = page;
      this.getPostList()
    },
    gotoDetail(postId){
      this.$router.push({name:'news', query:{postId}})
    },
    gotoCourse(item){
      if( item.link ){
        window.open(item.link)
        return;
      }
      if ( !localStorage.token ) {
        this.$message.successMsg("请先登入", 1)
        return
      }
      if( !item.isOpen ){
         this.$message.errorMsg("暂未开放", 1)
         return
      }
      if( item.isNew){
        this.$router.push( {path:'/center/trainMarket', query:{type: item.name}})
      }else{
        this.$router.push( {path:'/center/market', query:{type: item.name}})
      }
    },
    closeDialog() {
      this.loginDialog = false;
    },
    openLoginDialog() {
      this.loginDialog = true
    },
  },
};
</script>

<style>
@import url("login.css");
.floatbox{
  position: fixed;
  width: 160px;
  height: 60px;
  right: 60px;
  top: 90px;
  border-radius: 1.25rem;
  font-size: 30px !important;
  background-color: orange;
  line-height: 40px;
  text-align: center;
  color: #fff;
}
.right-nav {
    width: 135px;
    height: 180px;
    background-color: #8bbdf5;
    position: fixed;
    transition: bottom ease .9s;
    z-index: 0;
    right: 5px;
    top: 260px;
    text-align: center;
    border-radius: 5px;
}
.right-img {
    display: inline-block;
    border-radius: 30%;
    width: 80%;
    height: 64%;
    margin: 11px auto 0;
}

</style>
