<!-- 申请退款页面 -->

<template>
    <view>
        <scroll-view :scroll-y="true" @scroll="handleContentScroll">
            <!-- 导航栏  :leftIconColor="!isTop ? '#fff' : '#000'"-->
            <!-- <u-navbar :placeholder="true" autoBack @click="autoBackFun">
                <view slot="center">
                    <view class="centerTitle" style="background-color: #fff;">
                        {{ receivedStatus == '1' || receivedStatus == '2' ? '申请退款' : '申请换货' }}</view>
                </view>
            </u-navbar> -->

            <view class="content">
                <view>
                    <view class="contentDetail" v-if="tab == 1">
                        <view class="tip">请选择取消订单的原因（必选）：</view>
                        <u-radio-group v-model="selectReason" @change="groupChange">
                            <view style="width: 100%;">
                                <!-- //1 未收到，申请退款 list；  2.已收到货，申请退款 list2     3.已收货-换货申请 list3-->
                                <view class="item" v-for="(item,index) in filteredList" :key="index">
                                    <view v-if="item.title" class="title">{{ item.title }}：</view>
                                    <view class="obj" v-if="obj.show" v-for="(obj,i) in item.data" :key="i" style="width: 100%;"
                                        @click="groupChange(obj.value)">
                                        <view class="radioBox">
                                            <u-radio activeColor="#03C1B8 " :name=obj.value></u-radio>{{ obj.text }}
                                        </view>
                                    </view>
                                </view>
                            </view>
                        </u-radio-group>
                    </view>
                    <view class="tip2" v-if="orderStatus == 1">
                        <view class="title">温馨提示：</view>
                        <view class="textClass">
                            1.订单一旦取消，无法恢复<br>
                            2.用户因个人原因申请退货，包邮商品需承担返回运费，非包邮商品需承担送返两程运费<br>
                            3.如有其他问题，请及时与平台联系，联系电话：****-*******<br>
                        </view>
                    </view>
                </view>
                <view v-if="receiptStatus == 'received' && afterSalesType == 'exchange' && tab == 2">
                    <view class="Box">
                        <view class="questionOrDiscribe">
                            <view>问题与描述：</view>
                            <u--textarea v-model="questionOrDiscribeValue" placeholder="请输入问题描述" :maxlength="100"
                                count></u--textarea>

                        </view>
                        <view class="pictures">
                            <view>上传凭证图片：</view>
                            <view style="margin-top: 16rpx;" class="pictureClass">
                                <!-- <view v-for="value in 3" style="position: relative;width: calc(25% - 22rpx)">
                                    <image style="width: 144rpx;height: 144rpx;" src="@/static/points/closeIcon.png"
                                        mode="">
                                    </image>
                                    <image style="width: 36rpx;height: 36rpx;position: absolute;right : 0;top:0"
                                        src="@/static/points/pictureIcon.png" mode="" @click="deletePictureFun">
                                    </image>
                                </view> -->
                                <Upload style="" :maxCount="6" :customImg="true" :width="'70'" :height="'70'"
                                    :src="'/static/points/picture2.png'" @fileList="onUpload" :fileList="fileList" />



                            </view>

                        </view>
                    </view>
                </view>
            </view>
            <view class="buttonClass">
                <u-button :customStyle="{
                    color: '#fff',
                    background: '#03C1B8'
                }" @click="goSubmit">{{ (receiptStatus == 'received' && afterSalesType == 'exchange') ? '确认' : '提交' }}</u-button>

            </view>

        </scroll-view>

    </view>
</template>

<script>
import { afterSaleOrder } from '@/api/pointOrder'
import Upload from '@/components/upload/index.vue';
export default {
    components: { Upload },
    data() {
        return {
            tab: '1',//1 申请换货-申请原因选择  2申请换货-描述、凭证
            orderNo: null,
            orderId: null,
            orderStatus: null,
            afterSalesType: null,
            receiptStatus: null,
            fileList: [],
            headPhotoImg: [],
            questionOrDiscribeValue: '',
            selectReason: '',
            selectReasonValue: null,
            isTop: 0,
            list: [],
            servicePromise: [],
            //未收到，申请退款
            list1: [
                {
                    title: '平台原因',
                    data: [
                        { value: '1', text: '商家无货联系我取消订单', show: true },
                        { value: '2', text: '商家无法按承诺时效送达', show: true },
                        { value: '3', text: '商家其他原因联系我取消订单', show: true },
                    ]
                }, {
                    title: '个人原因',
                    data: [
                        { value: '4', text: '不想要', show: true },
                        { value: '5', text: '商品错选 / 多选', show: true },
                        { value: '6', text: '地址信息填写错误', show: true },
                        { value: '7', text: '7天无理由退货', show: true },
                    ]
                }
            ],
            //已收到货，申请退款
            list2: [
                {
                    title: '',
                    data: [
                        { value: '1', text: '买错/买多/不想要', show: true },
                        { value: '2', text: '商品质量问题', show: true },
                        { value: '3', text: '商品与页面描述不符', show: true },
                        { value: '4', text: '商品/包装破损', show: true },
                        { value: '5', text: '发错货', show: true },
                        { value: '6', text: '少件/未收到货', show: true },
                        { value: '7', text: '7天无理由退货', show: true },
                    ]
                }
            ],
            //已收货-换货申请
            list3: [
                {
                    title: '',
                    data: [
                        { value: '1', text: '商品质量问题', show: true },
                        { value: '2', text: '商品与页面描述不符', show: true },
                        { value: '3', text: '商品/包装破损', show: true },
                        { value: '4', text: '发错货', show: true },
                        { value: '5', text: '少件/未收到货' , show: true},
                        { value: '6', text: '商品大小不合适' , show: true},
                    ]
                },
            ],


        }
    },
    computed: {
        filteredList() {

            // 未收货 → 退款原因 list1
            if (this.receiptStatus === 'notReceived') {
                return this.list1
            }

            // 已收货 + 退款 → list2
            if (this.receiptStatus === 'received' && this.afterSalesType === 'refund') {
                return this.list2
            }

            // 已收货 + 换货 → list3
            if (this.receiptStatus === 'received' && this.afterSalesType === 'exchange') {
                return this.list3
            }

            // 兜底：防止空白
            return []
        }
    },
    onLoad(data) {
        //订单状态(0：待付款 1：待发货 2：待收货 3：已收货 4：售后中  11：取消订单)
        console.log(data, 'onLoad-applyRefund')
        if (data) {
            if (data.tab) this.tab = data.tab
            if (data.orderId) this.orderId = data.orderId
            if (data.orderNo) this.orderNo = data.orderNo
            if (data.orderStatus) this.orderStatus = data.orderStatus
            if (data.receiptStatus) this.receiptStatus = data.receiptStatus
            if (data.afterSalesType) this.afterSalesType = data.afterSalesType
            if (data.servicePromise) this.servicePromise = data.servicePromise
            if (data.questionOrDiscribeValue && data.questionOrDiscribeValue !== "null") {
                this.questionOrDiscribeValue = data.questionOrDiscribeValue
            }

            if (data.fileList && data.fileList !== "[]") {
                this.fileList = JSON.parse(data.fileList)
            }
            if (data.selectReasonValue && data.selectReasonValue !== "null") {
                this.selectReasonValue = data.selectReasonValue
                this.filteredList.map(m => {
                    m.data.forEach(e => {
                        if (this.selectReasonValue == e.text) {
                            this.selectReason = e.value
                        }
                    })

                })
            }
        }


    },
    onReady() {
        // 页面渲染完成后再设置标题
        if (this.receiptStatus == 'notReceived' || (this.receiptStatus == "received" && this.afterSalesType == "refund")) {
            uni.setNavigationBarTitle({
                title: '申请退款'
            });
        } else if (this.receiptStatus && this.afterSalesType == "exchange") {
            uni.setNavigationBarTitle({
                title: '申请换货'
            });
        }
    },
    onShow(data) {
        let flag = this.servicePromise.indexOf('7天无理由退') !== -1
        if (!flag) {
            this.list2.map(m => {
                m.data.forEach(e => {
                    e.show = true
                    if (e.text.indexOf('7天无理由退') !== -1) {
                        e.show = false
                    }

                })
            })
            this.list1.map(m => {
                m.data.forEach(e => {
                    e.show = true
                    if (e.text.indexOf('7天无理由退') !== -1) {
                        e.show = false
                    }

                })
            })
        }


    },
    onPageScroll(e) {
        //console.log("滚动距离为：" + e.scrollTop);
        this.isTop = e.scrollTop;
    },

    methods: {
        // upload事件
        onUpload(e) {
            this.fileList = e
        },
        handleContentScroll(e) {
            this.isTop = e.detail.scrollTop > 0
        },
        clichFun() {

        },
        //点击单选按钮
        groupChange(val) {
            this.selectReason = val
            this.filteredList.map(m => {
                m.data.forEach(item => {
                    if (item.value == val) {
                        this.selectReasonValue = item.text
                    }

                });
            })

        },
        //提交
        goSubmit() {
            if (this.receiptStatus == 'notReceived' || (this.receiptStatus == "received" && this.afterSalesType == "refund")) {
                afterSaleOrder({ // 未收到-申请退款，已收到货-申请退款
                    orderId: this.orderId,
                    orderNo: this.orderNo,
                    applyReason: this.selectReasonValue,
                    afterSaleType: this.receiptStatus == 'notReceived' ? 3 : 1, // afterSaleType  1:退货 2:换  3:未收到货
                    //applyDesc:'',
                    //applyImages:'',
                }).then(res => {
                    if (res.data.code == 200) {
                        uni.redirectTo({
                            url: '/points/order/orderDetails?orderNo=' + this.orderNo,
                        });
                    } else {
                        uni.$u.toast(res.data.msg)
                    }

                })
            }

            if (this.receiptStatus == "received" && this.afterSalesType == "exchange") {
                uni.navigateTo({
                    url: `/points/productDetails/applyExchange?afterSalesType=${this.afterSalesType}&receiptStatus=${this.receiptStatus}&selectReasonValue=${encodeURIComponent(this.selectReasonValue)}&questionOrDiscribeValue=${encodeURIComponent(this.questionOrDiscribeValue)}&fileList=${JSON.stringify(this.fileList)}&orderNo=${this.orderNo}&orderId=${this.orderId}&orderStatus=${this.orderStatus}`
                });
            }


        },
        //返回上一页
        autoBackFun() {
            uni.navigateBack();
        },

    }
}
</script>

<style></style>
<style lang="scss" scoped>
.centerTitle {
    font-family: PingFang SC, PingFang SC;
    font-weight: 500;
    font-size: 34rpx;
    color: #060606;
    text-align: center;
    font-style: normal;
    text-transform: none;
}

.buttonClass {
    position: fixed;
    padding: 32rpx;
    bottom: 0;
    width: 100%;
    font-family: PingFang SC, PingFang SC;

    button {
        height: 84rpx;
        border-radius: 98rpx 98rpx 98rpx 98rpx;
        border: 2rpx solid #03C1B8;
    }

}

.content {
    background-color: #F8F8F8;
    padding: 32rpx;
    font-family: PingFang SC, PingFang SC;
    //height: 658rpx;
    border-radius: 20rpx 20rpx 20rpx 20rpx;


    ::v-deep .Box {
        background: #FFFFFF;
        border-radius: 20rpx 20rpx 20rpx 20rpx;
        padding: 18rpx 22rpx 22rpx 22rpx;

        .questionOrDiscribe {
            font-weight: 500;
            font-size: 28rpx;
            color: #333333;
            text-align: left;
            font-style: normal;
            text-transform: none;

            .u-textarea {
                margin-top: 16rpx;
                height: 206rpx;
                background: #F8F8F8;
                border-radius: 16rpx 16rpx 16rpx 16rpx;
                border: 1rpx solid #DCDCDC;

                .uni-textarea-placeholder {
                    font-weight: 400;
                    font-size: 24rpx;
                    color: #999999;
                    text-align: left;
                    font-style: normal;
                    text-transform: none;
                }

                .uni-textarea-wrapper {
                    font-weight: 400;
                    font-size: 24rpx;
                    color: #333;
                    text-align: left;
                    font-style: normal;
                    text-transform: none;
                }


            }
        }

        .pictures {
            margin-top: 16rpx;
            font-weight: 500;
            font-size: 28rpx;
            color: #333333;
            text-align: left;
            font-style: normal;
            text-transform: none;
        }

        .pictureClass {

            .u-upload {
                .u-upload__wrap {
                    /* display: inline-block; */
                    flex-direction: row;
                    /* justify-content: space-between; */
                    flex-wrap: wrap;
                    /* flex: 1; */
                    gap: 24rpx;

                    .u-upload__wrap__preview {
                        position: relative;
                        width: calc(25% - 20rpx);
                    }

                }
            }

            .u-upload__wrap__preview {
                margin: 0;
                width: calc(25% - 22rpx)
            }


        }
    }

    .contentDetail {
        background: #FFFFFF;
        border-radius: 20rpx 20rpx 20rpx 20rpx;
        padding: 0 20rpx 24rpx 20rpx;

        .tip {
            font-weight: bold;
            font-size: 28rpx;
            color: #333333;
            text-align: left;
            font-style: normal;
            text-transform: none;
            padding-top: 18rpx;
        }

        .item {
            width: 100%;
            margin-top: 24rpx;
        }

        .title {
            font-weight: 400;
            font-size: 26rpx;
            color: #333333;
            text-align: left;
            font-style: normal;
            text-transform: none;
        }

        .obj {
            margin-top: 24rpx;
            font-weight: 400;
            font-size: 26rpx;
            color: #999999;
            text-align: left;
            font-style: normal;
            text-transform: none;
            display: flex;
        }

        .radioBox {
            display: flex;
        }



    }

    .tip2 {
        margin-top: 24rpx;

        .title {
            font-weight: bold;
            font-size: 28rpx;
            color: #333333;
            text-align: left;
            font-style: normal;
            text-transform: none;
        }

        .textClass {
            margin-top: 24rpx;
            font-weight: 400;
            font-size: 26rpx;
            color: #999;
            text-align: left;
            font-style: normal;
            text-transform: none;
            display: flex;
        }


    }






}
</style>
