<template>
  <div class="card">
    <CardBox style="padding: 15px 20px" :btnList="btnList" v-on="$listeners">
      <div class="video" @click="$emit('handleToDetail')">
        <CardCoverDetail
          :info="info"
          :info_dict="{
            logo: 'supplier_logo',
            name: 'supplier_name',
            title: 'name',
          }"
          :num_icon="require('@/assets/icon/eye.png')"
        />
      </div>
      <div class="footer">
        <CardFooter
          :info="info"
          :dict="{ is_like: 'is_praise', like_num: 'praise_num' }"
          v-on="$listeners"
        />
      </div>
    </CardBox>
  </div>
</template>

<script>
import CardBox from "../card-module/card-box.vue";
import CardCoverDetail from "../card-module/card-cover-detail.vue";
import CardFooter from "../card-module/card-footer.vue";

export default {
  name: "MyCollectCard",
  components: { CardBox, CardCoverDetail, CardFooter },
  props: {
    info: {
      type: Object,
    },
    manageType: {
      type: Boolean,
      default: false,
    },
    likeOrCollect: {
      type: String,
      default: "",
    },
  },
  data() {
    return {};
  },
  computed: {
    btnList() {
      let arr = [
        {
          type: "del",
          value: this.likeOrCollect == "collect" ? "取消收藏" : "取消点赞",
        },
      ];
      return this.manageType ? [] : arr;
    },
    userInfo() {
      return this.$store.state.userInfo;
    },
  },
};
</script>

<style lang="scss" scoped>
.card {
  width: 100%;
  height: 100%;
  .target {
    background: #f4f4f4;
    width: calc(100% - 20px);
    padding: 10px;
    margin: 10px 0;
  }
  .footer {
    margin-top: 10px;
  }
}
</style>