<template>
<div class="wrap">
  <div class="navBar">
    <van-nav-bar
        left-arrow
        left-arrow-color="#FFFFFF"
        :border="false"
        :fixed="true"
        :safe-area-inset-top="true"
        @click-left="goBack"
    >
      <template slot="title">
        <div v-show="!show">文档资料</div>
        <van-field v-model="keyword" placeholder="请输入关键词" v-show="show"   @input="getList"/>
      </template>
      <template slot="right">
        <div class="rightWrap" @click="show = !show">
          <img src="@/assets/serach.png" class="img2" v-show="!show"/>
          <img src="@/assets/delKey.png" class="img2" v-show="show" @click="initShow"/>
        </div>
      </template>
    </van-nav-bar>
  </div>

 <div class="tab_wrap">
    <div v-for="(item, index) in tabArr" :key="index" :class="{'active' : activeIndex == index}"
         @click="changeTab(index)">
      {{ item.name }}
    </div>
  </div>
  <div class="contentWrap" v-show="!showEmpty">
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh" style="min-height:85vh">
      <div class="itemWrap" v-for="(item,index) in  pageList" :key="index" @click="goH5Detail(item)">
        <div class="info flexBetween common">
          <div class="title">{{ item.pushUser }}</div>
          <div class="time">{{ item.pushTime }}</div>
        </div>
        <div class="imgWrap">
          <img :src="item.themePicture">
          <div class="name">{{item.name}}</div>
        </div>
        <div class="num common">{{ item.synopsis }}</div>
        <div class="doc flexBetween common">
          <div class="left">{{ item.docType?.label }}</div>
          <div class="right">
            <span style="color: red;font-size: 14px;margin-right: 8px">{{ item.listShowButton==null ? '已处理' :  '未处理' }}</span>
            <span style="opacity: .9;color: #ccc">阅读  {{item.readCount}}</span>
          </div>
        </div>
      </div>
    </van-pull-refresh>
 </div>
  <div class="empty"  v-show="showEmpty">
    <img src="@/assets/empty.png"  />
  </div>
</div>
</template>

<script>
import {myMixins} from "@/utils/myMixins"
import {pageList} from "@/api/mine";
export default {
  name: "trainDocment",
  mixins:[myMixins],
  data(){
    return{
      tabArr: [{name: '中道制度', status: 1}, {name: '技术参数', status: 2},],
      activeIndex: 0,
      pageList:[],
      pageNum:1,
      pageSize:10,
      keyword:'',
      trainingType:1,
      isLoading:false,
      show:false,
      showEmpty:false
    }
  },
  mounted() {
    this.getList()
  },
  methods:{
    onRefresh() {
      this.getList()
      setTimeout(() => {
        this.$toast('刷新成功');
        this.isLoading = false;
      }, 1000);
    },
   async changeTab(index) {
    this.activeIndex = index
    this.pageNum = 1
    this.pageList = [];
    if(this.activeIndex === 0){
      this.trainingType =1
    }else{
      this.trainingType=2
    }
    await this.getList()
  },
    async getList(){
      let res= await pageList({
        pageNum:this.pageNum,
        pageSize:this.pageSize,
        docType:2,
        trainingType:this.trainingType,
        keyword:this.keyword || ''
      })
      this.pageList=res.data;
      if(res.data.length === 0){
        this.showEmpty  = true
      }else {
        this.showEmpty = false
      }    },
    initShow(){
      this.keyword= '',
      this.getList()
    }
}
}
</script>

<style scoped lang="scss">
@import "@/styles/common.scss";
@import "@/styles/mixin.scss";
@import "@/styles/docment.scss";
.tab_wrap {
  @include fontWeightSize(bolder, 15px);
  display: flex;
  justify-content: space-around;
  padding: 5px 0 5px 0;
  @include colorOpa(#737373,0.7);
  div {
    padding-top: 8px;
  }
  .active {
    color: #3678FF;
    position: relative;
  }
  .active:after {
    content: '';
    display: block;
    @include wh(50px,3px);
    background: linear-gradient(270deg, #33A3FF 0%, #176AFE 100%);
    border-radius: 2px;
    position: absolute;
    margin-top: 3px;
    left: 50%;
    transform: translateX(-50%);
  }
}
</style>