<template>
  <view class="comment-card">
    <!-- 差评标签和评分 -->
    <view class="top-info">
      <!-- <text class="bad-comment">差评</text> -->
      <view class="score">产品评分 {{ item.product_score }} ★</view>
      <view class="score">服务评分 {{ item.service_score }} ★</view>
      <view class="score">物流评分 {{ item.postage_score }} ★</view>
    </view>
    <!-- 遍历展示每条差评内容 -->
    <view class="comment-content">
      <text>{{ item.comment || "" }}</text>
    </view>
    <!-- 图片展示，这里假设图片数组为imgList -->
    <view class="img-list" v-if="item.pics.length > 0">
      <image
        v-for="(img, index) in item.pics"
        :key="index"
        :src="img"
        mode="scaleToFill"
      ></image>
    </view>
    <!-- 遍历展示产品信息数组 -->
    <view class="product-info-content">
      <view class="product-info-list">
        <image
          class="product-img"
          :src="item.image"
          mode="aspectFill"
          @error="handleError"
          @load="handleLoad"
          v-if="item.image && !isError"
        ></image>
        <image
          class="product-img"
          v-else
          src="/static/images/new_ui/wutu.png"
          mode="scaleToFill"
        />
        <view class="product-detail">
          <text>{{ item.store_name }}</text>
        </view>
      </view>
    </view>
    <view class="comment-content" v-if="item.merchant_reply_content">
      <text style="padding-right: 10rpx">回复内容：</text>
      <text>{{ item.merchant_reply_content || "" }}</text>
    </view>
    <!-- 操作按钮 -->
    <view class="action-buttons">
      <!-- <button class="order-btn">查看订单</button> -->
      <button class="reply-btn" @click="replyHandler(false)">回复评论</button>
    </view>
    <ReplyModal ref="ReplyRefs" @close="close" @submit="submit"></ReplyModal>
  </view>
</template>
<script>
import ReplyModal from "./ReplyModal.vue";
import { reviewGoodsEvaluateReply } from "@/commit/product.js";
export default {
  components: { ReplyModal },
  props: {
    item: {
      type: Object,
      default: () => {},
    },
  },
  index: {
    type: Number,
    default: 0,
  },
  data() {
    return {
      isError: false,
    };
  },
  methods: {
    handleError(e) {
      console.log(e);
      this.isError = true;
    },
    handleLoad(e){
      // console.log(e,"LOAD");
    },
    close() {
      this.$refs.ReplyRefs.close();
      this.$emit("handleReply", {
        isClose: true,
        type: "close",
      });
    },
    submit() {
       this.$refs.ReplyRefs.close();
      this.$emit("handleReply", {
        isClose: true,
        type: "submit",
      });
    },
    async replyHandler() {
      this.$emit("handleReply", {
        isClose: false,
        type: "open",
      });
      uni.showLoading({
        title: "正在打开中...",
        mask: true,
      });
      try {
        const res = await reviewGoodsEvaluateReply(this.item.reply_id);
        if (res.data.status == 200) {
          this.$refs.ReplyRefs.open(this.item, res.data.data);
        }
      } catch (error) {
      } finally {
        uni.hideLoading();
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.comment-card {
  background-color: #fff;
  border-radius: 10rpx;
  box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
  //   margin: 15rpx;
  padding: 15rpx;
  width: calc(100% - 30rpx);
}

.top-info {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
  margin-bottom: 10rpx;
}

.bad-comment {
  color: #e74c3c;
  margin-right: 10rpx;
  font-size: 28rpx;
}

.score {
  color: #ffc107;
  font-size: 28rpx;
}

.comment-content {
  margin-bottom: 10rpx;
  font-size: 28rpx;
  word-break: break-all;
  padding: 15rpx 0;
}

.img-list {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 10rpx;
}

.img-list image {
  width: 100rpx;
  height: 100rpx;
  margin-right: 10rpx;
  margin-bottom: 10rpx;
}
.product-info-content {
  background: #f3f5f7;
  border-radius: 10rpx;
  padding: 10rpx 15rpx;
}
.product-info-list {
  display: flex;
  //   align-items: center;
  padding-bottom: 12rpx;
  padding-top: 12rpx;
  font-size: 26rpx;
}

.product-img {
  width: 60rpx;
  height: 60rpx;
  margin-right: 10rpx;
}

.product-detail {
  flex: 1;
}

.action-buttons {
  display: flex;
  gap: 25rpx;
  margin-top: 26rpx;
}

.order-btn,
.reply-btn {
  flex: 1;
}
.reply-btn {
  background: #187fdf;
  color: #fff;
  margin-right: 0rpx;
}
</style>