<template>
  <view class="comment">

    <view class="comment-count">
      <view class="count" @click="handleClickLike">
        <image
          :src="props.data.isLike ? 'https://cankao.obs.cn-east-3.myhuaweicloud.com/mini/newmini/zan_like_fill%402x.png' : 'https://cankao.obs.cn-east-3.myhuaweicloud.com/mini/newmini/zan_like_normal%402x.png'"
          class="icon" />
        <text class="num">点赞</text>
      </view>
      <!-- <view class="count" @click="handleClickStar">
        <image
          :src="props.data.isFav ? 'https://cankao.obs.cn-east-3.myhuaweicloud.com/mini/newmini/star_icon_fill%402x.png' : 'https://cankao.obs.cn-east-3.myhuaweicloud.com/mini/newmini/star_icon_normal%402x.png'"
          class="icon" />
        <text class="num">收藏</text>
      </view>
      <button class="count" style="background-color: transparent;" open-type="share">
        <image src="https://cankao.obs.cn-east-3.myhuaweicloud.com/mini/newmini/share_icon%402x.png" class="icon" />
        <text class="num">分享</text>
      </button> -->
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, watch } from "vue";

const emit = defineEmits(["handleClickLike", "handleClickStar"]);
const messageShow = ref(false);
const props = defineProps({
  data: {
    type: Object,
    default: () => { },
  },
});

const isLike = ref(false);
const isStar = ref(false);
const comment = ref("");

// 用户点赞
const handleClickLike = () => {

  emit("handleClickLike");
};
// 用户收藏
const handleClickStar = () => {
  // isStar.value = !isStar.value;
  emit("handleClickStar");
};

const handleSubmit = () => {
  comment.value = "";
  uni.showToast({
    title: "提交成功",
    icon: "none",
    duration: 1500,
  });
};
</script>

<style scoped lang="scss">
.comment {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 160rpx;
  background-color: #fff;
  box-shadow: 0 0 10rpx rgba(51, 51, 51, 0.3);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx 24rpx;
  box-sizing: border-box;

  .comment-input {
    width: 100%;

    .input-field {
      height: 72rpx;
      background-color: #f5f5f5;
      border-radius: 52rpx;
      // font-size: 24rpx;
      font-size: var(--h4-font-size);
      color: #333;
      padding: 0 24rpx;
      display: flex;
      align-items: center;
    }

    .input-placeholder {
      color: rgba(51, 51, 51, 0.6);
    }
  }

  .comment-count {
    display: flex;
    width: 100vw;


    .count {
      display: flex;
      text-align: center;
      justify-content: center;
      align-items: center;
      margin-left: 24rpx;
      width: 100%;

      .num {
        margin-left: 12rpx;
        // font-size: 24rpx;
        font-size: var(--h4-font-size);
        color: #333;
      }
    }

    .icon {
      width: 48rpx;
      height: 48rpx;
    }
  }
}


button::after {
  border: 0;
}
</style>
