<template>
  <div class="main">
    <!-- 视频 -->
    <q-page-sticky expand position="top" ref="topContainer" class="player">
      <video
        class="player-video video-js vjs-big-play-centered"
        ref="videoPlayer"
        playsinline
        :poster="options.poster"
      ></video>
    </q-page-sticky>
    <!-- 模块 -->
    <div class="q-pa-xs" :style="{ 'margin-top': playerH }">
      <q-tabs
        v-model="tab"
        align="justify"
        narrow-indicator
        @input="queryModuleList"
        active-color="#ff6600"
      >
        <q-tab
          v-for="item of tabList"
          :key="item.id"
          :name="item.id"
          :label="item.moduleName"
        />
      </q-tabs>
    </div>
    <!-- 排序 -->
    <q-separator color="#E0E0E0"></q-separator>
    <div class="q-pa-md list-order">
      <div @click="orderPriorityChange(false)">
        <img src="~dinkle/assets/icon/order.png" />
        <p :class="{ 'list-order-selected': !orderByPriority }">按时间排序</p>
      </div>
      <div @click="orderPriorityChange(true)">
        <img src="~dinkle/assets/icon/order.png" />
        <p :class="{ 'list-order-selected': orderByPriority }">按优先级排序</p>
      </div>
    </div>
    <!-- 列表 -->
    <q-separator color="#E0E0E0"></q-separator>
    <div class="q-pa-md" v-for="record of records" :key="record.id">
      <div class="q-col-gutter-md row items-start">
        <div class="col-4" @click="listCellClick(record)">
          <q-img :src="record.picKey | fmtOSSUrl" style="width: 100%">
            <div class="absolute-full text-subtitle1 flex flex-center">
              <img src="~dinkle/assets/icon/player.png" style="width: 50px" />
            </div>
          </q-img>
        </div>
        <div class="col-8">
          <div class="text-h5 q-pa-sm">
            {{ record.moduleTitle }}
          </div>
          <q-expansion-item :label="record.fileType" expand-separator>
            <p style="margin-bottom: 40px">{{ record.moduleContent }}</p>
          </q-expansion-item>
        </div>
      </div>
      <q-separator color="#E0E0E0"></q-separator>
    </div>
  </div>
</template>

<script>
import videojs from "video.js";
import "video.js/dist/video-js.css";
import { pageDetailByModuleId } from "dinkle/service/api";

export default {
  name: "",
  components: {},
  data() {
    return {
      // 播放器
      player: null,
      options: {
        controls: true,
        preload: "metadata",
        fluid: true,
        poster: null,
        sources: []
      },
      playerH: 0,
      // 模块列表
      tab: "",
      tabIndex: 0,
      tabList: [],
      // 按优先级orderByPriority传true, false默认按时间排
      orderByPriority: true,
      // records
      records: []
    };
  },
  computed: {},
  watch: {},
  filters: {},
  async created() {
    await this.syncTabList();
    await this.queryModuleList();
  },
  mounted() {
    this.initVideoPlayer();
  },
  beforeDestroy() {
    if (this.player) this.player.dispose();
  },
  methods: {
    // 初始化视频方法
    initVideoPlayer() {
      this.player = videojs(
        this.$refs.videoPlayer,
        this.options,
        function onPlayerReady() {
          this.play();
        }
      );
      this.playerH = this.$refs.topContainer.$el.clientHeight + "px";
    },
    // 同步文宣模块列表
    async syncTabList() {
      this.tabList = await this.$store.dispatch("dinkle/SYNC_TAB_LIST");
      if (this.tabList.length) this.tab = this.tabList[this.tabIndex].id;
    },
    // 查询模块数据列表
    async queryModuleList() {
      const res = await pageDetailByModuleId({
        moduleId: this.tab,
        orderByPriority: this.orderByPriority
      });
      this.records = [...res.data.records];
      // 视频默认加载第一个
      const item = this.records[0];
      if (item.fileType == "MP4") this.listCellClick(item);
    },
    // 点击触发操作
    listCellClick(item) {
      if (item.fileType == "MP4") {
        this.player.src({
          src: item.linkUrl || `${process.env.VUE_APP_OSS_URL}/${item.fileKey}`,
          type: `video/${item.fileType}`
        });
        this.player.poster = `${process.env.VUE_APP_OSS_URL}/${item.picKey}`;
        this.player.posterImage.show();
        this.player.play();
      } else {
        window.open(
          item.linkUrl || `${process.env.VUE_APP_OSS_URL}/${item.fileKey}`
        );
      }
    },
    // 排序规则变更
    orderPriorityChange(orderByPriority) {
      this.orderByPriority = orderByPriority;
      this.queryModuleList();
    }
  }
};
</script>

<style scoped lang="stylus">
// 宽度100%
.player
  z-index 999
  &-video
    width 100%
.list-order
  display flex
  justify-content center
  align-items center
  margin-top 10px;
  > div
    display flex
    justify-content center
    align-items center
    width 50%
    p
      font-weight: 500;
      color: #313131;
      line-height: 11px;
      margin-left 5px
      font-size 15px
    img
      width 30px
  &-selected
    color #ff6600 !important
// 折叠展开
>>> .q-item
  padding 0.8rem
>>> .q-tab
    min-height 4rem
    margin-bottom 0.5rem
</style>

<style>
/* 暂停时显示播放按钮 */
.vjs-paused .vjs-big-play-button,
.vjs-paused.vjs-has-started .vjs-big-play-button {
  display: block;
}
/* 播放按钮变圆形 */
.video-js .vjs-big-play-button {
  font-size: 2.5em;
  line-height: 2.3em;
  height: 2.5em;
  width: 2.5em;
  -webkit-border-radius: 2.5em;
  -moz-border-radius: 2.5em;
  border-radius: 2.5em;
  background-color: #73859f;
  background-color: rgba(115, 133, 159, 0.5);
  border-width: 0.15em;
  margin-top: -1.25em;
  margin-left: -1.75em;
}
/* 中间的播放箭头 */
.vjs-big-play-button .vjs-icon-placeholder {
  font-size: 1.63em;
}
/* 加载圆圈 */
.vjs-loading-spinner {
  font-size: 2.5em;
  width: 2em;
  height: 2em;
  border-radius: 1em;
  margin-top: -1em;
  margin-left: -1.5em;
}
/* 点击屏幕播放/暂停 */
.video-js.vjs-playing .vjs-tech {
  pointer-events: auto;
}
/* 进度显示当前播放时间 */
.video-js .vjs-time-control {
  display: block;
}
.video-js .vjs-remaining-time {
  display: none;
}
</style>
