<template>
    <div class="page" :class="{ 'page--iphoneX': iphoneX }">
        <div class="black-tit">调整实拣重量退差价</div>
        <ul class="item-list">
            <!-- <li
                class="item"
                v-for="(item, index) of orderItems"
                :key="index"
                :class="{ invalid: item.invalid }"
            >
                <div class="check">
                    <checkbox
                        v-if="!item.invalid"
                        class="checkbox"
                        :value="item.id"
                    />
                </div>
                <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>
            </li> -->
            <li class="item" v-for="(item, index) of orderItems" :key="index">
                <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="skuName"
                                >规格： {{ item.skuName }}</span
                            >
                        </div>
                        <div class="des">
                            支付金额：
                            <span class="price"
                                >￥{{ item.payAmount | minuteToRmb }}</span
                            >
                        </div>
                    </div>
                </div>
                <div class="tools">
                    <div class="l">应拣重量：{{ item.weight || 0 }} g</div>
                    <div class="r">
                        实拣重量：
                        <input
                            class="input"
                            type="number"
                            v-model="item.reality_weight"
                            @blur="weightChange(item)"
                        />
                        g
                    </div>
                </div>
                <div class="tools money-box">
                    <div class="r">
                        应退金额：
                        <input
                            class="input money"
                            type="digit"
                            v-model="item.refund_price"
                        />
                        元
                    </div>
                </div>
            </li>
        </ul>
        <div class="refund-info">
            <div class="head">
                <div class="tit">退款差价总额</div>
                <div class="money">￥{{ refundNum }}</div>
            </div>
            <!-- <div class="des">
                备注：
            </div> -->
        </div>
        <div class="btn-box">
            <span class="btn" @click="submit">确定</span>
        </div>
    </div>
</template>

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

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

    // 数据
    data() {
        return {
            orderId: "",
            orderItems: [],
            submitLoading: false,
        };
    },

    onLoad(opts) {
        console.log(opts);
        let orderItems = this.$store.state.common.disparityData;
        this.orderItems = JSON.parse(JSON.stringify(orderItems));
        for (let item of this.orderItems) {
            item.reality_weight = 0;
        }
        this.orderItems = this.orderItems;
        this.orderId = opts.orderId;
    },
    async onShow() {},
    // 函数
    methods: {
        weightChange(val) {
            let b = val.payAmount / val.weight;
            if (val.reality_weight < val.weight) {
                val.reality_price = b * val.reality_weight;
                val.refund_price = (val.payAmount - val.reality_price) / 100;
                console.log(val.refund_price);
                val.refund_price = val.refund_price.toFixed(2);
            }
            this.orderItems = [...this.orderItems];
        },
        submit() {
            for (let item of this.orderItems) {
                if (!item.refund_price) {
                    return this.fn.showToast(`请输入所有退款金额`);
                }
                if (!item.reality_weight) {
                    return this.fn.showToast(`请输入所有实拣重量`);
                }
                console.log(item.refund_price, item.payAmount);
                let refundAmount = parseInt(Number(item.refund_price) * 100);
                if (refundAmount > item.payAmount) {
                    return this.fn.showToast(`退款金额不能大于支付金额`);
                }
            }
            let data = {
                orderId: this.orderId,
                refundDifferenceList: [],
            };
            for (let item of this.orderItems) {
                data.refundDifferenceList.push({
                    orderItemId: item.id,
                    actualPickingWeight: Number(item.reality_weight),
                    refundAmount: parseInt(Number(item.refund_price) * 100),
                    refundCount: item.count,
                });
            }
            this.fn
                .showModal({
                    content: "确认退款当前差价",
                })
                .then((res) => {
                    if (res.confirm) {
                        this.submitLoading = true;
                        uni.showLoading({
                            title: "提交中...",
                            mask: true,
                        });
                        this.api
                            .post("/order/refundDifference", data, {
                                pass: true,
                            })
                            .then((res) => {
                                uni.hideLoading();
                                this.submitLoading = false;
                                if (res.success) {
                                    this.fn.showToast("提交成功");
                                    this.router.go(2);
                                } else {
                                    this.fn.showToast(
                                        "提交失败：" + res.message
                                    );
                                }
                            });
                    }
                });
        },
    },

    // 数据计算
    computed: {
        user() {
            return this.$store.state.user.user;
        },
        refundNum() {
            let num = 0;
            for (let id of this.orderItems) {
                for (let item of this.orderItems) {
                    if (item.refund_price) {
                        num += Number(item.refund_price);
                    }
                }
            }
            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: 100%;
        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 {
        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);
    }
    .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);
    }
    .tools {
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: px(40);
        padding-top: px(10);
        border-top: 1px dashed #f1f1f1;
        margin-top: px(10);
        .r {
            display: flex;
            justify-content: space-between;
            align-items: center;
            .input {
                border: 1px solid #efefef;
                display: inline-block;
                width: px(150);
                height: px(50);
                padding: px(5);
                margin: 0 px(20) 0 px(10);
            }
        }
    }
    .money-box {
        // .money {
        //     display: inline-block;
        //     width: 100%;
        // }
    }
}
.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);
    }
}
</style>