<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="setCollect">
            <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;" />
            {{ item.favor_num }}
          </span>
        </van-col>
        <van-col span="1" style="color: #EEEDED;">
          |
        </van-col>
        <van-col span="7">
          <span @click="setLike()">
            <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;" />
            {{ item.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)
    }, 500)
  },
  methods: {
    setCollect() {
      console.warn(this.detail.is_favor);
      // this.detail.is_favor = this.detail.is_favor ? 1 : 0
      axios.post('/srv/?a=prod_action', {
        action_type: 'favo',
        prod_id: this.detail.id
      })
      .then(res => {
        if (res.data.code === 1) {
          console.warn(res.data.data);
        } else {
          console.warn(res);
          Toast({
            icon: 'close',
            message: res.data.msg
          });
        }
      })
      .catch(err => {
        console.error(err); 
      })
    },
    setLike() {
      console.warn(this.detail.is_like);
      // this.detail.is_like = this.detail.is_like ? 1 : 0
    },
    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>