<template>
  <view class="comment">
    <Tips v-if="messageShow" />
    <view class="comment-input">
      <input
        type="text"
        confrim-type="done"
        placeholder="输入评论内容……"
        class="input-field"
        v-model="comment"
        @confirm="handleSubmit"
      />

      <!-- <view class="input-field">输入评论内容……</view> -->
    </view>
    <view class="comment-count">
      <view class="count" @click="handleClickLike">
        <image :src="props.data.isLike ? IconLikeActive : IconLike" class="icon" />
        <text class="num">{{ props.data.likeNums }}</text>
      </view>
      <view class="count" @click="handleClickStar">
        <image :src="props.data.isFav ? IconStarActive : IconStar" class="icon" />
        <text class="num">{{ props.data.favNums }}</text>
      </view>
      <!-- <view class="count">
        <image src="@/static/icon_message.png" class="icon" />
        <text class="num">{{
          props.data.comment > 1000 ? "999+" : props.data.comment
        }}</text>
      </view> -->
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, watch } from "vue";
// import { likeNews } from "@/api";
import IconLike from "@/static/icon_like.png";
import IconStar from "@/static/icon_star.png";
import IconLikeActive from "@/static/icon_like_active.png";
import IconStarActive from "@/static/icon_star_active.png";
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: 112rpx;
  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;
    justify-content: flex-end;
    align-items: center;
    .count {
      display: flex;
      align-items: center;
      margin-left: 24rpx;

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

    .icon {
      width: 48rpx;
      height: 48rpx;
    }
  }
}
</style>
