<template>
    <div class="order">
        <div class="order-top">
            <div class="text1">{{ getLabelName(info.status, statusOptions) }}</div>
            <div class="text2">
                {{
                    info.status === 'FINISH'
                        ? '交易成功啦！交易后的藏品将在您的柜子中展示'
                        : '支付成功，等待平台确认交易'
                }}
            </div>
        </div>
        <driver />
        <div class="product">
            <div class="product-name">{{ info.minter }}</div>
            <div class="product-info">
                <van-image :radius="6" width="74" height="104" :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">
            <div class="text1">实际支付</div>
            <div class="text1">¥{{ info.totalPrice }}</div>
        </div>
        <div class="info-item" v-if="info.txHash">
            <div class="text1">链上hash</div>
            <div class="van-ellipsis">{{ 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">
            <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="@text3" 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>
</template>

<script>
import order from '../../mixins/order';
import product from '../../mixins/product';
export default {
    name: 'detail',
    data() {
        return {
            info: {}
        };
    },
    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();
        });
    },
    methods: {
        copy() {
            this.$copyText(this.info.id).then(
                e => {
                    this.$toast.success('复制成功');
                    console.log(e);
                },
                e => {
                    this.$toast('复制失败');
                    console.log(e);
                }
            );
        }
    }
};
</script>
<style lang="less" scoped>
.order {
    padding-bottom: 50px;
}
.order-top {
    padding: 26px 16px 20px;
    .text1 {
        font-size: 24px;
        font-weight: bold;
        color: @prim;
        line-height: 34px;
    }
    .text2 {
        font-size: 14px;
        color: #ffffff;
        line-height: 24px;
    }
}
.product {
    padding: 0 16px 20px;
    border-bottom: 1px solid #202122;
    .product-name {
        padding: 15px 0 12px;
    }
    .product-info {
        display: flex;

        .van-image {
            flex-shrink: 0;
        }
        .product-content {
            flex-grow: 1;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            margin-left: 10px;
            .text1 {
                font-size: 16px;
                font-weight: bold;
                color: #ffffff;
                line-height: 22px;
            }

            .text2 {
                font-size: 14px;
                color: @text3;
                line-height: 24px;
                margin-top: 4px;
            }
            .price {
                font-size: 16px;
                font-weight: bold;
                color: #ffffff;
                line-height: 24px;
            }
        }
    }
}
.info-item {
    display: flex;
    justify-content: space-between;
    padding: 0 16px;
    height: 60px;
    align-items: center;
    border-bottom: 1px solid #202122;
    .text1 {
        flex-shrink: 0;
        &:first-child {
            margin-right: 10px;
        }
    }
}
.tips-item {
    display: flex;
    justify-content: space-between;
    height: 40px;
    align-items: center;
    padding: 0 16px;
    .text1 {
        font-size: 13px;
        color: @text3;
        line-height: 24px;
        flex-shrink: 0;
    }
    .text2 {
        font-size: 13px;
        span {
            vertical-align: middle;
        }

        .van-button {
            vertical-align: middle;
            margin-right: 5px;
            height: 20px;
            font-size: 13px;
        }
    }
}
</style>
