<template>
  <!-- 点评详情页面 -->
  <view class="review-details-pages">
    <view class="swiper-list">
      <wd-swiper
        :list="swiperList"
        direction="horizontal"
        indicatorPosition="right"
        autoplay
        height="456rpx"
        v-model:current="current"
        @click="handleClick"
        @change="onChange"
      >
        <template #indicator="{ current, total }">
          <view class="custom-indicator" style="position: absolute; bottom: 24rpx; right: 24rpx">
            {{ current + 1 }}/{{ total }}
          </view>
        </template>
      </wd-swiper>
    </view>
    <view class="revuew-content">
      <view class="user-info">
        <view class="info-content">
          <image src="@/static/reviewDetails/avatar.png" mode="aspectFill"></image>
          <view class="text-box">
            <text class="user-name">不爱吃鱼的小猫咪</text>
            <text class="fb-time">2024-08-03</text>
          </view>
        </view>
        <view>
          <text class="score">4.9</text>
          <text class="score-unit">/5分</text>
        </view>
      </view>
      <text style="margin-top: 12rpx; font-size: 14 * 2rpx; color: #3d3d3d">
        跟团游行程紧凑有序，充分利用了时间，让游客能够在有限的时间内充分游览黄果树的主要景点，如黄果树大瀑布、陡坡塘瀑布、天星桥景区等,不留遗憾。导游专业且热情，对景区有深入的了解，能够生动有趣地讲解景点的历史、文化和特色,同时耐心解答问题。
        跟团游行程紧凑有序，充分利用了时间，让游客能够在有限的时间内充分游览黄果树的主要景点，如黄果树大瀑布、陡坡塘瀑布、天星桥景区等,不留遗憾。导游专业且热情，对景区有深入的了解，能够生动有趣地讲解景点的历史、文化和特色,同时耐心解答问题。
      </text>
    </view>
    <view class="scenic-spot">
      <image src="@/static/reviewDetails/fj.png" mode="aspectFill"></image>
      <view class="scenic-area-details">
        <text class="scenic-name">红枫湖+青岩古镇+云漫湖</text>
        <text class="scenic-type">自然风景</text>
        <view class="tag-list">
          <text class="tag">无购物</text>
          <text class="tag">无购物</text>
        </view>
      </view>
      <wd-icon class="icon" color="#ABAAAA" name="arrow-right" size="22px"></wd-icon>
    </view>
    <view class="dz-btn">
      <wd-icon color="#767676" name="thumb-up" size="22px"></wd-icon>
      <text>12</text>
    </view>
  </view>
</template>

<script setup>
const current = ref(0);
onMounted(() => {
  xma.getSystemInfo({
    success: function (res) {
      console.log(res, '11111111');
    },
  });
});
const swiperList = ref([
  'https://registry.npmmirror.com/wot-design-uni-assets/*/files/redpanda.jpg',
  'https://registry.npmmirror.com/wot-design-uni-assets/*/files/capybara.jpg',
  'https://registry.npmmirror.com/wot-design-uni-assets/*/files/panda.jpg',
]);
function handleClick(e) {}
function onChange(e) {
  console.log(e);
}
</script>

<style lang="scss" scoped>
page {
  background: #ffffff;
}
.review-details-pages {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 750rpx;
  .swiper-list {
    width: 375 * 2rpx;
    height: 228 * 2rpx;
    :deep(.wd-swiper__track) {
      border-radius: 0;
    }
    .custom-indicator {
      padding: 0 12rpx;
      height: 48rpx;
      line-height: 48rpx;
      border-radius: 45%;
      background: rgba(0, 0, 0, 0.6);
      color: #ffffff;
      font-size: 24rpx;
    }
  }
  .revuew-content {
    display: flex;
    flex-direction: column;
    width: 100%;
    align-items: center;
    padding: 40rpx 20rpx;
    box-sizing: border-box;
    .user-info {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .info-content {
        display: flex;
        align-items: center;
        image {
          width: 36 * 2rpx;
          height: 36 * 2rpx;
          border-radius: 50%;
        }
        .text-box {
          display: flex;
          flex-direction: column;
          margin-left: 20rpx;
          .user-name {
            font-size: 14 * 2rpx;
            color: #3d3d3d;
          }
          .fb-time {
            font-size: 11 * 2rpx;
            /* 小文本 */
            color: #abaaaa;
            margin-top: 10rpx;
          }
        }
        .score {
          font-size: 14 * 2rpx;
          /* 4.9 */
          color: #0974f5;
        }
        .score-unit {
          font-size: 12 * 2rpx;
          color: #abaaaa;
        }
      }
    }
  }
  .scenic-spot {
    width: 355 * 2rpx;
    box-sizing: border-box;
    padding: 20rpx 36rpx 20rpx 10rpx;
    background: #f3f3f3;
    border-radius: 8 * 2rpx;
    display: flex;
    align-items: center;
    image {
      width: 102 * 2rpx;
      height: 72 * 2rpx;
      border-radius: 4 * 2rpx;
    }
    .scenic-area-details {
      display: flex;
      flex-direction: column;
      margin-left: 20rpx;
      .cenic-name {
        font-size: 14 * 2rpx;
        color: #3d3d3d;
      }
      .scenic-type {
        font-size: 12 * 2rpx;
        /* 菜头标题文本 */
        color: #3d3d3d;
      }
      .tag-list {
        display: flex;
        flex-wrap: wrap;
        .tag {
          box-sizing: border-box;
          padding: 10rpx 16rpx;
          border-radius: 30rpx;
          border: 2rpx solid #d8d8d8;
          color: #3d3d3d;
          font-size: 16rpx;
          margin-top: 10rpx;
          margin-left: 20rpx;
        }
      }
    }
    .icon {
      margin-left: auto;
    }
  }
  .dz-btn {
    display: flex;
    align-items: center;
    box-sizing: border-box;
    padding: 28rpx 100rpx;
    border: 2rpx solid #abaaaa;
    margin-top: 46rpx;
    border-radius: 68rpx;
    text {
      color: #767676;
      font-size: 28rpx;
      margin-left: 10rpx;
    }
  }
}
</style>
