<template>
  <view :class="{
    reply: true,
    noPic: !data?.pics
  }">
    <view class="reply-content">
      <view class="reply-user">
        <view class="reply-user-pic">
          <image
            class="img"
            src="http://yshop.l1.ttut.cc/admin-api/infra/file/4/get/7599202df273d25f1ce3aeba21165a544849248fda23aad090098d7be0c063c9.jpeg"
          />
          <!-- <image :src="data.avatar" /> -->
        </view>
        <view class="reply-user-name">
          <view class="name">
            <!-- {{ data.nickname }} -->
            我的名字
          </view>
          <view class="productScore">
            <uv-rate
              count="5"
              :value="data.productScore"
              readonly
              size="12"
              gutter="1"
              active-color="#ee6d46"
              inactive-color="#999999"
            ></uv-rate>
          </view>
        </view>
      </view>
      <view class="reply-text">
        {{ data.comment }}
      </view>
    </view>
    <view
      class="reply-pic"
      v-if="data?.pics"
    >
      <uv-album
        :urls="data?.pics"
        space="8rpx"
      ></uv-album>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue';
const props = defineProps(['data'])

const data = ref(props.data)
</script>

<style lang="less">
.reply {
  margin-top: 20rpx;

  &.noPic {

    .reply-content {}
  }

  &-pic {
    width: 180rpx;
    height: 180rpx;
    background: #FFFFFF;
    border-radius: 15rpx;
  }

  &-user {
    display: flex;
    align-items: center;
    margin-bottom: 16rpx;

    &-pic {
      width: 60rpx;
      height: 60rpx;
      border-radius: 50%;
      margin-right: 10rpx;

      .img {
        width: 60rpx;
        height: 60rpx;
        display: block;
        border-radius: 50%;

      }
    }

    &-name {
      margin-left: 6rpx;
      line-height: 33rpx;
      font-size: 24rpx;
      color: #333333;
    }
  }

  &-content {
    border-right: 0;
    flex: 1;
    font-size: 30rpx;
    color: #333333;
  }
}
</style>
