<template>
  <view class="container">
    <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 cancelReasons" :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="confirmCancel">确认取消</button>
      </view>
    </u-popup>
  </view>
</template>

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

export default {
  name: 'cancelOrderPopup',
  props: {
    showPopup: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      cancelReasons: [
        '商品价格不稳定',
        '买错规格/品种',
        '未按时发货',
        '业务反馈没货',
        '不想要了，无理由退货'
      ],
      selectedReason: 0
    };
  },
  methods: {
    closePopup() {
      this.$emit('update:showPopup', false);
    },

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

    confirmCancel() {
      const selectedText = this.cancelReasons[this.selectedReason];
      uni.showModal({
        title: "取消订单",
        content: "千辛万苦挑选的商品，确定要取消吗？",
        success: (res) => {
          if (res.confirm) {
            this.$emit('update:showPopup', false);
            this.$emit('orderCancelled', { reason: selectedText });
            uni.showToast({
              title: '订单取消成功',
              icon: 'success'
            });
          }
        },
      });
    }
  },
  watch: {
    showPopup(newVal) {
      if (newVal) {
        this.selectedReason = 0;
      }
    }
  }
};
</script>

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