<template>
    <view class="waper">
        <u-navbar :autoBack="true" :placeholder="true" bgColor="#FBFBFB">
        	<view slot='center' class="navbar_title">订单详情</view>
        </u-navbar>
        <view class="waper_content" v-if="detail" :style="detail.status == 0 ? ('padding-bottom: ' + waperBottom + 'px;') : ''">
            <view class="status">
                <view>{{detail.statusText}}</view>
                <view v-if="detail.status == 0">
                    <text>剩余支付时间</text>
                    <text>{{secondsToTime(timeNum)}}</text>
                </view>
                <view v-if="detail.status > 0">
                    <text>买家已付款，请等待商家发货</text>
                </view>
            </view>
            <view class="address">
                <view class="icon">
                    <image class="img" src="https://common/address.png" mode=""></image>
                </view>
                <view class="text">
                    <view>{{detail.provinceName + detail.cityName + detail.areaName + ' ' + detail.address}}</view>
                    <view>
                        <text>{{detail.consignee}}</text>
                        <text>{{detail.phone}}</text>
                    </view>
                </view>
            </view>
            <view class="goods">
                <view class="title">{{detail.orderItemList[0].storeName}}</view>
                <view class="list_waper">
                    <view class="list" v-for="(i, index) in detail.orderItemList" :key="index">
                        <view class="img">
                            <image :src="$utils.setImgUrl(i.goodsImage)" mode=""></image>
                        </view>
                        <view class="text">
                            <view class="name">{{i.goodsTitle}}
                                <!-- <text v-if="detail.status > 0">{{i.refundStatus == 2 ? i.refundStatusText : i.dispatchStatusText}}</text> -->
                            </view>
                            <view class="tag">
                                <view>
                                    <text v-if="i.goodsSkuText">{{i.goodsSkuName}}</text>
                                </view>
                                <view>X{{i.goodsNum}}</view>
                            </view>
                            <view class="money">
                                <text>总价：￥{{i.goodsPrice.toFixed(2)}}</text>
								<view class="btns">
									<text v-if="(detail.status == 1 || detail.status == 2) && i.refundStatus < 1" @click="showRefund(i)">退款</text>
									<text v-if="detail.status == 1 && i.dispatchStatus == 1 && i.refundStatus == 0" @click="itemDispatch(i)">确认收货</text>
									<text v-if="(detail.status == 1 || detail.status == 2) && i.refundStatus >= 1" @click="toRefundDetail(i.aftersale.id)">退款详情</text>
                                    <text v-if="(detail.status == 1 || detail.status == 2) && i.refundStatus == -1" @click="toRefundDetail(i.aftersale.id)">拒绝退款</text>
								</view>
                            </view>
                            <view class="money" v-if="i.expressName">
                                <text>快递公司：{{i.expressName}}</text>
                            </view>
                            <view class="money" v-if="i.expressNo">
                                <text>快递单号：{{i.expressNo}}</text>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
            <view class="order">
                <view class="title">订单信息</view>
                <view class="content">
                    <view class="list">
                        <view>商品总价</view>
                        <view>¥{{detail.goodsAmount.toFixed(2)}}</view>
                    </view>
                    <view class="list">
                        <view>运费</view>
                        <view>{{detail.dispatchAmount ? (detail.dispatchAmount).toFixed(2) : '包邮'}}</view>
                    </view>
                    <view class="list">
                        <view>配送方式</view>
                        <view>邮寄</view>
                    </view>
                    <view class="list">
                        <view>订单编号</view>
                        <view>
                            <text>{{detail.orderSn}}</text>
                            <text @click="copyCode(detail.orderSn)">复制</text>
                        </view>
                    </view>
                    <view class="list">
                        <view>创建时间</view>
                        <view>{{detail.createTime}}</view>
                    </view>
                    <view class="list" v-if="detail.paytime">
                        <view>付款时间</view>
                        <view>{{detail.paytime}}</view>
                    </view>
                    <view class="list">
                        <view>备注</view>
                        <view>{{detail.remark || '无'}}</view>
                    </view>
                </view>
            </view>
        </view>
        <view class="bottom" :style="'padding-bottom: ' + safeAreaBottom + 'px'" v-if="detail.status == 0">
            <view class="bottom_waper">
            	<view @click="cancel">取消订单</view>
                <view class="active" @click="payOrder">立即支付</view>
            </view>
        </view>
        <u-popup :show="refund" mode="bottom" bgColor="transparent">
            <view class="refund_waper">
                <view class="title">请选择类型
                    <view class="icon" @click="closeRefund">
                        <u-icon name="close" size="32rpx" color="#333"></u-icon>
                    </view>
                </view>
                <view class="cont">
                    <view :class="{active: refundIndex === 0}" @click="refundIndex = 0;">仅退款</view>
                    <view :class="{active: refundIndex === 1}" @click="refundIndex = 1;">退货退款</view>
                </view>
                <view class="btn" @click="confirmRefund">下一步</view>
            </view>
        </u-popup>
    </view>
</template>

<script>
export default {
    data () {
        return {
            safeAreaBottom: 0,
            waperBottom: 0,
            detail: null,
            refund: false,
            refundIndex: null,
            refundData: null,
            timeNum: 0,
            timer: null
        }
    },
    onLoad (options) {
        this.safeAreaBottom = this.$safeAreaBottom;
        this.waperBottom = this.safeAreaBottom + uni.upx2px(152);
        this.orderdetail(options.id);
    },
    onShow () {
        if (this.detail) this.orderdetail(this.detail.id)
    },
    onUnload () {
        clearInterval(this.timer);
        this.timer = null;
    },
    methods: {
        async itemDispatch (item) {
            let info = await this.$shop.confirmReceipt({ orderId: item.orderId, orderItemIds: [item.id] });
            uni.showToast({ mask: true, title: '操作成功', icon: 'success' });
            this.orderdetail(this.detail.id)
        },
        async orderdetail(id) {
        	let info = await this.$shop.orderdetail(id)
            info.data.dispatchStatus = false;
            info.data.orderItemList.forEach((item, index) => {
                if (item.goodsSkuText) info.data.orderItemList[index].goodsSkuName = info.data.orderItemList[index].goodsSkuText.split(',').join('-');
                if (item.dispatchStatus > 0) info.data.dispatchStatus = true;
            })
            if (info.data.status == 0) {
                let configData = uni.getStorageSync('configData');
                let creaetdTime = parseInt(new Date(info.data.createTime).getTime() / 1000);
                let nowtime = parseInt(new Date().getTime() / 1000);
                if ((creaetdTime + configData.expirationTime * 60) >= nowtime) {
                	this.timeNum = (creaetdTime + configData.expirationTime * 60) - nowtime;
                    this.setIntervalFn()
                }
            }
        	this.detail = info.data;
        },
        secondsToTime(seconds) {
            const minutes = Math.floor((seconds % 3600) / 60);
            const remainingSeconds = seconds % 60;
            return (minutes >= 10 ? minutes : '0' + minutes) + ":" + (remainingSeconds >= 10 ? remainingSeconds : '0' + remainingSeconds);
        },
        setIntervalFn () {
            clearInterval(this.timer);
            this.timer = setInterval(() => {
                if (this.timeNum <= 0) {
                    clearInterval(this.timer)
                    uni.navigateBack()
                }
                this.timeNum --;
            }, 1000)
        },
        copyCode (str) {
            uni.setClipboardData({
                data: str,
                success: () => {
                    uni.showToast({ mask: true, title: '内容已复制到剪切板', icon: 'none' })
                }
            })
        },
        async payOrder () {
            uni.showLoading({ mask: true })
            let info = await this.$shop.getWcscOrderSession({ orderId: this.detail.id });
            if (info.code == 200) {
                let patInfo = JSON.parse(info.msg);
                uni.requestPayment({
                    provider: 'wxpay',
                	timeStamp: patInfo.timeStamp,
                	nonceStr: patInfo.nonceStr,
                	package: patInfo.packageValue,
                	signType: patInfo.signType,
                	paySign: patInfo.paySign,
                	success: (res) => {
                        uni.hideLoading();
                        this.showSuccess = true;
                        this.orderdetail(this.detail.id);
                	},
                	fail: function (err) {
                        uni.hideLoading();
                        uni.showToast({ mask: true, title: '支付取消', icon: 'none' })
                	}
                });
            } else {
                uni.hideLoading();
                uni.showToast({ mask: true, title: info.msg, icon: 'none' });
            }
        },
        async cancel() {
            let info = await this.$shop.cancleOrder({ orderId: this.detail.id, storeId: this.detail.orderItemList[0].storeId })
            uni.showToast({ mask: true, title: '操作成功', icon: 'success' })
            this.orderdetail(this.detail.id);
        },
        showRefund (info) {
            this.refundData = info;
            this.refundIndex = null;
            this.refund = true;
        },
        closeRefund () {
            this.refund = false;
            this.refundIndex = null;
        },
        confirmRefund () {
            if (this.refundIndex === null) {
                uni.showToast({ mask: true, title: '请选择类型', icon: 'null' })
                return false;
            }
            this.refundData.type = this.refundIndex;
            uni.navigateTo({ url: '/pages/shop/refund?info=' + encodeURIComponent(JSON.stringify(this.refundData)) })
            this.refundIndex = null;
            this.refund = false;
        },
        toRefundDetail (id) {
            uni.navigateTo({
                url: '/pages/shop/refundReason?id=' + id
            })
        }
    }
}
</script>

<style lang="scss">

.waper_content{
    width: 100%; box-sizing: border-box; padding: 24rpx;
    .status{
        width: 100%;
        view{
            &:nth-child(1){ font-weight: 500; font-size: 48rpx; color: rgba(0,0,0,0.85); line-height: 56rpx; }
            &:nth-child(2){
                margin-top: 5rpx; display: flex; align-items: center; height: 46rpx;
                text{
                    &:nth-child(1){ color: rgba(0,0,0,0.45); font-size: 28rpx; }
                    &:nth-child(2){ margin-left: 16rpx; font-weight: bold; font-size: 28rpx; color: #FF5833; }
                }
            }
        }
    }
    .address{
        width: 100%; margin-top: 32rpx; height: 140rpx; background: #fff; border-radius: 10rpx; box-sizing: border-box; padding: 0 24rpx 0 100rpx; position: relative;
        .icon{ width: 36rpx; height: 50rpx; position: absolute; left: 34rpx; top: 50%; transform: translateY(-50%); }
        .text{
            width: 100%; display: flex; flex-direction: column; justify-content: center; height: 100%;
            view{
                &:nth-child(1){ height: 43rpx; width: 100%; font-size: 28rpx; color: rgba(0,0,0,0.85); font-weight: 500; line-height: 33rpx; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
                &:nth-child(2){
                    margin-top: 14rpx; height: 36rpx; display: flex; align-items: center; font-size: 24rpx; color: rgba(0,0,0,0.65); line-height: 28rpx;
                    text{
                        margin-right: 36rpx;
                        &:last-child{ margin-right: 0; }
                    }
                }
            }
        }
    }
    .goods{
        width: 100%; margin-top: 20rpx; background: #fff; border-radius: 10rpx; box-sizing: border-box; padding: 32rpx 24rpx 0;
        .title{ line-height: 38rpx; color: #000; font-size: 32rpx; font-weight: 500; }
        .list_waper{
            width: 100%;
            .list{
                width: 100%; box-sizing: border-box; padding: 28rpx 0 28rpx 190rpx; position: relative; margin-top: 20rpx; min-height: 170rpx; border-bottom: 1rpx solid rgba(0,0,0,0.1);
                &:last-child{ border-bottom: none; }
                .img{
                    width: 170rpx; height: 170rpx; position: absolute; left: 0; top: 20rpx;
                    image{ border-radius: 10rpx; }
                }
                .text{
                    width: 100%;
                    .name{
                        color: rgba(0,0,0,0.85); line-height: 33rpx; font-size: 28rpx; font-weight: 500; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; position: relative; box-sizing: border-box;
                        // text{ position: absolute; right: 0; top: 0; line-height: 40rpx; color: #FF5833; }
                    }
                    .tag{
                        width: 100%; margin-top: 20rpx; display: flex; justify-content: space-between; align-items: center; height: 48rpx;
                        view{
                            &:nth-child(1){
                                display: flex; align-items: center;
                                text{ height: 48rpx; line-height: 48rpx; padding: 0 24rpx; box-sizing: border-box; background: #F4F4F4; border-radius: 2rpx; color: rgba(0,0,0,0.65); font-size: 24rpx; }
                            }
                            &:nth-child(2){ color: rgba(0,0,0,0.65); font-size: 24rpx; }
                        }
                    }
                    .money{
                        width: 100%; display: flex; align-items: center; justify-content: flex-end; margin-top: 30rpx;
                        text{ font-size: 28rpx; color: rgba(0,0,0,0.85); line-height: 33rpx; }
                    }
                    .btns{
                        display: flex; align-items: center; justify-content: flex-end; margin-left: 20rpx;
                        text{
                            width: 128rpx; height: 50rpx; border-radius: 50rpx; box-sizing: border-box; border: 2rpx solid #A2A2A4; text-align: center; line-height: 46rpx; color: #A2A2A4; font-size: 24rpx; font-weight: 500; margin-right: 20rpx;
                            &:last-child{ margin-right: 0; }
                        }
                    }
                }
            }
        }
    }
    .order{
        width: 100%; margin-top: 20rpx; background: #fff; border-radius: 10rpx; box-sizing: border-box; padding: 32rpx 24rpx 24rpx;
        .title{ line-height: 38rpx; color: rgba(0,0,0,0.85); font-size: 32rpx; font-weight: 500; }
        .content{
            width: 100%; margin-top: 24rpx;
            .list{
                width: 100%; box-sizing: border-box; padding-left: 130rpx; position: relative; min-height: 40rpx; margin-bottom: 18rpx;
                &:last-child{ margin-bottom: 0; }
                view{
                    &:nth-child(1){ color: rgba(0,0,0,0.65); font-size: 28rpx; position: absolute; left: 0; top: 0; line-height: 33rpx; }
                    &:nth-child(2){
                        color: rgba(0,0,0,0.85); font-size: 28rpx; line-height: 33rpx; display: flex; width: 100%; justify-content: flex-end; align-items: center;
                        text:last-child{
                            margin-left: 48rpx; color: #3F79FF; position: relative;
                            &::after{ content: ""; width: 2rpx; height: 24rpx; background: #A2A2A4; position: absolute; left: -23rpx; top: 50%; transform: translateY(-50%); }
                        }
                    }
                }
            }
        }
    }
}
.bottom{
    width: 100%; box-shadow: 0rpx -1rpx 6rpx 0rpx rgba(0,0,0,0.05); position: fixed; bottom: 0; left: 0; background: #fff;
    .bottom_waper{
        width: 100%; height: 120rpx; box-sizing: border-box; padding: 0 32rpx; display: flex; justify-content: flex-end; align-items: center;
        view{
            width: 228rpx; height: 80rpx; margin-right: 20rpx; box-sizing: border-box; border: 1rpx solid #999999; border-radius: 66rpx; text-align: center; line-height: 80rpx; font-size: 30rpx; color: rgba(0,0,0,0.45);
            &:last-child{ margin-right: 0; }
            &.active{ background: #03AE80; border-color: #03AE80; color: #fff; font-weight: 500; }
        }
    }
}
.refund_waper{
    width: 100%; background: #fff; box-sizing: border-box; padding: 32rpx 32rpx 20rpx; border-radius: 30rpx 30rpx 0 0;
    .title{
        line-height: 42rpx; color: rgba(0,0,0,0.65); font-size: 36rpx; font-weight: 500; text-align: center; position: relative;
        .icon{ position: absolute; right: 0; top: 0; }
    }
    .cont{
        width: 100%; margin-top: 49rpx; display: flex; justify-content: center; align-items: center;
        view{
            width: 302rpx; height: 80rpx; box-sizing: border-box; border: 1rpx solid #999999; border-radius: 10rpx; text-align: center; line-height: 78rpx; color: rgba(0,0,0,0.45); font-size: 30rpx;
            &.active{ background: #03AE80; border-color: #03AE80; color: #fff; }
			&:first-child { margin-right: 20rpx; }
        }
    }
    .btn{ width: 100%; height: 80rpx; background: #03AE80; border-radius: 66rpx; text-align: center; line-height: 80rpx; color: #fff; font-size: 32rpx; font-weight: 500; margin-top: 76rpx; }
}
</style>