<template>
    <div class="page">
        <div class="head">
            <section class="item">
                <!-- <my-image class="img" src=""></my-image> -->
                订单号： {{ data.tradeNo }}
            </section>
            <section class="item">
                <!-- <my-image class="img" src=""></my-image> -->
                状态： {{ data.status | statusFilter }}
            </section>
            <section class="item">
                <!-- <my-image class="img" src=""></my-image> -->
                备注：
                {{ data.payRemark || "" }}
            </section>
            <my-image class="line-img" src="/static/icon/line.jpg"></my-image>
        </div>
        <div class="goods">
            <div class="good-head">
                <div>
                    {{ data.payTime }} 销售{{
                        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" :class="{invalid:item.status === 9}">
                    <div class="name">{{ item.productName }}</div>
                    <div class="num">
                        <span class="refund" v-if="item.status === 9">已退货</span>
                        {{ 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>￥{{ data.amount | minuteToRmb2 }}</div>
            </section>
            <section class="item">
                <div>折扣</div>
                <div>
                    -￥{{ (data.amount - data.payAmount) | minuteToRmb2 }}
                </div>
            </section>
            <section class="item color">
                <div>应付</div>
                <div>￥{{ data.payAmount | minuteToRmb2 }}</div>
            </section>
        </div>

        <div class="tool">
            <span v-if="data.status === 2" class="btn" @click="payModal"
                >支付</span
            >
            <span v-if="data.status === 9" class="btn" @click="reverseSettle"
                >反结账</span
            >
            <span
                v-if="data.status === 9"
                class="btn"
                @click="cashierReturnGoods"
                >退货</span
            >
        </div>

        <uni-popup ref="popup" type="dialog">
            <uni-popup-dialog-pay
                mode="input"
                :title="'付款码'"
                :content="false"
                :inputType="'number'"
                :beforeClose="true"
                placeholder="请输入付款码"
                @confirm="popupConfirm"
                @scan="seanCode"
                @close="popupClose"
            ></uni-popup-dialog-pay>
        </uni-popup>
    </div>
</template>

<script>
import MyImage from "../../../components/image/index";
import uniPopup from "../../../components/uni-popup/uni-popup";
import uniPopupDialogPay from "../../../components/uni-popup/uni-popup-dialog-pay";
let statusEnum = {
    2: "待支付",
    3: "待发货",
    4: "待收货",
    6: "已取消",
    7: "售后中",
    8: "已删除",
    9: "已完成",
    10: "已评价",
    11: "已售后",
    12: "已退款",
    20: "待接单",
    21: "拣货中",
    22: "拣货完成",
    23: "待配送",
    24: "配送中",
    25: "已送达",
    26: "待提货",
    27: "已提货",
    31: "订单已推单",
    32: "订单已被骑手接单",
    33: "骑手已到店",
    34: "骑手已取餐",
    35: "订单完成",
    36: "订单失败",
};
export default {
    name: "",
    components: { MyImage, uniPopup, uniPopupDialogPay },
    filters: {
        statusFilter(v) {
            return statusEnum[v] || "";
        },
    },
    // 数据
    data() {
        return {
            pageIndex: 1,
            pageSize: 20,
            data: {},
            btnLoading: false,
        };
    },

    onLoad(opts) {
        this.orderNo = opts.orderNo;
    },
    async onShow() {
        this.getData(this.orderNo);
    },
    // 函数
    methods: {
        getData(orderNo) {
            this.api
                .get("/Order/GetSettleDetail", {
                    orderNo: orderNo,
                })
                .then((res) => {
                    this.data = res.data;
                });
        },

        reverseSettle() {
            if (this.btnLoading) {
                return;
            }
            this.btnLoading = true;
            uni.showLoading({
                title: "提交中...",
                mask: true,
            });
            this.api
                .post(
                    "/order/reverseSettle",
                    {
                        query: true,
                        id: this.data.id,
                    },
                    { pass: true }
                )
                .then((res) => {
                    this.btnLoading = false;
                    uni.hideLoading();
                    if (res.success) {
                        this.fn.showToast("保存成功");
                        this.router.back();
                    } else {
                        this.fn.showModal({
                            content: res.message,
                            showCancel: false,
                        });
                    }
                });
        },
        payModal() {
            this.$refs.popup.open({
                type: "dialog",
            });
        },

        popupConfirm(done, value) {
            let self = this;
            uni.showLoading({
                title: "支付中...",
                mask: true,
            });
            self.api
                .post(
                    "/order/BarcodePay",
                    {
                        query: true,
                        orderId: self.data.id,
                        barcode: value,
                    },
                    { pass: true }
                )
                .then((res) => {
                    uni.hideLoading();
                    if (res.success) {
                        self.fn.showToast("支付成功");
                        self.getData();
                        done();
                    } else {
                        self.fn.showToast("支付失败");
                        self.payErr = true;
                    }
                });
        },
        seanCode(done) {
            let self = this;
            uni.scanCode({
                scanType: "barCode",
                success(res) {
                    console.log("扫码", res);
                    if (res.scanType === "CODE_128") {
                        uni.showLoading({
                            title: "支付中...",
                            mask: true,
                        });
                        self.api
                            .post(
                                "/order/BarcodePay",
                                {
                                    query: true,
                                    orderId: self.data.id,
                                    barcode: res.result,
                                },
                                { pass: true }
                            )
                            .then((res) => {
                                uni.hideLoading();
                                if (res.success) {
                                    self.fn.showToast("支付成功");
                                    done();
                                    self.getData();
                                } else {
                                    self.fn.showToast("支付失败");
                                }
                            });
                    } else {
                        self.fn.showToast("扫码失败");
                    }
                },
                fail(res) {
                    self.fn.showToast("扫码失败");
                },
            });
        },

        popupClose(done) {
            this.fn.showToast("支付失败");
            this.payErr = true;
            done();
        },

        cashierReturnGoods() {
            this.$store.commit("common/update", {
                cashierRefundData: this.data,
            });
            this.router.push("/pages/manage/cashier/refund");
        },
    },

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

    // 数据监听
    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;
    }
}
.invalid {
    background-color: #f9f9f9;
    color: #666 !important;
    .refund {
        display: inline-block;
        font-size: px(40);
        margin-right: px(20);
    }
}
</style>