<template>
  <!--  <uv-scroll-list>-->
  <view class="reply">
    <view class="reply-cont">
      <view class="reply-user">
        <view class="reply-user-pic">
          <uv-image
              :src="data.avatar"
              width="50rpx"
              height="50rpx"
          ></uv-image>
        </view>
        <view class="reply-user-name">
          {{ data.nickname }}
        </view>
      </view>
      <view class="reply-text">
        {{ data.comment }}
      </view>
    </view>

    <view
        class="reply-pic flex flex-ai__center"
        v-if="data.pics && data.pics.length>0"
    >
      <template
          v-for="(pic,index) in data.pics.slice(0,1)"
          :key="index"
      >
        <image
            class="image"
            :src="pic"
            @click="doPreviewImage(index, data.pics)"
        />
      </template>
    </view>
  </view>
  <!--  </uv-scroll-list>-->
</template>

<script setup>
import { toRefs } from 'vue';
import { useImage } from "@/hooks/useImage";

const props = defineProps(['data'])

const {data} = toRefs(props);

const {preview} = useImage()

function doPreviewImage(current, urls) {
  preview({
    current,
    urls,
  })
}
</script>

<style lang="scss">
.reply {
  display: flex;
  border: 1rpx solid #E6E6E6;
  border-radius: 15rpx;
  overflow: hidden;
  width: 565rpx;
  margin-top: 30rpx;

  &-cont {
    flex: 1;
    padding: 20rpx;

    .reply-user {
      display: flex;
      align-items: center;

      &-pic {
        margin-right: 10rpx;
      }

      &-name {
        font-size: 24rpx;
        color: #333333;
      }
    }

    .reply-text {
      font-size: 24rpx;
      line-height: 32rpx;
      color: #333333;
      margin-top: 20rpx;
    }
  }

  &-pic {
    width: 187rpx;
  }
}

.reply-pic {

  .image {
    width: 180rpx;
    height: 180rpx;
  }
}
</style>
