<template>
    <view class="page-container">

        <view scroll-y class="content">
            <!-- 取消原因选择 -->
            <view class="cancel-section">
                <text class="section-title">选择取消原因</text>

                <view class="reason-item" v-for="(item, index) in reasonList" :key="index" @click="selectReason(index)">
                    <view class="radio" :class="{ active: selectedIndex === index }">
                        <image v-if="selectedIndex === index" src="/static/workbench/radio.png" mode="aspectFill" />
                    </view>
                    <text class="reason-text">{{ item }}</text>
                </view>

                <!-- 其它原因输入框 -->
                <view v-if="selectedIndex === reasonList.length - 1" class="other-input">
                    <textarea class="textarea" placeholder="请输入其他原因" v-model="otherReason"></textarea>
                </view>
            </view>
        </view>

        <!-- 底部按钮 -->
        <view class="bottom-buttons">
            <view class="btn btn-confirm" @click="confirmCancel">确认拒绝</view>
        </view>
    </view>
</template>

<script>
import { cancelOrderReason, cancelOrder } from '@/api/order'
import { onShow } from '@dcloudio/uni-app';
export default {
    data() {
        return {
            reasonList: [],
            selectedIndex: -1,
            otherReason: '',
            orderId: '',
            orderStatus: ''
        }
    },
    onLoad(options) {
       if(options.orderId) this.orderId = options.orderId
       if(options.orderStatus) this.orderStatus = options.orderStatus
    },
    onShow() {
        this.cancelOrderReason('3')
    },
    methods: {
        cancelOrderReason(type) {
            cancelOrderReason(type).then(res => {
                if (res.data.code == 200) {
                    this.reasonList = res.data.data || [];
                }
            })
        },

        selectReason(index) {
            this.selectedIndex = index
        },
        confirmCancel() {
            if (this.orderStatus==2) {
                uni.showToast({
                    title: '操作失败，请重试刷新当前页面',
                    icon: 'none'
                })
            }

            // 验证是否选择了原因
            if (this.selectedIndex === -1) {
                uni.showToast({
                    title: '请选择取消原因',
                    icon: 'none'
                })
                return
            }

            // 如果选择了"其它"，验证是否填写了原因
            if (this.selectedIndex === this.reasonList.length - 1 && !this.otherReason.trim()) {
                uni.showToast({
                    title: '请填写其他原因',
                    icon: 'none'
                })
                return
            }
            let cancelReason = ''
            if (this.selectedIndex === this.reasonList.length - 1) {
                cancelReason = this.otherReason
            } else {
                cancelReason = this.reasonList[this.selectedIndex]
            }

            cancelOrder({
                orderId: this.orderId,
                cancelReason: cancelReason
            }).then(res => {
                if (res.data.code === 200) {
                    uni.showToast({ title: res.data.msg, icon: 'none' });
                    setTimeout(() => {
                        uni.navigateBack({
                            delta: 1
                        })
                    }, 1000)

                } else {
                    uni.showToast({
                        title: res.data.msg || '取消失败',
                        icon: 'none'
                    })
                }
            })
        }
    }
}
</script>

<style scoped lang="scss">
.page-container {
    min-height: 100vh;
    background: #F7F8FA;
    width: 100%;
}


.content {
    padding: 32rpx;
    width: 100%;
}

.cancel-section {
    background: #FFFFFF;
    border-radius: 16rpx;
    padding: 32rpx;
    width: 100%;

    .section-title {
        font-weight: 500;
        font-size: 36rpx;
        color: #1D2129;
        display: block;
    }

    .reason-item {
        display: flex;
        align-items: center;
        margin-top: 32rpx;

        .radio {
            width: 36rpx;
            height: 36rpx;
            border-radius: 50%;
            border: 1rpx solid #C0C4CC;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 24rpx;
            flex-shrink: 0;


            image {
                width: 36rpx;
                height: 36rpx;
            }

            &.active {
                // border-color: #07C160;
                // background: #07C160;
            }
        }

        .reason-text {
            font-weight: 400;
            font-size: 28rpx;
            color: #4E5969;
        }
    }

    .other-input {
        margin-top: 20rpx;

        width: 100%;

        .textarea {
            height: 200rpx;
            background: #F7F8FA;
            border-radius: 8rpx 8rpx 8rpx 8rpx;
            box-sizing: border-box;
            font-weight: 400;
            font-size: 28rpx;
            color: #4E5969;
            padding: 16rpx;
        }
    }
}

.bottom-buttons {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 24rpx 48rpx;
    background: #FFFFFF;
    border-top: 1rpx solid #F0F0F0;

    .btn {
        width: 100%;
        height: 88rpx;
        border-radius: 44rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 500;
        font-size: 32rpx;

        &.btn-confirm {
            background: #333335;
            font-weight: 500;
            font-size: 32rpx;
            color: #FFFFFF;
            text-align: center;
        }
    }
}
</style>