<template>
	<div class="order-detail-whole">
		<back-header path="/v2/order-list" style="margin-bottom:0.15rem">
			订单详情
		</back-header>
		<div class="goods-box">
			<div class="item-top">
				<div class="item-top-left">
					<img src="../assets/images/order-list/address.png">
					<div class="item-top-address">{{info.merchantName}}</div>
				</div>
				<div class="item-top-state" :class="'state'+state">{{stateText}}</div>
			</div>
			<div class="item-main">
				<img :src="imghost+info.goodsImgUrl">
				<div class="item-main-text">
					<div class="name">{{info.goodsName}}</div>
					<div class="tips-box">
						<div class="tips">
							{{info.shortDesc}}
						</div>
						<div class="price">¥{{info.totalPrice?info.totalPrice/100:''}}</div>
					</div>
					<div class="tag-box">
						<i class="tag" v-for="item in labelList" v-if="item.labelText">{{item.labelText}}</i>
						<!-- <i class="tag">新人优惠</i> -->
					</div>
				</div>
			</div>
			<div class="gift-box" v-if="info.gifts&&info.gifts.length>0">
				<div class="gift-item" v-for="item in info.gifts">
					<div class="text">【赠品】</div>
					<div class="name">{{item.name}}</div>
					<div class="num">&nbsp;x{{item.num}}</div>
				</div>
			</div>
		</div>
		<div class="message">
			<div class="message-title">留言备注：</div>
			<div class="box" role="text">
				{{info.remark}}
			</div>
		</div>
		<div class="time-box">
			<div class="time-item">下单时间：
				<div class="time">{{info.create}}</div>
			</div>
			<div class="time-item" v-show="info.payTime">付款时间：
				<div class="time">{{info.payTime}}</div>
			</div>
		</div>
		<div class="money-box">
			<div class="money-box-top">
				<div class="order">
					<div class="text">订单金额：</div>
					<div class="num">¥{{info.totalPrice?info.totalPrice/100:""}}</div>
				</div>
				<div class="discount">
					<div class="text">
						<div class="string">
							优惠减免：
						</div>
						<span class="discount-name" v-if="info.primeCoupon">{{info.primeCoupon.couponName}}</span>
					</div>
					<div class="num">¥{{info.couponPrice?info.couponPrice/100:''}}</div>
				</div>
			</div>
			<div class="money-box-bottom" :class="{right:state!==0&&state!==10}">
				<div class="button-box" role="button" v-if="state===0" @click="cancel()">
					取消订单
				</div>
				<div class="button-box" role="button" v-if="state===10" @click="go(3)">
					申请退款
				</div>
				<div class="money">
					实际支付：
					<div class="money-count">¥{{info.payPrice/100}}</div>
				</div>
			</div>
		</div>
		<div class="fill"></div>
		<div class="button" role="button" v-if="state==30||state==21" @click="go(1)">
			重新下单
		</div>
		<div class="button" role="button" style="background:#00BA86;color:white;" v-if="state===0" @click="pay()">
			立即付款
		</div>
		<div class="button" role="button" style="background:#00BA86;color:white;" v-if="state==10||state==11" @click="go(2)">
			预约服务
		</div>
		<div class="button" role="button" v-if="state==20">
			<a href="tel:400-6080100">联系客服</a>
			<!-- 联系客服 -->
		</div>
	</div>
</template>
<script>
import backHeader from "../components/back-header.vue";
import orderApi from "../models/order-model.js";
var qs = require("qs");
export default {
    data() {
        return {
            state: "",
            stateText: "",
            orderNo: "",
            info: {},
            authUrl: ""
        };
    },
    watch: {
        state(val) {
            switch (val) {
                case 0:
                    this.stateText = "待支付";
                    break;
                case 10:
                case 11:
                    this.stateText = "已支付";
                    break;
                case 20:
                    this.stateText = "退款中";
                    break;
                case 21:
                    this.stateText = "已退款";
                    break;
                case 30:
                    this.stateText = "已取消";
                    break;
            }
        }
    },
    components: {
        "back-header": backHeader
    },
    computed: {
        labelList() {
            let str = this.info.smallLabel;
            return str ? JSON.parse(str) : "";
        }
    },
    methods: {
        getData() {
            this.$vux.loading.show({
                text: "Loading"
            });
            orderApi
                .getDetail({
                    orderNo: this.orderNo
                })
                .then(res => {
					this.$vux.loading.hide();
                    if (res.code === 0 && res.response.data) {
                        this.authUrl = res.response.authUrl || "";
                        let info = res.response.data;
                        this.wechat(info.merchantNo);
                        info.create = info.createdAt
                            ? this.getTime(info.createdAt)
                            : "";
                        info.payTime = info.payTime
                            ? this.getTime(info.payTime)
                            : "";
                        this.info = JSON.parse(JSON.stringify(info));
                        this.state = res.response.data.status;
                    } else if (res.code == 666) {
                        this.$vux.toast.text("您还没登录，请先登录!", "middle");
                        setTimeout(function() {
                            window.location.href = "/mall/web/user/login";
                        }, 2000);
                    } else {
                        if (
                            res.msg == "" ||
                            res.msg == undefined ||
                            res.msg == null
                        ) {
                            res.msg = "操作失败，请刷新重试";
                        }
                        this.$vux.toast.text(res.msg, "middle");
                    }
                    this.$vux.loading.hide();
                });
        },
        getTime(time) {
            let date = new Date(time);
            let year = date.getFullYear();
            let month = this.checkTime(date.getMonth() + 1);
            let day = this.checkTime(date.getDate());
            let h = this.checkTime(date.getHours());
            let m = this.checkTime(date.getMinutes());
            let s = this.checkTime(date.getSeconds());
            let str =
                year + "-" + month + "-" + day + " " + h + ":" + m + ":" + s;
            return str;
        },
        checkTime(i) {
            if (i < 10) {
                i = "0" + i;
            }
            return i;
        },
        cancel() {
            orderApi
                .cancel(
                    qs.stringify({
                        orderNo: this.orderNo
                    })
                )
                .then(res => {
                    if (res.code == 0) {
                        this.$vux.toast.text("已取消订单", "middle");
                        this.state = 30;
                    } else {
                        this.$vux.toast.text(res.msg, "middle");
                    }
                });
        },
        go(num) {
            if (num == 1) {
                location.href = "/mall/web/vgoods/detail/" + this.info.goodsNo;
            } else if (num == 2) {
                location.href = "/mall/web/appoint_index";
            } else if (num == 3) {
                location.href =
                    "/mall/web/order_refund?" +
                    this.info.goodsNo +
                    "&" +
                    this.info.orderNo;
            }
        },
        wechat(merchantNo) {
            this.wxShare({
                merchantNo: merchantNo,
                source: 0,
                url: encodeURIComponent(location.href),
                shareUrl: encodeURIComponent(
                    "http://" + location.host + "/v2/home"
                )
            });
        },
        pay() {
            this.$vux.loading.show({
                text: "正在调起支付"
            });
            if (this.isWeixin() && this.info.payPrice > 0) {
                //微信内打开，直接调起微信公众号支付
                this.$vux.loading.hide();
                location.href = this.authUrl.replace(
                    "state=2",
                    "state=2" + "," + this.info.orderNo
                );
            } else {
                let paymentType = this.info.payPrice > 0 ? 7 : 10;
                orderApi
                    .payMoney(
                        qs.stringify({
                            orderNo: this.info.orderNo,
                            paymentType: paymentType
                        })
                    )
                    .then(data => {
                        this.$vux.loading.hide();
                        if (data.code === 0) {
                            if (paymentType === 7) {
                                var transMessageOutput = data.response;
                                var transInfo =
                                    transMessageOutput.weixinTransParameters;
                                if (
                                    transInfo.prepayid !== "" &&
                                    transInfo.prepayid !== undefined &&
                                    transInfo.prepayid != null
                                ) {
                                    window.location.href = transInfo.mwebUrl;
                                }
                            } else {
                                setTimeout(function() {
                                    window.location.href = "/v2/order-list";
                                }, 2000);
                            }
                        } else if (data.code === 666) {
                            this.$vux.toast.text(
                                "您还没登录，请先登录!",
                                "middle"
                            );
                            setTimeout(function() {
                                window.location.href = "/mall/web/user/login";
                            }, 2000);
                        } else {
                            if (
                                data.msg === "" ||
                                data.msg === undefined ||
                                data.msg == null
                            ) {
                                data.msg = "操作失败，请刷新重试";
                            }
                            this.$vux.toast.text(data.msg, "middle");
                            setTimeout(function() {
                                window.location.href = "/v2/order-list";
                            }, 2000);
                        }
                    });
            }
        },
        addOrder() {
            let goodsNo = this.info.goodsNo;
            let couponNo = this.info.primeCoupon
                ? this.info.primeCoupon.couponNo
                : "";
            let orderData = localStorage.getItem("orderData") || "";
            let data = orderData ? JSON.parse(orderData) : "";
            let promise = new Promise((resolve, reject) => {
                orderApi
                    .addOrder({
                        goodsNo: goodsNo,
                        goodsNo: goodsNo,
                        couponNo: couponNo,
                        goodsVersion: this.info.goodsVersion
                    })
                    .then(res => {
                        if (res.code == 0) {
                            resolve(res.response);
                        } else if (res.code === 666) {
                            this.$vux.toast.text(
                                "您还没登录，请先登录!",
                                "middle"
                            );
                            setTimeout(function() {
                                window.location.href = "/mall/web/user/login";
                            }, 2000);
                        } else if (res.code === 200) {
                            this.$vux.toast.text(res.msg, "middle");
                            setTimeout(function() {
                                window.location.href = "/mall/web/order_index";
                            }, 2000);
                        } else {
                            if (
                                res.msg === "" ||
                                res.msg === undefined ||
                                res.msg == null
                            ) {
                                res.msg = "操作失败，请刷新重试";
                            }
                            this.$vux.toast.text(res.msg, "middle");
                        }
                    });
            });
            return promise;
        }
    },
    mounted() {
        this.orderNo = this.$route.params.id;
        this.getData();
    }
};
</script>
<style lang="scss" scoped>
.order-detail-whole {
    // min-height: 100vh;
}
.goods-box {
    background-color: white;
    width: 100%;
    color: #333;
    margin-bottom: 0.2rem;
    // height: 2.25rem;
    width: 100%;
    .item-top {
        height: 0.65rem;
        border-bottom: 0.01rem solid #e5e5e5;
        box-sizing: border-box;
        font-size: 0.3rem;
        display: flex;
        justify-content: space-between;
        width: 100%;
        padding: 0 0.36rem 0 0.3rem;
        line-height: 1;
        align-items: center;
        img {
            width: 0.34rem;
            height: 0.28rem;
            margin-right: 0.2rem;
        }
        .item-top-left {
            display: flex;
            align-items: center;
        }
        .item-top-address {
        }
        .item-top-state {
            color: #999;
            font-size: 0.28rem;
        }
        .state0 {
            color: #fcac21;
        }
        .state10 {
            color: #00ba86;
        }
        .state11 {
            color: #00ba86;
        }
        .state20 {
            color: #fc4f21;
        }
    }
    .item-main {
        display: flex;
        height: 1.6rem;
        width: 100%;
        padding-top: 0.16rem;
        box-sizing: border-box;
        padding-right: 0.38rem;
        padding-left: 0.22rem;
        img {
            width: 1.28rem;
            height: 1.28rem;
            margin-right: 0.16rem;
        }
        .item-main-text {
            flex-grow: 1;
            display: flex;
            flex-direction: column;
            padding-top: 0.03rem;
            .name {
                font-size: 0.3rem;
                overflow: hidden;
                line-height: 1.1;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 1;
                word-wrap: break-word;
                white-space: normal;
                word-break: break-all;
                margin-bottom: 0.05rem;
            }
            .tips-box {
                display: flex;
                margin-bottom: 0.14rem;
                align-items: flex-end;
                justify-content: space-between;
                .tips {
                    flex-shrink: 1;
                    font-size: 0.24rem;
                    color: #999;
                    overflow: hidden;
                    line-height: 1.3;
                    display: -webkit-box;
                    -webkit-box-orient: vertical;
                    -webkit-line-clamp: 1;
                    word-wrap: break-word;
                    white-space: normal;
                    word-break: break-all;
                }
                .price {
                    flex-shrink: 0;
                    font-size: 0.38rem;
                    color: #333;
                    line-height: 1;
                }
            }
            .tag-box {
                font-size: 0.2rem;
                display: flex;
                height: 0.3rem;
                overflow: hidden;
                margin-bottom: 0.12rem;
                .tag {
                    flex-shrink: 1;
                    height: 100%;
                    font-style: normal;
                    background: #ffe2c7;
                    padding: 0rem 0.1rem;
                    line-height: 0.28rem;
                    color: #ff8a1d;
                    border-radius: 0.15rem;
                    // margin-bottom: 0.1rem;
                    flex-shrink: 1;
                    overflow: hidden;
                    display: -webkit-box;
                    margin-right: 0.1rem;
                    -webkit-box-orient: vertical;
                    -webkit-line-clamp: 1;
                    line-height: 0.3rem;
                    word-wrap: break-word;
                    white-space: normal;
                    word-break: break-all;
                }
            }
        }
    }
    .gift-box {
        width: 100%;
        box-sizing: border-box;
        padding: 0.2rem;
        border-top: 0.01rem solid #f9f9f9;
        .gift-item {
            display: flex;
            margin-bottom: 0.18rem;
            font-size: 0.24rem;
            align-items: center;
            color: #666;
            line-height: 1.1;
            .text {
                flex-shrink: 0;
            }
            .name {
                flex-shrink: 1;
                overflow: hidden;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 1;
                word-wrap: break-word;
                white-space: normal;
                word-break: break-all;
            }
            .num {
                flex-shrink: 1;
            }
        }
    }
}
.message {
    width: 100%;
    height: 2.5rem;
    background-color: white;
    box-sizing: border-box;
    padding: 0.3rem 0.2rem;
    margin-bottom: 0.2rem;
    .message-title {
        font-size: 0.28rem;
        color: #999;
        line-height: 1;
        margin-bottom: 0.12rem;
    }
    .box {
        word-break: break-all;
        width: 100%;
        height: 1.47rem;
        font-size: 0.28rem;
        font-family: PingFangSC-Regular;
        color: rgba(51, 51, 51, 1);
        background: rgba(247, 247, 247, 1);
        padding: 0.13rem 0.1rem;
        box-sizing: border-box;
        line-height: 0.36rem;
        overflow-y: scroll;
    }
}
.time-box {
    width: 100%;
    padding: 0.4rem 0.2rem 0rem 0.2rem;
    background-color: #fff;
    box-sizing: border-box;
    margin-bottom: 0.2rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    .time-item {
        display: flex;
        font-size: 0.28rem;
        margin-bottom: 0.3rem;
        align-items: center;
        line-height: 1;
        color: #666;
        .time {
            font-size: 0.3rem;
            color: #333;
        }
    }
}
.money-box {
    width: 100%;
    box-sizing: border-box;
    padding: 0.33rem 0.22rem;
    background-color: white;
    margin-bottom: 0.43rem;
    .money-box-top {
        border-bottom: 0.01rem solid #dcdcdc;
        margin-bottom: 0.23rem;
        width: 100%;
        .order {
            display: flex;
            align-items: center;
            line-height: 1;
            justify-content: space-between;
            margin-bottom: 0.3rem;
            .text {
                font-size: 0.28rem;
                color: #666;
            }
            .num {
                color: #333;
                font-size: 0.32rem;
            }
        }
        .discount {
            display: flex;
            align-items: center;
            line-height: 1;
            justify-content: space-between;
            margin-bottom: 0.2rem;
            .text {
                flex-shrink: 1;
                display: flex;
                font-size: 0.28rem;
                color: #666;
                .string {
                    flex-shrink: 0;
                }
                .discount-name {
                    flex-shrink: 1;
                    color: #333;
                    overflow: hidden;
                    display: -webkit-box;
                    -webkit-box-orient: vertical;
                    -webkit-line-clamp: 1;
                    word-wrap: break-word;
                    white-space: normal;
                    word-break: break-all;
                    font-size: 0.26rem;
                }
            }
            .num {
                color: #333;
                font-size: 0.32rem;
                flex-shrink: 0;
            }
        }
    }
    .money-box-bottom {
        display: flex;
        width: 100%;
        line-height: 1;
        justify-content: space-between;
        .button-box {
            width: 1.4rem;
            height: 0.44rem;
            color: #666;
            font-size: 0.26rem;
            line-height: 1;
            display: flex;
            justify-content: center;
            align-items: center;
            border: 0.01rem solid rgba(220, 220, 220, 1);
            border-radius: 4px;
        }
        .button {
        }
        .money {
            display: flex;
            color: #666;
            font-size: 0.26rem;
            align-items: center;
            .money-count {
                color: #333;
                font-size: 0.32rem;
            }
        }
    }
    .right {
        justify-content: flex-end;
    }
}
.fill {
    width: 100%;
    height: 1rem;
    background-color: rgba(247, 247, 247, 0);
}
.button {
    width: 100%;
    position: fixed;
    height: 1rem;
    bottom: 0;
    background-color: #fff;
    text-align: center;
    line-height: 1rem;
    color: #00ba85;
    font-size: 0.36rem;
    a {
        color: #00ba85;
    }
}
.green {
    background: #00ba86;
    color: #fff;
}
</style>
