<template>
    <div class="confirm_order">
        <div class="confirm_order_top">
            <img :src="info.status == 'PROCESSING'?require(`@/assets/icon_jiaoyizhong.png`):require(`@/assets/icon_yiwancheng@3x.png`)" alt="" class="confirm_order_top_img">
            <div>{{ getLabelName(info.status, statusOptions) }}</div>
        </div>
        <div class="order_information">
            <img :src="getImg(changeImgs(info.pic))" alt="" class="order_information_img">
            <div class="order_information_title">
                <div class="order_information_title_one">{{info.name}}</div>
                <div class="order_information_title_two">{{info.category || '收藏品'}}</div>
                <div class="order_information_title_number">x1</div>
            </div>
        </div>
        <div class="fee_details">
            <div class="fee_details_con">
                <div>商品费用</div>
                <div class="fee_details_actual_payment">¥{{info.price}}</div>
            </div>
            <van-divider class="fee_details_divider"/>
            <div class="fee_details_con">
                <div>GAS费用</div>
                <div class="fee_details_actual_payment">¥{{info.gasPrice}}</div>
            </div>
            <van-divider class="fee_details_divider"/>
            <div class="fee_details_con">
                <div>实际支付</div>
                <div class="fee_details_price">¥{{ info.couponId ? 0 : info.totalPrice }}</div>
            </div>
            <van-divider class="fee_details_divider"/>
            <div class="fee_details_con">
                <div>支付方式</div>
                <div class="fee_details_actual_payment">{{ getLabelName(info.payMethod, payMethodOptions) }}支付</div>
            </div>
        </div>
        <div class="fee_details">
            <div class="fee_details_con">
                <div class="order_details">订单编号</div>
                <div class="order_details_con">{{ info.id }}</div>
            </div>
            <van-divider class="fee_details_divider"/>
            <div class="fee_details_con">
                <div class="order_details">创建时间</div>
                <div class="order_details_con">{{ info.createdAt }}</div>
            </div>
            <van-divider class="fee_details_divider"/>
            <div class="fee_details_con">
                <div class="order_details">付款时间</div>
                <div class="order_details_con">{{ info.payTime }}</div>
            </div>
            <van-divider class="fee_details_divider"/>
            <div class="fee_details_con">
                <div class="order_details">成交时间</div>
                <div class="order_details_con">{{ info.payTime }}</div>
            </div>
        </div>
    </div>
    <!-- <div class="order">
        <div class="order-content">
            <div class="order-top">
                <div class="text1">{{ getLabelName(info.status, statusOptions) }}</div>
                <div class="text2">交易成功啦！交易后的藏品将在您的藏品室中展示</div>
            </div>
            <driver />
            <div class="product">
                <div class="product-name">{{ info.minter }}</div>
                <div class="product-info">
                    <van-image :radius="6" width="80" height="80" :src="getImg(changeImgs(info.pic))" fit="cover" />
                    <div class="product-content">
                        <div class="text1 van-multi-ellipsis--l2">{{ info.name }}</div>
                        <div class="text2" v-if="info.number">编号:{{ info.number }}</div>
                        <div class="flex1"></div>
                        <div class="price">¥{{ info.price }}</div>
                    </div>
                </div>
            </div>
            <div class="info-item">
                <div class="text1">作品费用</div>
                <div class="text1">¥{{ info.price }}</div>
            </div>
            <div class="info-item">
                <div class="text1">GAS费用</div>
                <div class="text1">¥{{ info.gasPrice }}</div>
            </div>
            <div class="info-item" v-if="info.couponId">
                <div class="text1">藏品兑换券</div>
                <div class="text1 prim">已选择兑换券</div>
            </div>
            <div class="info-item">
                <div class="text1">实际支付</div>
                <div class="text1 prim" style="font-weight: bold">¥{{ info.couponId ? 0 : info.totalPrice }}</div>
            </div>
            <div class="info-item" v-if="info.txHash">
                <div class="text1">链上hash</div>
                <div class="van-ellipsis">{{ getShort(info.txHash) }}</div>
            </div>

            <div class="info-item" v-if="info.gasUsed">
                <div class="text1">消耗gas</div>
                <div class="text1">{{ info.gasUsed }}</div>
            </div>

            <div class="info-item" v-if="!$store.state.review">
                <div class="text1">支付方式</div>
                <div class="text1">{{ getLabelName(info.payMethod, payMethodOptions) }}支付</div>
            </div>

            <div class="tips-item">
                <div class="text1">订单编号</div>
                <div class="text2">
                    <van-button @click="copy" color="#939599" plain size="mini">复制</van-button>
                    <span>{{ info.id }}</span>
                </div>
            </div>
            <div class="tips-item">
                <div class="text1">创建时间</div>
                <div class="text2">
                    {{ info.createdAt }}
                </div>
            </div>
            <div class="tips-item">
                <div class="text1">付款时间</div>
                <div class="text2">
                    {{ info.payTime }}
                </div>
            </div>
        </div>
        <order-open ref="box" :id="info.id" :imgSrc="getImg(changeImgs(collection.pic))"></order-open>
    </div> -->
</template>

<script>
// import OrderOpen from '../../components/order/OrderOpen.vue';
import order from '../../mixins/order';
import product from '../../mixins/product';
export default {
    // components: { OrderOpen },
    name: 'detail',
    data() {
        return {
            info: {},
            collection: {},
            timer: null
        };
    },
    mixins: [order, product],
    mounted() {
        this.$toast.loading({
            message: '加载中...',
            forbidClick: true
        });
        this.$http.get('/order/get/' + this.$route.query.id).then(res => {
            this.info = res;
            this.$toast.clear();
            if (this.info.type === 'BLIND_BOX' && !this.info.opened) {
                this.openBlindBox();
            }
        });
    },
    methods: {
        copy() {
            this.$copyText(this.info.id).then(
                e => {
                    this.$toast.success('复制成功');
                    console.log(e);
                },
                e => {
                    this.$toast('复制失败');
                    console.log(e);
                }
            );
        },
        openBlindBox() {
            this.$toast.loading({
                message: '加载中'
            });
            if (this.timer) {
                clearInterval(this.timer);
            }
            let getWinItem = () => {
                if (this.info.winCollectionId) {
                    this.$http.get('/collection/get/' + this.info.winCollectionId).then(res => {
                        this.$toast.clear();
                        this.collection = res;
                        this.$refs.box.show = true;
                        clearTimeout(this.timer);
                        this.timer = null;
                    });
                } else {
                    this.$http.get('/order/get/' + this.$route.query.id).then(res => {
                        this.info = res;
                    });
                }
            };
            this.timer = setInterval(getWinItem, 1000);
            this.timeout = setTimeout(() => {
                if (this.timer) {
                    this.$toast.clear();
                    clearInterval(this.timer);
                    this.timer = null;
                }
                this.timeout = null;
            }, 10000);
        }
    },
    beforeRouteLeave() {
        if (this.timer) {
            clearInterval(this.timer);
            this.timer = null;
        }
        if (this.timeout) {
            clearTimeout(this.timeout);
            this.timer = null;
        }
    }
};
</script>
<style lang="less" scoped>
    .confirm_order{
        width: 100%;
        height: 100%;
        position: absolute;
        background: #0F0F27;
        // margin-top: 44px;
        padding: 10px 16px;
        box-sizing: border-box;
        .confirm_order_top{
            width: 100%;
            height: 44px;
            background: #29293F;
            border-radius: 8px;
            padding: 10px;
            box-sizing: border-box;
            font-size: 16px;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #28B6FF;
            display: flex;
            margin-bottom: 10px;
            .confirm_order_top_img{
                width: 24px;
                height: 24px;
                margin-right: 8px;
            }
        }
        .order_information{
            width: 100%;
            background: #29293F;
            border-radius: 8px;
            padding: 10px;
            box-sizing: border-box;
            display: flex;
            margin-bottom: 10px;
            .order_information_img{
                width: 80px;
                height: 80px;
                margin-right: 12px;
            }
            .order_information_title_one{
                width: 215px;
                font-size: 14px;
                font-family: PingFangSC-Medium, PingFang SC;
                font-weight: 500;
                color: #FFFFFF;
                white-space:nowrap;
                overflow:hidden;
                text-overflow:ellipsis;
                margin-bottom: 6px;
            }
            .order_information_title_two{
                width: 56px;
                height: 22px;
                background: rgba(255, 255, 255, 0.1);
                border-radius: 4px;
                font-size: 12px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #28B6FF;
                line-height: 22px;
                text-align: center;
                margin-bottom: 16px;
            }
            .order_information_title_number{
                font-size: 12px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #C8C9CC;
            }
        }
        .fee_details{
            width: 100%;
            background: #29293F;
            border-radius: 8px;
            padding: 12px 10px;
            box-sizing: border-box;
            margin-bottom: 10px;
            .fee_details_con{
                font-size: 14px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #FFFFFF;
                display: flex;
                justify-content: space-between;
                .fee_details_price{
                    font-weight: 500;
                    color: #28B6FF;
                }
                .order_details{
                    font-size: 12px;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #939599;
                }
                .order_details_con{
                    font-size: 12px;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #FFFFFF;
                }
            }
        }
        .fee_details_divider{
                margin: 10px 0;
            }
        .payment_method{
            width: 100%;
            background: #29293F;
            border-radius: 8px;
            padding: 12px 10px;
            box-sizing: border-box;
            .payment_method_con{
                display: flex;
                justify-content: space-between;
                font-size: 14px;
                font-family: PingFangSC-Medium, PingFang SC;
                font-weight: 500;
                color: #FFFFFF;
                .payment_method_con_left{
                    display: flex;
                    .payment_method_title{
                        margin-top: 2px;
                    }
                }
                .payment_method_img{
                    width: 24px;
                    height: 24px;
                    margin-right: 6px;
                }
            }
        }
        .fee_details_actual_payment{
            color: #FFFFFF;
        }
    }
   /deep/  .van-divider::before{
       height: 1px;
        background: #5F646F;
        opacity: 0.2;
   }
</style>
