<template>
  <view class="review-page">
    <view class="header">
      <text class="title">服务评价</text>
      <text class="subtitle">请对本次售后服务进行评价</text>
    </view>

    <view class="rating-section">
      <text class="label">服务评分</text>
      <view class="stars">
        <text 
          v-for="i in 5" 
          :key="i" 
          class="star" 
          :class="{ active: i <= rating }"
          @click="setRating(i)"
        >★</text>
      </view>
      <text class="rating-text">{{ ratingText }}</text>
    </view>

    <view class="comment-section">
      <textarea 
        v-model="comment" 
        class="comment-input" 
        placeholder="请输入您的评价内容，您的建议是我们改进的动力"
        maxlength="200"
      ></textarea>
      <text class="word-count">{{ comment.length }}/200</text>
    </view>

    <button class="submit-btn" @click="submitReview" :loading="submitting">提交评价</button>
  </view>
</template>

<script setup lang="uts">
import { ref, computed } from 'vue'

const rating = ref(5)
const comment = ref('')
const submitting = ref(false)

const ratingText = computed(() => {
  const texts = ['非常不满意', '不满意', '一般', '满意', '非常满意']
  return texts[rating.value - 1]
})

const setRating = (val: number) => {
  rating.value = val
}

const submitReview = () => {
  if (submitting.value) return
  submitting.value = true
  
  // 模拟提交
  setTimeout(() => {
    uni.showToast({
      title: '评价成功',
      icon: 'success'
    })
    
    setTimeout(() => {
      uni.navigateBack()
    }, 1500)
    
    submitting.value = false
  }, 1000)
}
</script>

<style scoped>
.review-page {
  flex: 1;
  background-color: #ffffff;
  padding: 20px;
}

.header {
  margin-bottom: 30px;
  text-align: center;
}

.title {
  font-size: 20px;
  font-weight: bold;
  color: #333;
  margin-bottom: 10px;
}

.subtitle {
  font-size: 14px;
  color: #999;
}

.rating-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 30px;
}

.label {
  font-size: 16px;
  color: #333;
  margin-bottom: 15px;
}

.stars {
  display: flex;
  margin-bottom: 10px;
}

.star {
  margin-right: 10px;
  font-size: 32px;
  color: #ddd;
  transition: color 0.2s;
}

.star.active {
  color: #ffca28;
}

.rating-text {
  font-size: 14px;
  color: #666;
}

.comment-section {
  position: relative;
  margin-bottom: 30px;
}

.comment-input {
  width: 100%;
  height: 120px;
  background-color: #f5f5f5;
  border-radius: 8px;
  padding: 15px;
  font-size: 14px;
  box-sizing: border-box;
}

.word-count {
  position: absolute;
  bottom: 10px;
  right: 10px;
  font-size: 12px;
  color: #999;
}

.submit-btn {
  background-color: #007aff;
  color: #ffffff;
  border-radius: 25px;
  font-size: 16px;
  font-weight: bold;
  height: 50px;
  line-height: 50px;
}
</style>

