<!-- 申请换货 -->
<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;">{{ title }}</view>
                </view>
            </u-navbar> -->

            <view class="content">
                <view class="productPrice">
                    <view style="display:flex;" v-if="orderInfo">
                        <view>
                            <image style="width: 120rpx;height: 120rpx;"
                                :src="$globalData.publicUrl + productInfo.skuImage" mode="">
                            </image>
                        </view>
                        <view
                            style="margin-left: 24rpx;display: flex;flex-direction: column;justify-content: space-between;">
                            <view class="name">实付价{{ productInfo.paymentType == 1 ? orderInfo.pointsUsed + '积分' :
                                productInfo.paymentType == 2 ? '￥' + orderInfo.payAmount + '元' :
                                    productInfo.paymentType == 3 ? '￥' + orderInfo.payAmount + '元' + '+' +
                                        orderInfo.pointsUsed + '积分' : null }} </view>
                            <view class="spec">已选:{{ skuSpecFun(productInfo.skuSpec) }} </view>

                        </view>
                    </view>
                </view>
                <view class="mustInput">
                    <u--form>
                        <u-form-item required label="申请原因" label-width="120rpx" prop="selectReasonValue">
                            <view class="tip" @click="selectApplyReasonFun('1')">
                                <view :style="{ color: selectReasonValue ? '#333' : '#999' }">{{
                                    selectReasonValue !== null ? selectReasonValue : '请选择申请原因' }}</view>
                                <image style="width: 35rpx;height: 35rpx;margin-left: 8rpx;"
                                    src="@/static/points/Keyboard_arrow_rifht.png" mode=""></image>
                            </view>
                        </u-form-item>

                        <u-form-item required label="问题描述/凭证" label-width="181rpx" prop="selectReasonValue">
                            <view class="tip" @click="selectApplyReasonFun('2')">
                                <view :style="{ color: questionOrDiscribeValue ? '#333' : '#999' }"
                                    class="questionOrDiscribeValue">
                                    {{ questionOrDiscribeValue ? questionOrDiscribeValue : '请您务必上传描述和凭证' }}</view>
                                <image style="width: 35rpx;height: 35rpx;margin-left: 8rpx;"
                                    src="@/static/points/Keyboard_arrow_rifht.png" mode=""></image>
                            </view>
                        </u-form-item>

                    </u--form>
                    <view v-if="fileList.length > 0"
                        style="display: flex;flex-direction: row;flex-wrap: wrap;gap: 24rpx;">
                        <view v-for="(value,index) in fileList"
                              :key="index"
                            style="position: relative;width: calc(25% - 20rpx);margin-top: 20rpx;display: flex;">
                            <image style="width: 144rpx;height: 144rpx;" :src="value.url" mode="">
                            </image>
                        </view>
                    </view>


                </view>
                <view class="returnMath">
                    <text>返回方式</text>
                    <text>自主邮寄</text>
                </view>
            </view>
            <view class="buttonClass">
                <u-button :customStyle="{
                    color: '#fff',
                    background: '#03C1B8'
                }" @click="goSubmit">提交</u-button>

            </view>


        </scroll-view>

    </view>
</template>

<script>
import { afterSaleOrder, getPointOrderInfo } from '@/api/pointOrder'
export default {
    components: {},
    data() {
        return {
            orderNo: null,
            orderId: null,
            orderStatus: null,
            afterSalesType: null,
            receiptStatus: null,
            fileList: [],
            questionOrDiscribeValue: null,
            selectReasonValue: null,
            isTop: 0,
            redemptionRulesShowPopup: false,
            selectProductShowPopup: false,
            orderInfo: null,
            productInfo: null,


        }
    },
    onLoad(data) {
        if (data) {
            console.log(data, '66666666')
            //decodeURIComponent (data)
            if (data.orderId) this.orderId = data.orderId
            if (data.orderNo) this.orderNo = data.orderNo
            this.getOrderInfo();
            if (data.orderStatus) this.orderStatus = data.orderStatus
            if (data.receiptStatus) this.receiptStatus = data.receiptStatus
            if (data.afterSalesType) this.afterSalesType = data.afterSalesType

            if (data.questionOrDiscribeValue && data.questionOrDiscribeValue !== "null" && data.questionOrDiscribeValue !== "") {
                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
            }
        }
    },
    onShow() {

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

    methods: {
        //规则组装
        skuSpecFun(skuSpec) {
            if (!skuSpec) return ''
            return JSON.parse(skuSpec).map(e => e.specValue).join(',')

        },
        async getOrderInfo() {
            const res = await getPointOrderInfo({
                orderNo: this.orderNo,
                //openId: uni.getStorageSync('wx_copenid')
            })
            this.orderInfo = res.data.data.orderInfo
            this.productInfo = res.data.data.productInfo
        },
        //提交
        async goSubmit() {
            if (!this.selectReasonValue || !this.questionOrDiscribeValue || this.fileList.length === 0) {
                uni.$u.toast('请选择申请原因\n或\n请上传描述/凭证')
                return
            }
            afterSaleOrder({ //换货
                orderId: this.orderId,
                orderNo: this.orderNo,
                applyReason: this.selectReasonValue,
                afterSaleType: 2,//1:退货 2:换  3:未收到货
                applyDesc: this.questionOrDiscribeValue,
                applyImages: this.fileList.map(m => m.url).join(','),
            }).then(res => {
                if (res.data.code == 200) {
                    uni.redirectTo({
                        url: '/points/order/orderDetails?orderNo=' + this.orderNo,
                    });
                } else {
                    uni.$u.toast(res.data.msg)
                }

            })


        },

        handleContentScroll(e) {
            this.isTop = e.detail.scrollTop > 0
        },
        //选择申请原因--换货
        selectApplyReasonFun(tab) {
            uni.navigateTo({
                url: `/points/productDetails/applyRefund?afterSalesType=${this.afterSalesType}&receiptStatus=${this.receiptStatus}&tab=${tab}&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>
::v-deep .u-form-item__body__left__content__required {
    position: absolute;
    right: 0;
    left: auto;
    /* 去掉 left 定位 */
}

.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;
    bottom: 0;
    width: 100%;
    padding: 32rpx;
    font-family: PingFang SC, PingFang SC;

    button {
        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;

    .productPrice {
        background-color: #fff;
        padding: 24rpx;
        border-radius: 20rpx 20rpx 20rpx 20rpx;

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

        .spec {
            font-weight: 500;
            font-size: 26rpx;
            color: #999999;
            text-align: left;
            font-style: normal;
            text-transform: none;

        }
    }

    ::v-deep .mustInput {
        background: #FFFFFF;
        border-radius: 16rpx 16rpx 16rpx 16rpx;
        padding: 2rpx 24rpx 26rpx 24rpx;
        margin-top: 24rpx;

        .u-form-item__body__left__content__label {
            display: flex;
            flex-direction: row;
            align-items: center;
            flex: 1;
            font-weight: 400;
            font-size: 26rpx;
            color: #666666;
        }

        .u-form-item__body {
            justify-content: space-between;
            margin-top: 24rpx;
            padding: 0;
        }

        .u-form-item__body__right {
            flex: none;
        }

        .questionOrDiscribeValue {
            width: 400rpx;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            text-align: right;

        }

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

        .tip {
            font-weight: 400;
            font-size: 28rpx;
            color: #999999;
            text-align: left;
            font-style: normal;
            text-transform: none;
            display: flex;
            align-items: center;
        }

        .row {
            display: flex;
            margin-top: 24rpx;
            justify-content: space-between;

        }


    }

    .returnMath {
        margin-top: 24rpx;
        background: #FFFFFF;
        border-radius: 16rpx 16rpx 16rpx 16rpx;
        font-weight: 400;
        font-size: 26rpx;
        color: #666666;
        display: flex;
        justify-content: space-between;
        font-style: normal;
        text-transform: none;
        padding: 26rpx 24rpx;

        text:last-of-type {
            font-size: 28rpx;
            color: #333333;
        }
    }






}
</style>
