<template>
  <view>
    <u-popup ref="popup" :show="showPopup" :round="10" @close="closePopup" :mask-close-able="false">
      <view class="cancel-reason-container">
        <view class="title">选择退款原因</view>
        <view class="reason-list">
          <view v-for="(reason, index) in applyRefundReasons" :key="index" class="reason-item"
            @click="selectReason(index)">
            <view :class="['radio', selectedReason === index ? 'active' : '']"></view>
            <text>{{ reason }}</text>
          </view>
        </view>
        <button class="confirm-btn" @click="confirmRefund">确认取消</button>
      </view>
    </u-popup>
  </view>
</template>

<script>
import { NavgateTo } from '../../../../../utils';

export default {
  name: 'refundPopup',
  props: {
    showPopup: {
      type: Boolean,
      default: false
    },
  },
  data() {
    return {
      applyRefundReasons: [
        '不想要了，无理由退货',
        '商品信息拍错',
        '没用/少用优惠',
        '缺货',
        '其他'
      ],
      selectedReason: 0
    };
  },
  methods: {
    closePopup() {
      this.$emit('update:showPopup', false);
    },

    selectReason(index) {
      this.selectedReason = index;
    },

    confirmRefund() {
      const selectedText = this.applyRefundReasons[this.selectedReason];
      this.$emit('update:showPopup', false);
      this.$emit('refundConfirmed', { reason: selectedText });
    }
  },
  watch: {
    showPopup(newVal) {
      if (newVal) {
        this.selectedReason = 0;
      }
    }
  }
};
</script>

<style scoped>
@import './refund.css';
</style>