<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> -->
            <img :src="require(`@/assets/jiaoyichenggong@3x.png`)" alt="" class="confirm_order_top_img" />
            <div class="confirm_order_top_title">
                <div class="confirm_order_top_title_one">交易成功</div>
                <div class="confirm_order_top_title_two">感谢您的购买</div>
            </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">
                    <img :src="require('@/assets/blockchain@3x.png')" alt="" class="order_information_title_two_img" />
                    <div class="order_information_title_two_title">{{ info.tokenId }}</div>
                </div>
                <!-- <div class="order_information_title_two">{{info.category}}</div> -->
                <div class="order_information_title_number">{{ info.minter }}</div>
            </div>
            <img :src="require('@assets/dibuwenli.png')" alt="" class="bottom_texture" />
        </div>
        <div class="fee_details">
            <div class="fee_details_con">
                <div class="fee_details_actual_payment">订单金额</div>
                <div>{{ info.price }}元</div>
            </div>
            <div class="fee_details_con">
                <div class="fee_details_actual_payment">交易数量</div>
                <div>1</div>
            </div>
            <div class="fee_details_con">
                <div class="fee_details_actual_payment">创建时间</div>
                <div>{{ info.createdAt }}</div>
            </div>
            <div class="fee_details_con">
                <div class="fee_details_actual_payment">付款时间</div>
                <div>{{ info.payTime }}</div>
            </div>
            <div class="fee_details_con">
                <div class="fee_details_actual_payment">订单编号</div>
                <div>{{ info.id }}</div>
            </div>
            <div class="fee_details_con">
                <div class="fee_details_actual_payment">支付方式</div>
                <div>{{ getLabelName(info.payMethod, payMethodOptions) }}支付</div>
            </div>
            <div class="fee_details_con" v-if="info.paySerialNumber">
                <div class="fee_details_actual_payment">支付流水号</div>
                <div>{{ info.paySerialNumber }}</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: #201B15;
    // margin-top: 44px;
    padding: 0px 15px;
    box-sizing: border-box;
    .confirm_order_top {
        width: 100%;
        padding: 36px 0px 39px;
        box-sizing: border-box;
        display: flex;
        justify-content: center;
        .confirm_order_top_img {
            width: 74px;
            height: 60px;
            margin-right: 5px;
        }
        .confirm_order_top_title_one {
            font-size: 19px;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #ffffff;
            line-height: 26px;
            margin-top: 8px;
            margin-bottom: 1px;
        }
        .confirm_order_top_title_two {
            font-size: 14px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #ffffff;
            line-height: 20px;
            opacity: 0.5;
        }
    }
    .order_information {
        width: 100%;
        background: #232731;
        border-radius: 20px;
        display: flex;
        position: relative;
        .bottom_texture {
            width: 140px;
            height: 140px;
            position: absolute;
            right: 0;
            bottom: 0;
        }
        .order_information_img {
            width: 140px;
            height: 140px;
            border-radius: 20px;
            margin-right: 12px;
        }
        .order_information_title {
            width: calc(100% - 180px);
            padding: 28px 0px;
            box-sizing: border-box;
            .order_information_title_one {
                width: 100%;
                font-size: 16px;
                font-family: PingFangSC-Medium, PingFang SC;
                font-weight: 500;
                color: #ffffff;
                line-height: 22px;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                margin-bottom: 9px;
            }
            .order_information_title_two {
                display: flex;
                margin-bottom: 9px;
                .order_information_title_two_img {
                    width: 26px;
                    height: 26px;
                    position: relative;
                    z-index: 1;
                }
                .order_information_title_two_title {
                    height: 18px;
                    padding: 2px 8px;
                    box-sizing: border-box;
                    font-size: 9px;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #725837;
                    line-height: 14px;
                    background: linear-gradient(141deg, #fcdc99 0%, #fce7c8 100%);
                    border-radius: 4px;
                    margin-left: -6px;
                    margin-top: 4px;
                }
            }
        }
        // .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 {
            width: 100%;
            font-size: 12px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #ffffff;
            line-height: 18px;
            opacity: 0.5;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
    }
    .fee_details {
        width: 100%;
        background: linear-gradient(360deg, #232731 0%, #201B15 100%);
        border-radius: 0px 0px 20px 20px;
        padding: 24px 15px;
        box-sizing: border-box;
        .fee_details_con {
            font-size: 14px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #ffffff;
            line-height: 20px;
            display: flex;
            justify-content: space-between;
            margin-bottom: 14px;
            .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_con:last-child {
            margin-bottom: 0;
        }
    }
    .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;
        opacity: 0.3;
    }
}
/deep/ .van-divider::before {
    height: 1px;
    background: #5f646f;
    opacity: 0.2;
}
</style>
