<template>
  <div class="video-wrapper">
    <div class="video-div" :id="'mui-player-' + item.id"></div>
    <div class="video-bar">
      <van-row style="text-align: center;">
        <van-col span="7">
          <span style="color: #777777;">
            {{ item.play_num }}次播放
          </span>
        </van-col>
        <van-col span="1" style="color: #EEEDED;">
          |
        </van-col>
        <van-col span="8">
          <span @click="handleAction('favor', detail.id)">
            <van-icon v-if="!detail.is_favor" :name="icon_shoucang1" size="1.2rem" style="vertical-align: bottom;" />
            <van-icon v-else :name="icon_shoucang2" size="1.2rem" style="vertical-align: bottom;" />
            {{ detail.favor_num }}
          </span>
        </van-col>
        <van-col span="1" style="color: #EEEDED;">
          |
        </van-col>
        <van-col span="7">
          <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>
        </van-col>
      </van-row>
    </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_shoucang1 from '@images/icon-shoucang01@2x.png'
import icon_shoucang2 from '@images/icon-shoucang02@2x.png'

import { ref, reactive, onMounted } from 'vue'
import 'mui-player/dist/mui-player.min.css'
import MuiPlayer from 'mui-player'
import _ from 'lodash';
import axios from 'axios';
import { Toast } from 'vant';

import { useRoute, useRouter } from 'vue-router'
const $route = useRoute();
const $router = useRouter();

const goTo = () => { // 跳转作品详情页
  $router.push({
    path: '/client/videoDetail'
  });
}

onMounted(() => {
})

</script>

<script>
export default {
  props: ['item'],
  data() {
    return {
      detail: {}
    }
  },
  created() {
  },
  mounted() {
    setTimeout(() => {
      var mp = new MuiPlayer({
        container: '#mui-player-' + this.item.id,
        title: this.item.title,
        src: this.item.video,
        poster: this.item.cover,
        autoFit: false,
        videoAttribute: [ // 声明启用同层播放, 不让会自动全屏播放
          {attrKey:'webkit-playsinline',attrValue:'webkit-playsinline'},
          {attrKey:'playsinline',attrValue:'playsinline'},
          {attrKey:'x5-video-player-type',attrValue:'h5-page'},
        ]
      })
      this.detail = _.cloneDeep(this.item);
      var video = mp.video();
      // 监听原生video事件
      var _this = this;
      video.addEventListener('play', function (event) {
        _this.handleAction('play', _this.item.id)
      });
    }, 500)
  },
  methods: {
    /**
     * 用户相关操作
     * @param {String} type 动作类型：like, favor, play
     * @param {String} id 作品 ID
     */
    handleAction (type, id) { // 用户操作
      axios.post('/srv/?a=prod_action', {
        action_type: type,
        prod_id: id
      })
      .then(res => {
        if (res.data.code === 1) {
          if (res.data.msg === `${type}-add-OK`) { // 动作操作成功
            this.detail[`is_${type}`] = 1;
            this.detail[`${type}_num`] = this.detail[`${type}_num`] + 1;
            if (type === 'favor') {
              Toast('收藏成功');
            }
            if (type === 'like') {
              Toast('点赞成功');
            }
          } else { // 取消操作
            this.detail[`is_${type}`] = 0;
            this.detail[`${type}_num`] -= this.detail[`${type}_num`];
            if (type !== 'play') {
              Toast('取消成功');
            }
          }
        } else {
          console.warn(res);
          Toast({
            icon: 'close',
            message: res.data.msg
          });
        }
      })
      .catch(err => {
        console.error(err); 
      });
    },
    setCommit() {
      console.warn('跳转详情页，移动到留言页');
      console.warn(this.detail.id);
    }
  }
}
</script>

<style lang="less" scoped>
.video-wrapper {
  .video-bar {
    color: #713610; 
    padding: 1rem; 
    padding-bottom: 0.5rem;
  }
}
</style>