<template>
  <div class="collectAndVisit">
    <!-- <div>{{ visit_count }}浏览</div> -->
    <div class="heart_w">
      <div
        class="heart"
        @click="change()"
        :class="{ in: state.isCollect }"
      ></div>
      <span>{{ state.collect }}</span>
    </div>
  </div>
</template>

<script setup>
import request from "@/utils/request";
import { reactive } from "vue";
function launch(id) {
  return request({
    url: "/v1/user/collect/launch",
    method: "post",
    data: { kind: props.kind, object_id: props.object_id },
  });
}
let flag = true;
const props = defineProps({
  is_collect: {
    type: Boolean,
    required: true,
  },
  collect_count: {
    type: Number,
    required: true,
  },
  // visit_count: {
  //   type: Number,
  //   required: true,
  // },
  kind: {
    type: Number,
    required: true,
  },
  object_id: {
    type: [String, Number],
    required: true,
  },
});

const state = reactive({
  collect: props.collect_count,
  isCollect: props.is_collect,
});

async function postData() {
  if (flag) {
    flag = false;
    await launch()
      .then((res) => {
        if (200 == res.code) {
          state.isCollect = res.data;
          if (res.data) {
            state.collect++;
          } else {
            state.collect--;
          }
        }
        flag = true;
      })
      .catch(() => {
        flag = false;
      });
  }
}

function change() {
  postData();
}
</script>

<style lang="scss" scoped>
.collectAndVisit {
  display: flex;
  justify-content: space-around;
  .heart_w {
    vertical-align: text-bottom;
    span {
      vertical-align: text-bottom;
      position: relative;
      top: 1px;
    }
  }
  .heart {
    cursor: pointer;
    user-select: none;
    vertical-align: text-bottom;
    display: inline-block;
    width: 18.3px;
    height: 16.4px;
    margin-right: 5px;
    background-size: cover;
    background-image: url(./img/heart0.png);
  }
  .in {
    background-image: url(./img/heart1.png);
  }
}
</style>
