<template>
  <div class="ng-scope">
    <navbar :user="userInfo" @openLoginDialog="openLoginDialog"></navbar>
    <div class="banner-box">
      <div class="p-wrap-full clear pt30">
        <div class="training-category opacity-bg fl ">
          <img alt="" class="mimg" src="/static/swiper/1.jpg"/>
        </div>

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

   <IPlanList></IPlanList>

    <!-- <learn-time></learn-time> -->
    <div class="p-wrap-full mb20 ng-scope">
      <div class="title-box mt5 clear">
        <h2 class="title">课程分类</h2>
      </div>
      <el-row :gutter="20" class="shadow p10 mt20"  type="flex" >
        <el-col :span="16">
          <div class="training-category bg-white fl"
            style="border-radius: 15px;padding: 10px; background-color: white;" >
            <div style="display: flex;justify-content: center;align-items: center;width: 100%;text-align: center;color: #1D78F9;">
                <img style="width: 80px;height: 4px;margin-right: 14px;" src="../../../static/images/home_left.png">
                <h2 style="text-align: center;color: #1D78F9;">新闻通知</h2>
                <img style="width: 80px;height: 4px;margin-left: 14px;" src="../../../static/images/home_right.png">
            </div>
            <el-table :data="postList"  highlight-current-row
            :show-header="false" min-height="310px" style="overflow: hidden;" >
              <el-table-column min-width="600px">
                <template slot-scope="{row, $index}">
                  <span @click="gotoDetail(row.postId)">{{$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>
          </div>
        </el-col>
        <el-col :span="8">
          <div style="background-color: #fff;padding-top: 10px;height: 360px;" class="opacity-bg fr">
            <div style="display: flex;justify-content: center;align-items: center;">
              <img style="width: 80px;height: 4px;margin-right: 14px;" src="../../../static/images/home_left.png">
              <h2 style="text-align: center;color: #1D78F9;">证书查询</h2>
              <img style="width: 80px;height: 4px;margin-left: 14px;" src="../../../static/images/home_right.png">
            </div>

            <div style="margin-top: 50px;text-align: center; ">
              <el-button @click="gotoOutlink()" type="primary"> 前往证书查询 </el-button>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>

    <div class="p-wrap-full ng-scope">
      <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>

    <el-dialog
      class="fc tc"
      :visible.sync="postDialog"
      :fullscreen="true"
      style="padding:0px;"
      @close="postDialog= false"
    >
        <div class="postDialog">
          <h1 class="tc" style="font-size: 40px; color: #000000;">{{postInfo.title}}</h1>
          <h2 class="tc mt20" style="font-size: 30px;">
            发布时间：{{postInfo.publishTime}}
            <span class="ml30 ng-binding">来源：{{postInfo.author}}</span>
            <span class="ml30 ng-binding">阅读数：{{postInfo.viewCount}}</span>
          </h2>
          <el-button @click="postDialog= false" class="floatbox" type="warning">
            返回主页
          </el-button>

          <span v-html="postInfo.content" class="mt30"></span>
        </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 IPlanList from "./components/planList/IPlanList.vue";
import { httpServer } from "@/components/httpServer/httpServer.js";
import { mapGetters,mapActions } from "vuex";
import settings from "@/settings.js";
export default {
  components: {
    LearnTime,
    isLogin,
    unLogin,
    Friendlink,
    IPlanList,
    navbar,
  },
  data() {
    return {
      loginOk: false,
      periodObj: {
        userName: "",
        idNum: "",
      },
      postDialog: false,
      postInfo:{},
      postList:[],
      loginDialog: false,
      err: {},
    };
  },
  computed: {
  	...mapGetters("user", ["typeList", "userInfo", "planList"])
  },
  created(){
    let agentId = this.$route.query._c||0;
    console.log("setAgentId", agentId);
    this.setAgentId( agentId );
    this.getPostList()
  },
  beforeMount() {
    if( localStorage.token ){
      this.loadBaseInfo().then( res=>{
        if( res.token ){
          this.loginOk= true;
        }
      })
    }else{
      this.loginOk = false;
    }

  },
  methods: {
    ...mapActions("user", ["loadBaseInfo", "doLogout", "doLogin", "setAgentId"]),
    logout() {
      this.doLogout().then( 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;
        }
      })
    },
    gotoCourse(item){
      if ( !localStorage.token ) {
        this.$message.successMsg("请先登入", 1)
        return
      }
      if( !item.isOpen ){
         this.$message.errorMsg("暂未开放", 1)
         return
      }
      this.$router.push( {path:'/center/market', query:{type: item.name}})
    },
    closeDialog() {
      this.loginDialog = false;
    },
    gotoDetail(postId){
      httpServer("Course.getPostInfo", {postId}).then(({
        data,
        code
      }) => {
        this.postInfo = data
        this.postDialog = true
      })
    },
    getPostList(){
      httpServer("course.getPostList", {page:1,type:'操作指南'}).then( res=>{
        this.postList = res.data.list.slice(0,6)
      })
    },
    gotoOutlink(){
      window.open( settings.outLink, '_brank');
    },
    openLoginDialog() {
      this.loginDialog = true
    },
  },
};
</script>

<style>
@import url("login.css");
.floatbox{
  position: fixed;
  width: 160px;
  height: 60px;
  right: 100px;
  top: 90px;
  border-radius: 1.25rem;
  font-size: 30px !important;
  background-color: orange;
  line-height: 40px;
  text-align: center;
  color: #fff;
}
</style>
