<template>
  <div class="video-wrapper">
    <div class="video-div" :id="'mui-player-' + item.id"></div>
    <div class="video-bar">
      <van-row>
        <van-col span="12" @click="goTo">
          <van-image round width="2rem" height="2rem" style="vertical-align: middle;" :src="item.avatar" />&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="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.favor_num }}
            </span>
          </div>
        </van-col>
      </van-row>
    </div>
    <div @click="goTo" style="color: #999999; padding: 0px 1rem 0.5rem;">{{ item.kg_name }} ｜ {{ item.localism_type }}
    </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 { ref, reactive, onMounted } from 'vue'
import 'mui-player/dist/mui-player.min.css'
import MuiPlayer from 'mui-player'
import _ from 'lodash';

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

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: {
    goTo () { // 跳转作品详情页
      this.$router.push({
        path: '/client/videoDetail',
        query: {
          prod_id: this.item.id
        }
      });
    },
    setLike() {
      this.detail.is_like = !this.detail.is_like
    },
    setComment() {
      console.warn('跳转详情页，移动到留言页');
      console.warn(this.detail.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);

  .video-div {
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
  }

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