<template>
    <gui-page>
        <view slot="gBody">
            <view style="position: fixed;top:0;z-index: 99;height: 80rpx;overflow: hidden;width: 100%;">
                <image src="/static/3334.png" style="width: 100%;z-index: 8;margin-top: 0;">
                </image>
                <view
                    style="position: fixed;top:0;z-index: 98;padding: 25rpx 20rpx;font-size: 32rpx;font-weight: bold;">
                    <text class="gui-icons " style="color: #fff;" @click="fanhui">&#xe600; 订单详情</text>
                </view>
            </view>
            <view style="position: relative;">
                <view style="width: 100%;height: 80rpx;background-color: #fff;">
                </view>
                <view v-if="!isLoading" class="container" :style="appThemeStyle" style="padding: 20rpx;">
                    <view style="margin-bottom: 20rpx;display: flex;"
                          v-if="order.pay_status == PayStatusEnum.PENDING.value">
                        <view style="font-size: 40rpx;font-weight: bold;margin-bottom: 10rpx;margin-right: 10rpx;">
                            <text class=" gui-icons"
                                  style="">&#xe64c;
                            </text>
                            待付款，还剩
                        </view>


                        <count-down style="font-size: 40rpx;font-weight: bold;" class="state-text"
                                    :date="order.expirationTime" separator="zh" theme="text"/>
                    </view>
                    <view style="margin-bottom: 20rpx;"
                          v-else-if="order.delivery_status == DeliveryStatusEnum.NOT_DELIVERED.value && order.order_status == 10">
                        <view style="font-size: 40rpx;font-weight: bold;margin-bottom: 10rpx;">
                            <text class=" gui-icons"
                                  style="margin-right: 10rpx;">&#xe64c;
                            </text>
                            待到店使用
                        </view>
                        <view>请在 {{ order.become_time }} (含)前到店消费</view>
                    </view>
                    <view style="margin-bottom: 20rpx;"
                          v-else-if=" order.order_status == 21">
                        <view style="font-size: 40rpx;font-weight: bold;margin-bottom: 10rpx;">
                            <text class=" gui-icons"
                                  style="margin-right: 10rpx;">&#xe64c;
                            </text>
                            订单取消中
                        </view>

                    </view>
                    <view style="margin-bottom: 20rpx;"
                          v-else-if=" order.order_status == 20">
                        <view style="font-size: 40rpx;font-weight: bold;margin-bottom: 10rpx;">
                            <text class=" gui-icons"
                                  style="margin-right: 10rpx;">&#xe64c;
                            </text>
                            订单已取消
                        </view>

                    </view>
                    <view style="padding: 20rpx;background-color: #fff;margin-bottom: 20rpx;border-radius: 20rpx;">
                        <view style="display:flex">
                            <view>
                                <image :src="order.goods[0].goods_image"
                                       style="width: 140rpx;height: 140rpx;margin-right: 10rpx;">
                                </image>
                            </view>
                            <view style="width: 100%;">
                                <view class="gui-flex gui-rows gui-nowrap gui-align-items-center gui-space-between"
                                      style="font-weight: bold;">
                                    <text>{{ order.goods[0].goods_name }}</text>
                                    <text class=" gui-icons" @click="handleTargetGoods(order.goods[0].goods_id)">
                                        &#xe601;
                                    </text>
                                </view>
                                <view style="font-size: 24rpx;line-height: 40rpx;color: #8b8b8b;">
                                    下单时间：{{ order.create_time }}
                                </view>
                                <view style="font-size: 24rpx;color: #8b8b8b;">
                                    数量：{{ order.goods[0].total_num }}
                                </view>
                                <view style="font-size: 24rpx;">
                                    <text style="font-size: 20rpx;">￥</text>
                                    <text style="font-size:32rpx">{{
                                            order.goods[0].is_user_grade ? order.goods[0].grade_goods_price : order.goods[0].goods_price
                                        }}
                                    </text>
                                </view>
                            </view>
                        </view>
                    </view>
                    <view
                        v-if="order.delivery_status == DeliveryStatusEnum.NOT_DELIVERED.value && order.pay_status == PayStatusEnum.SUCCESS.value && order.order_status == 10 || order.order_status == 21"
                        style="padding: 20rpx;background-color: #fff;margin-bottom: 20rpx;border-radius: 20rpx;">
                        <view style="width: 100%;display: flex;justify-content: center;align-items: center;"
                              v-if="order.order_status == 10">
                            <image
                                :src="qrcodeImage"
                                style="width: 250rpx;height: 250rpx;"></image>
                        </view>
                        <view style="display: flex;margin: 20rpx 0;">
                            <view style="width: 530rpx;">
                                <view style="font-size: 32rpx;font-weight: bold;margin-bottom: 5rpx;">
                                    券码信息({{ order.coupon.length }}张可用)
                                </view>
                                <view style="font-size: 22rpx;">{{ order.become_time }} 23:59:59 到期</view>
                            </view>
                            <view style="display: flex;justify-content: center;align-items: center;">
                                <view @click="onCancel(order.order_id)"
                                      v-if="order.order_status != OrderStatusEnum.APPLY_CANCEL.value  && order.pay_status == PayStatusEnum.SUCCESS.value && order.delivery_status == DeliveryStatusEnum.NOT_DELIVERED.value"
                                      style="padding: 8rpx 20rpx;border: 1px solid #8b8b8b;font-size: 24rpx;border-radius: 30rpx;">
                                    申请取消
                                </view>
                                <view v-else class="f-28 col-8">取消申请中</view>
                                <view v-if="order.goods[0].refund"
                                      style="padding: 8rpx 20rpx;border: 1px solid #8b8b8b;font-size: 24rpx;border-radius: 30rpx;">
                                    已申请售后
                                </view>
                                <view @click.stop="handleApplyRefund(order.goods[0].order_goods_id)"
                                      v-else-if="order.isAllowRefund"
                                      style="padding: 8rpx 20rpx;border: 1px solid #8b8b8b;font-size: 24rpx;border-radius: 30rpx;">
                                    申请退款
                                </view>
                            </view>
                        </view>
                        <view style="line-height: 45rpx;">
                            <view class="gui-flex gui-rows gui-nowrap gui-align-items-center gui-space-between"
                                  v-for="(item,index) in order.coupon">
                                <view style="display: flex;">
                                    <view style="width: 80rpx;">券码{{ index + 1 }}</view>
                                    ·
                                    <text style="margin-left: 10rpx;"> {{ item.code }}</text>
                                </view>
                                <text>{{ item.clerk_id == 0 ? '待使用' : '已使用' }}</text>
                            </view>
                        </view>
                    </view>

                    <view style="background-color: #fff;padding: 20rpx;border-radius: 20rpx;margin-bottom: 20rpx;"
                          @click="handleTargetExtract(order.extract_shop.shop_id)" v-if="order.extract_shop">
                        <view class="gui-flex gui-row gui-nowrap gui-align-items-center gui-space-between">
                            <view style="font-size: 30rpx;font-weight: bold;">适用门店</view>
                            <view style="color: #9e9e9e;font-size: 23rpx;">联系商家</view>
                        </view>
                        <view style="margin:20rpx 0;display: flex;font-size: 25rpx;">
                            <view>
                                <image :src="order.extract_shop.logo_url"
                                       style="width: 80rpx;height: 80rpx;border-radius: 50%;margin-right:20rpx;">
                                </image>
                            </view>
                            <view style="line-height: 40rpx;">
                                <view>{{ order.extract_shop.shop_name }}</view>
                                <view style="color: #9e9e9e;">
                                    <text class="gui-icons "
                                          style="margin-right: 10rpx;">&#xe607;
                                    </text>
                                    营业时间 {{ order.extract_shop.shop_hours }}
                                </view>
                            </view>
                        </view>
                        <view>
                            <text class="gui-icons " style="color: #9e9e9e;font-size: 24rpx;">&#xe61c;
                                {{ order.extract_shop.full_address }} &#xe601;
                            </text>
                        </view>
                    </view>

                    <view style="background-color: #fff;padding: 20rpx;border-radius: 20rpx;margin-bottom: 20rpx;">
                        <view class="gui-flex gui-row gui-nowrap gui-align-items-center gui-space-between">
                            <view style="font-size: 30rpx;font-weight: bold;margin-bottom: 20rpx;">订单信息</view>
                        </view>
                        <view style="line-height: 60rpx;">
                            <view style="display: flex;font-size: 26rpx;">
                                <view style="width: 120rpx;">实付金额</view>
                                <text style="color: #8b8b8b;">￥{{ order.pay_price }}</text>
                            </view>
                            <view style="display: flex;font-size: 26rpx;">
                                <view style="width: 120rpx;">手机号</view>
                                <text style="color: #8b8b8b;">{{ order.extract.phone }}</text>
                            </view>
                            <view style="display: flex;font-size: 26rpx;">
                                <view style="width: 120rpx;">订单号</view>
                                <text style="color: #8b8b8b;">{{ order.order_no }}</text>
                                <view @click="handleCopy(order.order_no)"
                                      class="check-btn">
                                    复制
                                </view>
                            </view>
                            <view style="display: flex;font-size: 26rpx;">
                                <view style="width: 120rpx;">下单时间</view>
                                <text style="color: #8b8b8b;">{{ order.create_time }}</text>
                            </view>
                            <view style="display: flex;font-size: 26rpx;">
                                <view style="width: 120rpx;">购买数量</view>
                                <text style="color: #8b8b8b;">{{ order.goods[0].total_num }}</text>
                            </view>
                        </view>
                    </view>

                </view>
            </view>
        </view>
    </gui-page>
</template>

<script>
import CountDown from '@/components/countdown'
import {
    DeliveryStatusEnum,
    DeliveryTypeEnum,
    OrderStatusEnum,
    PayStatusEnum,
    PayTypeEnum,
    ReceiptStatusEnum
} from '@/common/enum/order'
import {
    DeliveryMethodEnum
} from '@/common/enum/order/delivery'
import * as OrderApi from '@/api/order'
import {
    wxPayment
} from '@/core/app'

export default {
    components: {
        CountDown
    },
    data() {
        return {
            // 枚举类
            DeliveryStatusEnum,
            DeliveryTypeEnum,
            OrderStatusEnum,
            PayStatusEnum,
            PayTypeEnum,
            ReceiptStatusEnum,
            DeliveryMethodEnum,
            // 当前订单ID
            orderId: null,
            // 加载中
            isLoading: true,
            // 当前订单详情
            order: {},
            // 当前设置
            setting: {},
            // 核销二维码弹窗
            showQRCodePopup: false,
            // 核销二维码图片url (通过后端获取)
            qrcodeImage: '',
        }
    },

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad({
               orderId
           }) {
        // 当前订单ID
        this.orderId = orderId

    },

    /**
     * 生命周期函数--监听页面显示
     */
    onShow() {
        // 获取当前订单信息
        this.getOrderDetail()
    },

    methods: {
        fanhui() {
            uni.navigateBack()
        },

        // 获取当前订单信息
        getOrderDetail() {
            const app = this
            app.isLoading = true
            OrderApi.detail(app.orderId)
                .then(result => {
                    app.order = result.data.order
                    app.setting = result.data.setting
                    if (app.order.pay_status == 20 && app.order.order_status == 10) {
                        app.onExtractQRCode(app.order.order_id)
                    }
                    app.isLoading = false
                })
        },

        // 复制指定内容
        handleCopy(value) {
            const app = this
            uni.setClipboardData({
                data: value,
                success() {
                    app.$toast('复制成功')
                }
            })
        },

        // 跳转到门店详情页
        handleTargetExtract(shopId) {
            this.$navTo('pages/shop/detail', {
                shopId
            })
        },

        // 跳转到物流跟踪页面
        handleTargetExpress() {
            this.$navTo('pages/order/express/index', {
                orderId: this.orderId
            })
        },

        // 跳转到商品详情页面
        handleTargetGoods(goodsId) {
            this.$navTo('pages/goods/detail', {
                goodsId
            })
        },

        // 跳转到申请售后页面
        handleApplyRefund(orderGoodsId) {
            this.$navTo('pages/refund/apply', {
                orderGoodsId
            })
        },

        // 取消订单
        onCancel(orderId) {
            const app = this
            uni.showModal({
                title: '友情提示',
                content: '确认要取消该订单吗？',
                success(o) {
                    if (o.confirm) {
                        OrderApi.cancel(orderId)
                            .then(result => {
                                // 显示成功信息
                                app.$toast(result.message)
                                setTimeout(() => {
                                    // 刷新当前订单数据
                                    app.getOrderDetail()
                                }, 1500)
                            })
                    }
                }
            });
        },

        // 确认收货
        onReceipt(orderId) {
            const app = this
            uni.showModal({
                title: '友情提示',
                content: '确认收到商品了吗？',
                success(o) {
                    if (o.confirm) {
                        OrderApi.receipt(orderId)
                            .then(result => {
                                // 显示成功信息
                                app.$success(result.message)
                                setTimeout(() => {
                                    // 刷新当前订单数据
                                    app.getOrderDetail()
                                }, 1500)
                            })
                    }
                }
            });
        },

        // 获取核销二维码
        onExtractQRCode(orderId) {
            const app = this
            OrderApi.extractQrcode(orderId)
                .then(result => {
                    app.qrcodeImage = result.data.qrcode
                    app.showQRCodePopup = true
                })
        },

        // 点击去支付
        onPay(orderId) {
            this.$navTo('pages/checkout/cashier/index', {
                orderId
            })
        },

        // 跳转到订单评价页
        handleTargetComment(orderId) {
            this.$navTo('pages/order/comment/index', {
                orderId
            })
        },

    },

}
</script>

<style>
page {
    background: #f4f4f4;
}
</style>
<style lang="scss" scoped>
.state-text {
    color: $main-bg;
}

.container {
    padding-bottom: calc(constant(safe-area-inset-bottom) + 106rpx + 6rpx);
    padding-bottom: calc(env(safe-area-inset-bottom) + 106rpx + 6rpx);
}

// 页面顶部
.header {
    display: flex;
    justify-content: space-between;
    background-color: #e8c269;
    height: 280rpx;
    padding: 56rpx 30rpx 0 30rpx;

    .order-status {
        display: flex;
        align-items: center;
        height: 128rpx;

        .status-icon {
            width: 128rpx;
            height: 128rpx;

            .image {
                display: block;
                width: 100%;
                height: 100%;
            }
        }

        .status-text {
            padding-left: 20rpx;
            color: #fff;
            font-size: 38rpx;
            font-weight: bold;
        }
    }

    .next-action {
        display: flex;
        align-items: center;
        height: 128rpx;

        .action-btn {
            min-width: 152rpx;
            height: 56rpx;
            padding: 0 30rpx;
            background-color: #fff;
            border-radius: 28rpx;
            border-color: rgb(102, 102, 102);
            cursor: pointer;
            user-select: none;
            color: #c7a157;
            display: flex;
            justify-content: center;
            align-items: center;
        }
    }
}

// 通栏卡片
.i-card {
    background: #fff;
    padding: 24rpx 24rpx;
    width: 94%;
    box-shadow: 0 1rpx 5rpx 0px rgba(0, 0, 0, 0.05);
    margin: 0 auto 20rpx auto;
    border-radius: 20rpx;
}

// 自提门店
.delivery-extract {
    margin-top: -50rpx;

    .extract-top {
        margin-bottom: 20rpx;

        .title {
            font-size: 28rpx;
            margin-right: 30rpx;
        }

        .subtitle {
            font-size: 24rpx;
            color: #888;
        }
    }

    .shop-info {
        display: flex;
        align-items: center;
    }

    .icon-location {
        font-size: 34rpx;
    }

    .shop-content {
        flex: 1;
        margin-left: 26rpx;
        font-size: 24rpx;

        .shop-name {
            font-size: 28rpx;
            margin-bottom: 8rpx;
        }

        .shop-describe {
            color: #777;

            .item-text {
                margin-right: 8rpx;
            }
        }
    }
}

// 收货地址
.delivery-address {
    margin-top: -50rpx;

    .link-man {
        line-height: 46rpx;
        color: #333;

        .name {
            margin-right: 10rpx;
        }
    }

    .address {
        margin-top: 12rpx;
        color: #999;
        font-size: 24rpx;

        .detail {
            margin-left: 6rpx;
        }
    }

}

// 物流公司
.express {
    display: flex;
    align-items: center;

    .main {
        flex: 1;
    }

    .info-item {
        display: flex;
        margin-bottom: 20rpx;

        &:last-child {
            margin-bottom: 0;
        }

        .item-lable {
            display: flex;
            align-items: center;
            font-size: 24rpx;
            color: #999;
            margin-right: 30rpx;
        }

        .item-content {
            flex: 1;
            display: flex;
            align-items: center;
            font-size: 26rpx;
            color: #333;

            .act-copy {
                margin-left: 20rpx;
                padding: 2rpx 20rpx;
                font-size: 22rpx;
                color: #666;
                border: 1rpx solid #c1c1c1;
                border-radius: 16rpx;
            }
        }
    }

    // 右侧箭头
    .right-arrow {
        margin-left: 16rpx;
        font-size: 26rpx;
    }

}

// 商品列表
.goods-list {

    // 商品项
    .goods-item {
        margin-bottom: 40rpx;

        &:last-child {
            margin-bottom: 0;
        }

        // 商品信息
        .goods-main {
            display: flex;
        }

        // 商品图片
        .goods-image {
            width: 180rpx;
            height: 180rpx;

            .image {
                display: block;
                width: 100%;
                height: 100%;
                border-radius: 8rpx;
            }
        }

        // 商品内容
        .goods-content {
            flex: 1;
            padding-left: 16rpx;
            padding-top: 16rpx;

            .goods-title {
                font-size: 26rpx;
                max-height: 76rpx;
            }

            .goods-props {
                margin-top: 14rpx;
                height: 40rpx;
                color: #ababab;
                font-size: 24rpx;
                overflow: hidden;

                .goods-props-item {
                    display: inline-block;
                    margin-right: 14rpx;
                    padding: 4rpx 16rpx;
                    border-radius: 12rpx;
                    background-color: #F5F5F5;
                    width: auto;
                }
            }


        }

        // 交易信息
        .goods-trade {
            padding-top: 16rpx;
            width: 150rpx;
            text-align: right;
            color: $uni-text-color-grey;
            font-size: 26rpx;

            .goods-price {
                vertical-align: bottom;
                margin-bottom: 16rpx;

                .unit {
                    margin-right: -2rpx;
                    font-size: 24rpx;
                }
            }
        }

        // 商品售后
        .goods-refund {
            display: flex;
            justify-content: flex-end;

            .stata-text {
                font-size: 24rpx;
                color: #999;
            }

            .action-btn {
                border-radius: 28rpx;
                padding: 8rpx 26rpx;
                font-size: 24rpx;
                color: #383838;
                border: 1rpx solid #a8a8a8;
            }

        }

    }

}

// 订单信息
.order-info {

    .info-item {
        display: flex;
        margin-bottom: 24rpx;

        &:last-child {
            margin-bottom: 0;
        }

        .item-lable {
            display: flex;
            align-items: center;
            font-size: 24rpx;
            color: #999;
            margin-right: 30rpx;
        }

        .item-content {
            flex: 1;
            display: flex;
            align-items: center;
            font-size: 26rpx;
            color: #333;

            .act-copy {
                margin-left: 20rpx;
                padding: 2rpx 20rpx;
                font-size: 22rpx;
                color: #666;
                border: 1rpx solid #c1c1c1;
                border-radius: 16rpx;
            }
        }
    }

}

// 交易信息
.trade-info {

    .info-item {
        display: flex;
        margin-bottom: 24rpx;

        .item-lable {
            font-size: 24rpx;
            color: #999;
            margin-right: 24rpx;
        }

        .item-content {
            flex: 1;
            font-size: 26rpx;
            color: #333;
            text-align: right;
        }
    }

    .divider {
        height: 1rpx;
        background: #f1f1f1;
        margin-bottom: 24rpx;
    }

    .trade-total {
        display: flex;
        justify-content: flex-end;

        .goods-price {
            margin-left: 12rpx;
            vertical-align: bottom;
            color: $main-bg;

            .unit {
                margin-right: -2rpx;
                font-size: 24rpx;
            }
        }
    }

}

// 底部操作栏
.footer-fixed {
    position: fixed;
    bottom: var(--window-bottom);
    left: 0;
    right: 0;
    z-index: 11;
    box-shadow: 0 -4rpx 40rpx 0 rgba(151, 151, 151, 0.24);
    background: #fff;

    // 设置ios刘海屏底部横线安全区域
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);

    .btn-wrapper {
        height: 106rpx;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        padding: 0 30rpx;
    }

    .btn-item {
        min-width: 180rpx;
        border-radius: 30rpx;
        padding: 12rpx 26rpx;
        font-size: 28rpx;
        color: #383838;
        text-align: center;
        border: 1rpx solid #a8a8a8;
        margin-left: 24rpx;

        &.active {
            color: #fff;
            border: none;
            background: linear-gradient(to right, $main-bg, $main-bg2);
        }
    }
}

// 弹出层 - 核销二维码
.qrcode-popup {
    padding: 36rpx 30rpx;

    .title {
        font-size: 30rpx;
        margin-bottom: 26rpx;
        font-weight: bold;
        text-align: center;
    }

    .pop-content {
        min-height: 260rpx;
        padding: 0 10rpx;

        .image {
            display: block;
            width: 510rpx;
            height: 510rpx;
        }

    }
}


.check-btn {
    padding: 0 25rpx;
    border-radius: 999rpx;
    background: linear-gradient(to bottom, #90178b, #590b6e);
    color: white;
    font-size: 25rpx;
    margin: 0 10rpx;
}
</style>