<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="getTrainingList"/>
      </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="navBar">
    <van-nav-bar
        :border="false"
        :fixed="true"
        :safe-area-inset-top="true"
    >
      <template slot="title">
        <van-field
            v-model="keyword"
            placeholder="名称/关键词/简介"
        >
        </van-field>
      </template>
      <template slot="left">
        <div class="navLeft" @click="goBack">
          <van-icon class="icon" name="arrow-left" />
          <div>返回</div>
        </div>
      </template>
      <template slot="right">
          <van-icon class="search" name="search" size="20"  @click="getTrainingList"/>
      </template>
    </van-nav-bar>
  </div>
  -->
<!--  <div class="statisticContainer">
    <div class="statisticWrap">
      <div class="line1">
        <span>培训统计</span>
        <span>更新时间：{{time}}</span>
      </div>
      <div class="numWrap">
        <div>
          <span>{{ numInfo?.totalNum }}</span>
          <span>文章总数</span>
        </div>
        <div>
          <span>{{ numInfo?.readNum }}</span><span>已培训数量</span>
        </div>
        <div>
          <span>{{ numInfo?.notReadNum }}</span> <span>未培训数量</span>
        </div>
      </div>
    </div>
  </div>-->
  <div class="tab_wrap">
    <div v-for="(item, index) in tabArr" :key="index" :class="{'active' : activeIndex == index}"
         @click="changeTab(index)">
      {{ item.name }}<span v-if="item.count" :class="{'commonNum':true,'notFinish':index==2}">{{item.count}}</span>
      <!--      {{ 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.name }}<span v-if="item.mustRead===1" class="read">必读</span></div>
        </div>
        <div class="imgWrap">
          <img :src="item.themePicture">
        </div>
        <div class="num common">{{ item.synopsis }}</div>
        <div  class="info flexBetween common" >
          <div class="time">{{ item.pushTime		 }}</div>
          <span style="color: red;font-size: 14px;margin-right: 8px" :class="item.alreadyRead===1 ? 'alRead' : ''">{{ item.alreadyRead===1 ? '已处理' :  '未处理' }}</span>
        </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 {getTrainingList} from  "@/api/mine"
import {timeFormat} from "@/utils/common";
export default {
  name: "diverTrainDocment",
  computed: {
  },
  mixins:[myMixins],
  data(){
    return{
      tabArr: [{name: '全部文档', status: 1,count:0}, {name: '已培训', status:2,count:0},{name: '未培训', status: 3,count:0}],
      // tabArr: [{name: '车型技术参数', status: 1}, {name: '中道服务规范', status:2},{name: '中道小课堂', status: 3}],
      activeIndex: 0,
      pageList:[],
      totalList:[],
      numInfo:'',
      keyword:'',
      serviceTypeName:'',
      show:false,
      showEmpty:false,
      isLoading:false,
      driverId:'',
      time:'',
    }
  },
  mounted() {
    const urlParams = new URLSearchParams(window.location.search);
    this.driverId = urlParams.get('driverId');
    this.time=timeFormat(Date.now())
    this.keyword=urlParams.get('keyword') || ''
    this.serviceTypeName=urlParams.get('serviceTypeName') || ''
    this.getTrainingList();
    document.addEventListener('visibilitychange', async (  ) => {
      let state = document.visibilityState
      if (state == 'hidden') {  // 用户离开了
      }
      if (state == 'visible') {
        this.getTrainingList();
      }
    });
  },
  methods:{
    initShow(){
      this.keyword= ''
      this.getTrainingList()
    },
    onRefresh() {
      this.getTrainingList()
      setTimeout(() => {
        this.$toast('刷新成功');
        this.isLoading = false;
      }, 1000);
    },
    async changeTab(index) {
      this.activeIndex = index
      await this.getTrainingList()
    },
    async getTrainingList(){
      let res= await getTrainingList({
        type:1,
        id:this.driverId,
        text:this.keyword || '',
        serviceTypeName:this.serviceTypeName || ''
      })
      this.totalList=[]
      this.pageList=[]
      this.tabArr[0].count=0
      this.tabArr[1].count=0
      this.tabArr[2].count=0
      this.numInfo=res.data
      if(res.data.totalNum){
        this.tabArr[0].count=res.data.totalNum
      }
      if(res.data.readNum){
        this.tabArr[1].count=res.data.readNum
      }
      if(res.data.notReadNum){
        this.tabArr[2].count=res.data.notReadNum
      }
     /* this.totalList=res.data.list
      if(this.activeIndex === 0){
        result=this.totalList?.filter(q => q.title === '车型技术参数');
      }else if(this.activeIndex === 1){
        result=this.totalList?.filter(q => q.title === '中道服务规范');
      }else if(this.activeIndex === 2){
        result=this.totalList?.filter(q => q.title === '中道小课堂');
      }*/
      let result=[]
      this.totalList=res?.data?.list ? res?.data?.list[0]?.materials : []
      if(this.activeIndex === 0){
        result=this.totalList || []
      }else if(this.activeIndex === 1){
        result=this.totalList?.filter(item => item.alreadyRead==1) || []
      }else if(this.activeIndex === 2){
        result=this.totalList?.filter(item => item.alreadyRead!=1) || []
      }
      if(result){
        this.pageList=result
        this.time=timeFormat(Date.now())
      }
      if(this.pageList?.length === 0){
        this.showEmpty  = true
      }else {
        this.showEmpty = false
      }
    },
  }
}
</script>
<style scoped lang="scss">
@import "@/styles/common.scss";
@import "@/styles/mixin.scss";
@import "@/styles/docment.scss";
@import "@/styles/driverDocment.scss";
/*::v-deep .van-nav-bar__content{
  background-color: #3A3A3A !important;
}*/
.tab_wrap {
  .active:after {
    width: 37px;
    left: 0%;
    transform: translateX(0%);
  }
  .active1:after {
    width:48px !important;
  }
}
.read{
  padding: 2px 8px;
  border-radius: 5px;
  border: 1px solid red;
  color: red;
  font-size: 8px;
}
.alRead{
  color: #cccccc !important;
}
.contentWrap{
  height: calc(100% - 180px) !important;
}
</style>