<template>
  <div class="p-wrap-full">
    <div class=" clear mt20 ng-scope">
      <div class="helpwrap clear">
        <div class="left mh500 rel">

          <div class="helptitle">
            <i class="p-ico help-ico"></i>帮助中心
          </div>

          <ul class="help-navlist">
            <li :class="{'current': type=='业务流程'}" class="ng-scope" @click="gotoType('业务流程')">
              <a class="ng-binding">
                <i class="p-ico arrow-left"></i>业务流程
              </a>
            </li>
            <li :class="{'current': type=='操作手册'}" class="ng-scope" @click="gotoType('操作手册')">
              <a class="ng-binding">
                <i class="p-ico arrow-left"></i>操作手册
              </a>
            </li>
            <li :class="{'current': type=='常见问题'}" class="ng-scope" @click="gotoType('常见问题')">
              <a class="ng-binding">
                <i class="p-ico arrow-left"></i>常见问题
              </a>
            </li>
          </ul>
        </div>


        <div class="right mh500" v-if="!isPost">
          <div class="p20">
            <ul class="newslist-2 mb20">
              <li v-for="item in list" class="ng-scope">
                  <span class="p-ico talk-ico"></span>
                  <a href="javascript:void(0)" class="ng-binding" @click="gotoDetail(item.postId)">{{item.title}}</a>
                  <span class="date ng-binding">{{item.publishTime|dateformat}}</span>
               </li>
            </ul>

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

          </div>
        </div>
        <div class="right mh500" v-else>
          <div class="m-notice-detail ">
            <p class="fs18 tc bor-b mb30 pb20 pt20 b rel ng-binding">
              {{info.title}}
              <a @click="isPost=false" class="btn-r return-btn abs">返回上一级</a>
             </p>

            <p class="notice-info tc ng-binding">
              发布时间：{{info.publishTime}}
              <span class="ml30 ng-binding">来源：{{info.author}}</span>
              <span class="ml30 ng-binding">阅读数：{{info.viewCount}}</span>
            </p>

            <span v-html="info.content"></span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import {
    httpServer
  } from "@/components/httpServer/httpServer.js";
  import {
    parseTime
  } from "@/utils/index.js";
  export default {
    name: 'cert',
    data() {
      return {
        page: 1, //初始页
        size: 10, //    每页的数据
        list: [],
        info:{},
        total: 0,
        isPost: false,
        type: '业务流程',
        keyword: '',
        listLoading: true,
        dialogFormVisible: false,
        dialogStatus: '',
      }
    },
    filters: {
      dateformat(val) {
        return parseTime(+new Date(val), '{y}-{m}-{d}')
      }
    },
    beforeMount() {
      this.getList()
    },
    methods: {
      getList() {
        this.listLoading = true
        let page = this.page
        let type = this.type
        httpServer("Course.getPostList", {
          page,
          type
        }).then(({
          data,
          code
        }) => {
          let {
            total,
            list
          } = data
          if (!list) list = [];
          this.list = list.map(v => {
            this.$set(v, 'edit', false)
            return v
          })
          this.total = total || 0;
          this.listLoading = false
        })
      },
      gotoDetail(postId) {
        httpServer("Course.getPostInfo", {postId}).then(({
          data,
          code
        }) => {
          this.info = data
          this.isPost = true
          this.listLoading = false
        })
      },

      gotoType: function(type) {
        this.type = type;
        this.isPost = false
        this.getList()
      },
      handleCurrentChange: function(currentPage) {
        this.page = currentPage;
        this.getList()
      }
    }
  }
</script>

<style>
  @import url("./help.css");
</style>
