<template>
  <div class="video-wrapper" style="position: relative;">
    <div v-if="mp && detail.showStatus" class="status">
      <van-image round width="6rem" height="6rem" style="vertical-align: bottom;" :src="status_icon" />
    </div>
    <div :id="'mui-player-' + item.id" class="video-div" />
    <div v-if="mp">
      <div v-if="item.status === 'ENABLE'" class="normal-module">
        <div class="video-bar">
          <van-row>
            <van-col span="12" @click="setComment">
              <van-image round width="2rem" height="2rem" style="vertical-align: middle;"
                :src="item.avatar ? item.avatar : icon_avatar" />&nbsp;&nbsp;
              <span style="font-size: 1.05rem;vertical-align: middle;">{{ item.name }}</span>
            </van-col>
            <van-col span="12">
              <div style="padding: 0.25rem; padding-top: 0.75rem; text-align: right;">
                <span @click="setComment">
                  <van-icon :name="icon_liuyan" size="1.2rem" style="vertical-align: bottom;" />
                  {{ item.comment_num }}
                </span>
                &nbsp;&nbsp;&nbsp;
                <span @click="handleAction('like', detail.id)">
                  <van-icon v-if="!detail.is_like" :name="icon_dianzan1" size="1.2rem"
                    style="vertical-align: bottom;" />
                  <van-icon v-else :name="icon_dianzan2" size="1.2rem" style="vertical-align: bottom;" />
                  {{ detail.like_num }}
                </span>
              </div>
            </van-col>
          </van-row>
        </div>
        <div style="color: #999999; padding: 0px 1rem 0.5rem;" @click="goTo">
          {{ item.book_name }} ｜ {{ item.localism_type }}
        </div>
      </div>
      <div v-else class="audit-module" style="margin-top: 1rem;">
        <div style="color: #222222; padding: 0px 1rem 0.5rem;">{{ item.book_name }} ｜ {{ item.localism_type }}</div>
        <div v-if="item.status === 'DISABLE'" class="van-hairline--top" style="padding: 1rem; font-size: 0.85rem;">
          <p style="color: #999999; margin-bottom: 0.25rem;">老师留言：</p>
          <p>{{ item.check_note }}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
/**
 * 视频组件通用模块
 */
import icon_dianzan1 from '@images/icon-dianzan01@2x.png'
import icon_dianzan2 from '@images/icon-dianzan02@2x.png'
import icon_liuyan from '@images/icon-liuyan@2x.png'
import icon_avatar from '@images/que-touxiang@2x.png'

import icon_refuse from '@images/icon-jujue@2x.png'
import icon_apply from '@images/icon-shenhe@2x.png'
import icon_enable from '@images/icon-tongguo@2x.png'

import 'mui-player/dist/mui-player.min.css'
import MuiPlayer from 'mui-player'
import _ from 'lodash';
import { DEFAULT_COVER } from '@/constant'

</script>

<script>
import mixin from 'common/mixin';

export default {
  mixins: [mixin.likeFn],
  props: ['item'],
  data() {
    return {
      detail: {},
      mp: ''
    }
  },
  computed: {
    // eslint-disable-next-line vue/return-in-computed-property
    status_icon () {
      switch (this.item.status) {
        case 'ENABLE':
          return icon_enable
        case 'DISABLE':
          return icon_refuse
        case 'APPLY':
          return icon_apply
      }
    }
  },
  created() {
  },
  mounted() {
    // TAG: 视频组件控制
    setTimeout(() => {
      var mp = new MuiPlayer({
        container: '#mui-player-' + this.item.id,
        title: this.item.title,
        src: this.item.video,
        poster: this.item.cover ? this.item.cover : DEFAULT_COVER,
        // poster: DEFAULT_COVER,
        autoFit: false,
        videoAttribute: [ // 声明启用同层播放, 不让会自动全屏播放
          { attrKey: 'webkit-playsinline', attrValue: 'webkit-playsinline' },
          { attrKey: 'playsinline', attrValue: 'playsinline' },
          { attrKey: 'x5-video-player-type', attrValue: 'h5-page' },
        ]
      })
      this.mp = mp; // 渲染速度问题，只有视频控件渲染完成后显示
      this.detail = _.cloneDeep(this.item);
      this.detail.showStatus = true;
      var video = mp.video();
      // 监听原生video事件，审核状态标签显示控制
      var _this = this;
      video && video.addEventListener('play', function () {
        _this.detail.showStatus = false;
      });
      video && video.addEventListener('pause', function () {
        _this.detail.showStatus = true;
      });
    }, 500);
    // 配置16:9高度比
    const width = document.getElementById('mui-player-' + this.item.id).clientWidth;
    const height = (width * 9) / 16;
    document.getElementById('mui-player-' + this.item.id).height = height;
  },
  methods: {
    goTo () { // 跳转作品详情页
      this.$router.push({
        path: '/client/videoDetail',
        query: {
          prod_id: this.item.id,
          type: this.item.type, // 特殊标识，判断入口 为keepAlive使用
          perf_id: this.item.perf_id,
          book_id: this.item.book_id
        }
      });
    },
    setComment() {
      this.$router.push({
        path: '/client/videoDetail/comment',
        query: {
          prod_id: this.item.id,
          book_id: this.item.book_id
        }
      });
    }
  }
}
</script>

<style lang="less" scoped>
.video-wrapper {
  margin: 1rem;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.13);
  .status {
    position: absolute; 
    top: 0; 
    right: 0; 
    z-index: 999;
  }
  .video-div {
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
  }

  .video-bar {
    color: #713610;
    padding: 1rem;
    padding-bottom: 0.5rem;
 
  }
}
</style>