<template>
    <div class="page" :class="{ 'page--iphoneX': iphoneX }">
        <!-- <div class="tips">温馨提示：请优先联系用户协商处理</div> -->
        <div class="black-tit">请选择退货商品</div>
        <div v-if="data">
            <checkbox-group class="item-list" @change="itemChange">
                <label
                    class="item"
                    v-for="(item, index) of data.orderItems"
                    :key="index"
                    :class="{ invalid: item.status === 9 }"
                >
                    <div class="check">
                        <checkbox
                            v-if="item.status !== 9"
                            class="checkbox"
                            :value="item.id"
                        />
                    </div>
                    <div class="main">
                        <div class="info">
                            <my-image
                                :src="item.productImage"
                                class="img"
                            ></my-image>
                            <div class="data">
                                <div class="tit">
                                    {{ item.productName }}
                                </div>
                                <div>
                                    <span class="num"
                                        >数量：x {{ item.count }}</span
                                    >
                                    <span class="num" v-if="item.skuName"
                                        >规格： {{ item.skuName }}</span
                                    >
                                </div>
                                <div class="des">
                                    支付金额：
                                    <span class="price"
                                        >￥{{
                                            item.payAmount | minuteToRmb
                                        }}</span
                                    >
                                </div>
                            </div>
                        </div>
                        <!-- <div
                            class="difference"
                            v-if="item.refundAmount && item.actualPickingWeight"
                        >
                            <div class="name">
                                已退差价：￥{{
                                    item.refundAmount | minuteToRmb
                                }}
                            </div>
                            <div class="">
                                已退重量：{{ item.actualPickingWeight || "0" }}g
                            </div>
                        </div> -->
                    </div>
                </label>
            </checkbox-group>
        </div>
        <div class="refund-info">
            <div class="head">
                <div class="tit">退货金额</div>
                <div class="money">￥{{ refundNum | minuteToRmb }}</div>
            </div>
        </div>
        <!-- <div class="black-tit">请选择退货原因</div>
        <radio-group @change="radioChange" class="info-list">
            <label class="item" v-for="item of radioList" :key="item.key">
                <div class="radio">
                    <radio class="radio-inp" :value="item.value" />
                </div>
                <div class="info">{{ item.key }}</div>
            </label>
        </radio-group> -->
        <div class="btn-box">
            <!-- <span class="btn all-btn" @click="cancelOrder">取消订单</span> -->
            <!-- <span class="btn all-btn" @click="disparity">退差价</span> -->
            <span class="btn" style="width: 100%" @click="submit"
                >确认退货</span
            >
        </div>
    </div>
</template>

<script>
import MyImage from "../../../components/image/index";

export default {
    name: "",
    components: { MyImage },

    // 数据
    data() {
        return {
            data: {},
            radioList: [
                { key: "商品已售完", value: "商品已售完" },
                { key: "店铺太忙", value: "店铺太忙" },
                { key: "其他", value: "其他" },
            ],
            curReason: "",
            curGoodItemIds: [],
            submitLoading: false,
        };
    },

    onLoad() {
        let data = this.$store.state.common.cashierRefundData;
        this.data = data;
        this.$store.commit("common/update", {
            cashierRefundData: null,
        });
        console.log(data);
        if (!data) {
            this.router.back();
        }
    },
    async onShow() {},
    // 函数
    methods: {
        // 初始化订单数据
        initData(data) {
            return data.orderItems;
        },

        radioChange(e) {
            this.curReason = e.detail.value;
        },
        itemChange(e) {
            this.curGoodItemIds = e.detail.value;
        },

        submit() {
            if (this.submitLoading) {
                return;
            }
            if (this.curGoodItemIds.length === 0) {
                return this.fn.showToast("请选择退货项");
            }

            //this.curGoodItemIds
            let sendData = {
                orderItems: [],
                orderId: this.data.id,
                amount: Number(this.refundNum),
            };
            for (let id of this.curGoodItemIds) {
                for (let item of this.data.orderItems) {
                    if (item.id === id) {
                        sendData.orderItems.push({
                            id: item.id,
                            productId: item.productId,
                            skuId: item.skuId,
                            count: item.count,
                        });
                    }
                }
            }
            this.fn
                .showModal({
                    content: "确认退货选中订单项",
                })
                .then((res) => {
                    if (res.confirm) {
                        this.submitLoading = true;
                        uni.showLoading({
                            title: "提交中...",
                            mask: true,
                        });
                        this.api
                            .post("/order/cashierReturnGoods", sendData, {
                                pass: true,
                            })
                            .then((res) => {
                                uni.hideLoading();
                                this.submitLoading = false;
                                if (res.success) {
                                    this.fn.showToast("提交成功");
                                    this.router.back();
                                } else {
                                    this.fn.showToast(
                                        "提交失败：" + res.message
                                    );
                                }
                            });
                    }
                });
        },
    },

    // 数据计算
    computed: {
        user() {
            return this.$store.state.user.user;
        },
        refundNum() {
            let num = 0;
            for (let id of this.curGoodItemIds) {
                for (let item of this.data.orderItems) {
                    if (item.id === id) {
                        num += item.payAmount;
                        if (item.refundAmount) {
                            num -= item.refundAmount;
                        }
                    }
                }
            }
            num = num.toFixed(2);
            return num;
        },
    },

    // 数据监听
    watch: {},
};
</script>

<style lang="scss" scoped>
.page {
    padding-bottom: px(180);
}
.tips {
    background-color: #fef9f3;
    font-size: px(40);
    padding: 0 px(40);
    height: px(100);
    line-height: px(100);
    color: #ec883d;
}
.black-tit {
    padding: px(50) px(40) px(30);
    background-color: #f1f0f5;
    font-size: px(42);
}
.btn-box {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 100;
    background-color: #fff;
    padding: px(40);
    display: flex;
    justify-content: space-between;
    align-items: center;
    .btn {
        display: block;
        width: 47%;
        height: px(110);
        border-radius: px(10);
        color: #fff;
        text-align: center;
        line-height: px(110);
        background-color: rgb(0, 188, 38);
    }
    .all-btn {
        background-color: #f3f3f3;
        color: #666;
    }
}
.item-list {
    padding: px(20) px(40);
    .item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: px(40) 0;
        border-bottom: 1px solid #f1f1f1;
        &.invalid {
            background-color: #efefef;
        }
    }
    .check {
        width: px(100);
        flex-shrink: 0;
        margin-right: px(20);
    }
    .checkbox {
        transform: scale(0.8);
    }

    .main {
        width: 100%;
    }
    .info {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: stretch;
    }
    .img {
        width: px(180);
        height: px(180);
        flex-shrink: 0;
        margin-right: px(20);
        /deep/ img {
            width: px(180);
            height: px(180);
            background: #f1f1f1;
        }
    }
    .data {
        width: 100%;
    }
    .tit {
        font-size: px(44);
        @include omits(1);
    }
    .des {
        margin-top: px(10);
        font-size: px(40);
    }
    .price {
        font-size: px(40);
        color: #ff475f;
    }
    .num {
        font-size: px(36);
        color: #666;
        display: inline-block;
        width: px(300);
    }
}
.refund-info {
    padding: px(50) px(40) px(30);
    .head {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .tit {
        font-size: px(44);
        font-weight: 700;
        color: #666;
    }
    .money {
        font-size: px(48);
        color: #ff475f;
        font-weight: 700;
    }
}
.info-list {
    background-color: #fff;
    .item {
        padding: px(30) px(40);
        border-bottom: 1px solid #f1f1f1;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .radio {
        width: px(100);
        flex-shrink: 0;
        .radio-inp {
            transform: scale(0.8);
        }
    }
    .info {
        width: 100%;
        font-size: px(44);
    }
}
.difference {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #e9e9e9;
    color: #666;
    padding: px(20) px(10);
    font-size: px(38);
    .link {
        text-decoration: underline;
    }
}
</style>