<template>
  <div class="history-page-content">
    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
        offset="50"
      >
        <van-cell v-for="(item,index) in tableData" :key="index">
          <div class="field-title">
            <span>{{item.createTime}}</span>
          </div>
          <van-collapse v-model="activeNames">
            <van-collapse-item :name="item.id">
              <template #title>
                <div>{{item.boardName}}<span class="author">{{item.username}}</span>
                </div>
              </template>
              <div class="content">
                  <div class="learnvideo">
                      <div class="learn-title">学习视频</div>
                      <div class="learn-body" v-if="item.videos.length">
                        <span v-for="(s,i) in item.videos" :key="i">
                          <video controls width='100%' height='100%' poster="images/applets/video.png">
                            <source :src="s" />
                          </video>
                          <!-- autoplay="autoplay" 
                            x5-playsinline='true' 
                            webkit-playsinline='true' 
                            playsinline='true' 
                            x-webkit-airplay='true' 
                            x5-video-player-type='h5-page' 
                            x5-video-player-fullscreen='true' 
                            x5-video-ignore-metadata='true'   -->
                        </span>
                      </div>
                      <div class="learn-body" v-if="!item.videos.length">暂无数据</div>
                  </div>
                  <div class="learnphoto">
                      <div class="learn-title">学习照片</div>
                      <div class="learn-body" v-if="item.images.length">
                        <span  v-for="(s,i) in item.images" :key="i">
                          <img :src="s" alt="" @click="sceneImg(item.images,i)" v-if="s">
                         <span v-else>暂无数据</span>
                        </span>
                      </div>
                      <div class="learn-body" v-if="!item.images.length">暂无数据</div>
                  </div>
                  <div class="learntextarea">
                      <div class="learn-title">有话对党说</div>
                      <div class="learn-body">{{item.content|| '暂无数据'}}</div>
                  </div>
              </div>
            </van-collapse-item>
          </van-collapse>
        </van-cell>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
import { ImagePreview } from "vant"; // 引入Vant图片预览组件
export default {
  data() {
    return {
        activeNames: ['1'],
        pageNum: 1,
        pageSize: 8,
        tableData:[],
        loading: false,
        finished: false,
        refreshing: false,
        flag:true,
    };
  },
  mounted() {
    this.getList()
  },
  methods: {
    // 图片预览
    sceneImg(images,index) {
      ImagePreview({
        images:images, //需要预览的图片 URL 数组
        showIndex:true, //是否显示页码
        loop:false, //是否开启循环播放
        startPosition:index //图片预览起始位置索引
      })
    },
    // 获得数据接口
    getList() {
      let vm = this;
      let param = {
        _index:this.pageNum,
        _size:this.pageSize,
        orgId: JSON.parse(localStorage.getItem("userInfo")).orgId
      };
      vm.$https(
        {
          url: "interaction/getList",
          method: "post",
          authType: this.backToken
        },
        vm.$qs.stringify(param)
      ).then(res => {
          if(res.data.resultCode==='200'){
            vm.loading = false
            let data = res.data.data;
            let arr=[]
            data.records.forEach(item=>{
              arr= item.images.split(',')
              item.videos =[]
              item.images =[]
              item.audio =[]
              arr.forEach((result)=>{
                  if (/\.(MP4|mp4)/.test(result)){
                    item.videos.push(result)
                  }else if (/\.(MP3|mp3)/.test(result)){
                    item.audio.push(result)
                  }else {
                    item.images.push(result)
                  }
              })
            })
            
            vm.tableData = vm.flag ? data.records :vm.tableData.concat(data.records)
            vm.flag = false
            vm.refreshing = false;
            vm.pageNum = vm.pageNum + 1
            vm.finished =  data.records.length < vm.pageSize ? true : false
            vm.tableData = [...vm.tableData]
          }else{
            vm.$toast(res.data.message)
          }
          
        })
        .catch(function(err) {
          console.log(err);
        })
    },
    // 列表的load上拉加载事件
    onLoad() {
      if(!this.flag){
        console.log("加载数据");
        this.loading = true;
        this.flag = false;
        this.getList();
      }
    },
    onRefresh() {
      // 清空列表数据
      this.finished = false;
      this.flag = true;
      this.loading = true;
      this.pageNum =1;
      this.getList();
    },
  }
};
</script>

<style lang="scss" scoped>
.history-page-content {
  padding: 24px 0px;
  height: calc(100% - 200px);
  overflow-y: auto;
  .van-cell {
    padding-left: 0;
    padding-right: 0;
  }
  ::v-deep .van-collapse-item__title {
    font-size: 16px;
  }
  .van-hairline--top-bottom::after {
    border-width: 0;
  }
  .field-title {
    position: relative;
    font-size: 16px;
    span {
      color: #333;
      font-size: 16px;
      line-height: 20px;
      padding-left: 24px;
      &:before {
        content: "";
        height: 16px;
        width: 16px;
        background-image: url('/images/applets/timer.png');
        background-size: cover;
        position: absolute;
        left: 0;
        top: 2px;
      }
    }
  }
  .author {
      float: right;
      margin-right: 20px;
  }
  .content {
      .learn-title {
        font-size: 14px;
        color: #333333;
        padding: 16px 0;
      }
      .learn-body{
          padding-bottom: 12px;
        img,video {
            width: 30%;
            height: auto;
            padding: 0 5px;
            box-sizing: border-box;
        }
      }
      .learntextarea {
          .learn-body {
              line-height: 1.5
          }
      }
      
  }
}
</style>