<template>
  <div class="wrap">
    <TgInfo :item="item" />
    <h3>{{ item.title }}</h3>
    <img class="cover" :src="item.imgUrl" alt="" srcset="" />
    <div class="item-footer">
      <div class="opt" @click.stop="liveVideo">
        <img
          :src="item.isFavor === 1 ? liveIconActive : liveIcon"
          alt=""
          srcset=""
        />
        <span>{{ favorUserCount }}</span>
      </div>
      <div class="opt">
        <img src="@/assets/images/comment.png" alt="" srcset="" />
        <span>{{ item.messCount }}</span>
      </div>
      <div class="opt" @click.stop="shareFn">
        <img src="@/assets/images/share-icon.png" alt="" srcset="" />
        <span>{{ item.shareCount }}</span>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, defineProps, defineEmits } from "vue";
import TgInfo from "./TgInfo.vue";
import { showToast } from "vant";
import { likeVideo } from "@/api/video";

const liveIcon = require("@/assets/images/like-icon.png");
const liveIconActive = require("@/assets/images/like-icon3.png");

const props = defineProps({
  item: {
    type: Object,
    default: () => ({}),
  },
  index: {
    type: Number,
  },
});

const shareFn = () => {
  showToast("Demo版本暂不支持");
};

const favorUserCount = ref(props.item.favorUserCount);
const emit = defineEmits(["update"]);
const liveVideo = async () => {
  if (props.item.isFavor === 1) return;
  // 用户点赞视频
  let ret = await likeVideo({
    id: props.item.id,
    option: props.item.isFavor === 1 ? 2 : 1,
  });
  if (ret.code === 0) {
    emit("update", props.index);
    favorUserCount.value = ret.data.count;
  }
};
</script>
<style scoped lang="scss">
.wrap {
  border-bottom: 0.5px solid var(---, #ebeced);
  padding: 32px 0 28px 0;
  text-align: left;
}
h3 {
  color: #333333;
  font-size: 32px;
  font-style: normal;
  font-weight: 500;
  line-height: 48px;
  margin: 20px 0 10px 0;
}
.cover {
  display: block;
  width: 208px;
  height: 280px;
  border-radius: 8px;
  margin-bottom: 30px;
}
.item-footer {
  display: flex;
  .opt {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    color: #666666;
    font-size: 24px;
    font-weight: 400;
    margin-right: 80px;
    img {
      width: 24px;
      height: 24px;
    }
  }
}
</style>
