<template>
  <view class="rating-page">
    <!-- 评分区域 -->
    <view class="rating-box">
      <view class="rating-row">
        <view
          v-for="(item, index) in 5"
          :key="index"
          class="rating-item"
        >
          <u-icon
            :name="index < overallRating ? 'heart-fill' : 'heart'"
            :color="index < overallRating ? '#FF6365' : '#e5e5e5'"
            size="45"
            @click="overallRating = index + 1"
          ></u-icon>
          <text :class="['rating-text', { active: index === overallRating - 1 }]">
            {{ ratingTexts[index] }}
          </text>
        </view>
      </view>
    </view>

    <!-- 分项评分 -->
    <view class="detail-rating">
      <view class="rating-item" v-for="(item, index) in ratingItems" :key="index">
        <text class="item-label">{{ item.label }}</text>
        <view class="hearts-row">
          <u-icon
            v-for="n in 5"
            :key="n"
            :name="n <= item.value ? 'heart-fill' : 'heart'"
            :color="n <= item.value ? '#FF6365' : '#e5e5e5'"
            size="36"
            @click="item.value = n"
          ></u-icon>
        </view>
      </view>
    </view>

    <!-- 评价输入 -->
    <view class="comment-box">
      <u--textarea
        v-model="comment"
        placeholder="口味、服务、环境如何？有哪些想要提的建议？"
        height="160"
      ></u--textarea>
    </view>

    <!-- 提交按钮 -->
    <view class="submit-btn">
      <u-button
        text="提交"
        shape="circle"
        :customStyle="{
          width: '100%',
          height: '88rpx',
          background: '#ff6633',
          color: '#ffffff',
          border: 'none'
        }"
      ></u-button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      overallRating: 5,
      ratingTexts: ['非常差', '较差', '一般', '推荐', '超赞'],
      ratingItems: [
        { label: '口味', value: 5 },
        { label: '环境', value: 0 },
        { label: '服务', value: 0 }
      ],
      comment: ''
    }
  }
}
</script>

<style lang="scss" scoped>
.rating-page {
  min-height: 100vh;
  background-color: #ffffff;
  padding: 40rpx;
  padding-bottom: 120rpx;

  .rating-box {
    margin-bottom: 60rpx;

    .rating-row {
      display: flex;
      justify-content: space-between;
      padding: 0 20rpx;
    }

    .rating-item {
      display: flex;
      flex-direction: column;
      align-items: center;

      .rating-text {
        font-size: 24rpx;
        color: #999999;
        margin-top: 10rpx;

        &.active {
          color: #333333;
        }
      }
    }
  }

  .detail-rating {
    .rating-item {
      display: flex;
      align-items: center;
      margin-bottom: 30rpx;

      .item-label {
        width: 80rpx;
        font-size: 28rpx;
        color: #333333;
      }

      .hearts-row {
        display: flex;
        gap: 20rpx;
      }
    }
  }

  .comment-box {
    margin-top: 40rpx;
  }

  .submit-btn {
    position: fixed;
    left: 30rpx;
    right: 30rpx;
    bottom: 40rpx;
  }
}

::v-deep .u-textarea {
  background-color: #f7f8fa;
  border-radius: 8rpx;
  padding: 20rpx;
}
</style>