<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="@/assets/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(sessionStorage.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|MPEG|Ogg|WebM|MOV)/i.test(result)) {
                  item.videos.push(result);
                } else if (/\.(MP3|Wav|Ogg)/i.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-pull-refresh {
    margin-bottom: 50px;
  }
  .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("~@/assets/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>