<template>
    <div class="page">
        <div class="head">
            <section class="item">
                <!-- <my-image class="img" src=""></my-image> -->
                挂单号： {{ data.suspendNo }}
            </section>
            <my-image class="line-img" src="/static/icon/line.jpg"></my-image>
        </div>
        <div class="goods">
            <div class="good-head">
                <div>
                    {{ data.orderItems ? data.orderItems.length : 0 }}件 商品
                </div>
                <!-- <div>{{ data.tradeNo }}</div> -->
            </div>
            <ul class="good-list">
                <li class="item" v-for="item of data.orderItems" :key="item.id">
                    <div class="name">{{ item.productName }}</div>
                    <div class="num">
                        {{ item.count }}
                    </div>
                </li>
            </ul>
        </div>
        <div class="other-info">
            <section class="item">
                <div>商品数量</div>
                <div>{{ data.orderItems ? data.orderItems.length : 0 }}</div>
            </section>
            <section class="item">
                <div>商品总额</div>
                <div>￥{{ amount  }}</div>
            </section>
        </div>

        <div class="tool" v-if="data.orderItems">
            <span class="btn" @click="remove">删除</span>
            <!-- <span class="btn btn2" @click="">追加</span> -->
            <span class="btn btn1" @click="submit">收银</span>
        </div>
    </div>
</template>

<script>
import MyImage from "../../../components/image/index";
export default {
    name: "",
    components: { MyImage },
    // 数据
    data() {
        return {
            suspendNo: "",
            pageIndex: 1,
            pageSize: 20,
            data: {},
            removeLoading: false,
        };
    },

    onLoad(opts) {
        this.suspendNo = opts.suspendNo;
    },
    async onShow() {
        this.getData();
    },
    // 函数
    methods: {
        getData(orderNo) {
            uni.showLoading({
                title: "加载中...",
                mask: true,
            });
            this.api
                .get("/Order/GetOrderSuspend", {
                    suspendNo: this.suspendNo,
                })
                .then((res) => {
                    uni.hideLoading();
                    this.data = res.data;
                });
        },

        submit() {
            let list = [];
            for (let item of this.data.orderItems) {
                list.push({
                    ...item,
                    select_num: item.count,
                });
            }
            this.$store.commit("common/update", {
                cashierGoodList: list,
            });
            // this.selectList = [];
            this.router.push("/pages/manage/cashier/settlement");
        },

        remove() {
            if (this.removeLoading) {
                return;
            }
            this.fn
                .showModal({
                    content: "是否确认删除?",
                })
                .then((res) => {
                    if (res.confirm) {
                        this.removeLoading = true;
                        uni.showLoading({
                            title: "提交中...",
                            mask: true,
                        });
                        this.api
                            .post(
                                "/Order/RemoveOrderSuspend",
                                {
                                    suspendNo: this.suspendNo,
                                    query: true,
                                },
                                { pass: true }
                            )
                            .then((res) => {
                                this.removeLoading = false;
                                uni.hideLoading();
                                if (res.success) {
                                    this.fn.showToast("删除成功");
                                    this.router.back();
                                } else {
                                    this.fn.showModal({
                                        content: res.message,
                                        showCancel: false,
                                    });
                                }
                            });
                    }
                });
        },
    },

    // 数据计算
    computed: {
        user() {
            return this.$store.state.user.user;
        },

        amount() {
            let num = 0;
            if (this.data.orderItems) {
                for (let item of this.data.orderItems) {
                    num += (item.price / 100) * item.count;
                }
                num = num.toFixed(2);
            }
            return num;
        },
    },

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

<style lang="scss" scoped>
.head {
    background-color: #fff;
    border-bottom: 1px solid #f1f1f1;
    .item {
        min-height: px(110);
        display: flex;
        align-items: center;
        padding: 0 px(35);
        border-bottom: 1px solid #f1f1f1;
        font-size: px(40);
    }
    .img {
        width: px(45);
        height: px(45);
        flex-shrink: 0;
        margin-right: px(30);
        /deep/ img {
            width: px(45);
            height: px(45);
        }
    }
}
.goods {
    margin-top: px(40);
    .good-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: px(90);
        padding: 0 px(35);
        font-size: px(38);
        color: #666;
        border-bottom: 1px solid #efefef;
        background-color: #faf7f2;
    }
    .good-list {
        background-color: #fff;
        .item {
            border-bottom: 1px solid #f1f1f1;
            padding: px(20) px(35);

            min-height: px(160);
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
    }
}
.other-info {
    margin-top: px(40);
    background-color: #fff;
    padding: px(35);
    .item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: px(15) 0;
    }
}
.color {
    color: #0c89c9;
}
.line-img {
    width: 100%;
    height: px(10);
    /deep/ img {
        width: 100%;
        height: px(10);
    }
}
.tool {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: px(130);
    z-index: 10;
    border-top: 1px solid #f1f1f1;
    display: flex;
    padding: px(35);
    align-items: center;
    justify-content: flex-end;
    background-color: #fff;
    .btn {
        width: px(190);
        height: px(88);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: px(40);
        border-radius: px(8);
        border: 1px solid #f1f1f1;
        margin-left: px(30);
    }
    .btn1 {
        background-color: #ff1135;
        border-color: #ff1135;
        color: #fff;
    }
    .btn2 {
        background-color: #a9998a;
        border-color: #a9998a;
        color: #fff;
    }
}
.invalid {
    background-color: #f9f9f9;
    color: #666 !important;
    .refund {
        display: inline-block;
        font-size: px(40);
        margin-right: px(20);
    }
}
</style>