<template>
  <div class="bar">
    <span
      class="iconfont icon-like"
      style="user-select: none; cursor: pointer; color: indianred"
      @click="handleClickLike"
    ></span>
    <!-- <svg
      class="icon"
      aria-hidden="true"
      style="user-select: none; cursor: pointer"
      @click="handleClickLike"
    >
      <use xlink:href="#icon-like"></use>
    </svg> -->
    <!-- <svg
    
      class="icon"
      aria-hidden="true"
    >
      <use xlink:href="#icon-likefill"></use>
    </svg> -->
    <span class="count">{{ like }}</span>
    <!-- <svg class="icon" aria-hidden="true">
      <use xlink:href="#icon-online"></use>
    </svg> -->
    <span
      class="iconfont icon-online"
      style="user-select: none; color: indianred"
    ></span>
    <span class="count">{{ online }}</span>
  </div>
</template>
<script setup name="Like">
import { ElMessage } from "element-plus";
import { toRefs } from "vue";
import { addMeetingLikeTotal } from "@/api/meeting";
import { useStore } from "vuex";
const store = useStore();
const props = defineProps({
  like: {
    type: Number,
    default: 0,
  },
  online: {
    type: Number,
    default: 0,
  },
  meetingId: {
    type: Number,
    required: true,
  },
});
const { like, online, meetingId } = toRefs(props);

const handleClickLike = async () => {
  // if (store.state.liked) {
  //   ElMessage.error("不允许重复点赞");
  //   return;
  // }
  await addMeetingLikeTotal(meetingId.value);
  // store.commit("setLiked", true);
  // ElMessage.success("点赞成功");
};
</script>
<style scoped lang="scss">
.bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100px;
  height: 34px;
  //   background-color: indianred;
  .count {
    min-width: 3em;
    margin: 0 4px 0 4px;
    color: #888;
  }
}

.icon {
  color: indianred;
  width: 1.2em;
  height: 1.2em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
</style>
