<template>
    <div class="order">
        <div class="order-content">
            <div class="order-top">
                <div class="text1">{{ getLabelName(info.status, statusOptions) }}</div>
                <div class="text2">
                    {{
                        info.status === 'FINISH'
                            ? info.airDrop
                                ? '交易成功啦！交易后的藏品将在您的藏品室中展示'
                                : '交易已完成！'
                            : getLabelName(info.status, statusOptions, 'text')
                    }}
                </div>
            </div>
            <driver />
            <template v-if="!info.airDrop && info.contactName">
                <div class="address" v-if="info.courierId">
                    <img src="../../assets/dingdan_icon_wuliu.png" alt="" />
                    <div class="text1">快递编号</div>
                    <div class="text2" @click="copyWuliu">
                        <span>{{ info.courierId }}</span>
                        <img src="../../assets/icon-miaoshu.png" alt="" />
                    </div>
                </div>
                <div class="address">
                    <img src="../../assets/dingdan_icon_dizhi.png" alt="" />
                    <div class="text1">{{ info.contactName }} {{ info.contactPhone }}</div>
                    <div class="text1">{{ info.address }}</div>
                </div>
                <driver />
            </template>
            <div class="product">
                <div class="product-title">
                    <div class="text1">{{ info.mintActivity }}</div>
                    <div class="text2" v-if="info.consume">商品的铸造将会销毁对应藏品</div>
                </div>
                <div class="product-info" v-for="(item, index) in info.material" :key="index">
                    <van-image :radius="6" width="60" height="60" :src="getImg(changeImgs(item.pic))" fit="cover" />
                    <div class="product-content">
                        <div class="text1 van-multi-ellipsis--l2">{{ item.name }}</div>
                        <div class="flex1"></div>
                        <div class="text2" v-if="item.category">类型:{{ item.category }}</div>
                        <div class="text2" v-if="item.number">编号:{{ item.number }}</div>
                    </div>
                </div>
            </div>

            <div class="info-item">
                <div class="text1">GAS费用</div>
                <div class="text1">¥{{ info.gasPrice }}</div>
            </div>

            <div class="info-item" v-if="!$store.state.review && info.payTime">
                <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" v-if="info.payTime">
                <div class="text1">付款时间</div>
                <div class="text2">
                    {{ info.payTime }}
                </div>
            </div>
        </div>

        <div class="bottom van-safe-area-bottom" ref="bottom" v-if="info.status === 'RECEIVE'">
            <div class="bottom-content">
                <van-button class="sure" type="primary" block @click.prevent="sure" round> 确认收货 </van-button>
            </div>
        </div>
    </div>
</template>

<script>
import orderAct from '../../mixins/orderAct';
import product from '../../mixins/product';
export default {
    name: 'detail',
    data() {
        return {
            info: {},
            collection: {},
            timer: null
        };
    },
    mixins: [orderAct, product],
    mounted() {
        this.getInfo();
    },
    methods: {
        getInfo() {
            this.$toast.loading({
                message: '加载中...',
                forbidClick: true
            });

            this.$http.get('/mintOrder/get/' + this.$route.query.id).then(res => {
                this.info = res;
                this.$toast.clear();
            });
        },
        copy() {
            this.$copyText(this.info.id).then(
                e => {
                    this.$toast.success('复制成功');
                    console.log(e);
                },
                e => {
                    this.$toast('复制失败');
                    console.log(e);
                }
            );
        },
        copyWuliu() {
            this.$copyText(this.info.courierId).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);
        },
        sure() {
            this.$dialog
                .confirm({
                    title: '确定已经收到货了吗？'
                })
                .then(() => {
                    return this.$http.get('/mintOrder/finish/' + this.info.id);
                })
                .then(() => {
                    this.$toast.success('确认成功');

                    this.getInfo();
                });
        }
    },
    beforeRouteLeave() {
        if (this.timer) {
            clearInterval(this.timer);
            this.timer = null;
        }
        if (this.timeout) {
            clearTimeout(this.timeout);
            this.timer = null;
        }
    }
};
</script>
<style lang="less" scoped>
.order {
    padding-bottom: 100px;
    color: @text0;
    background-color: @bg3;
}
.order-content {
    background-color: @bg;
}
.order-top {
    padding: 26px 16px 20px;
    .text1 {
        font-size: 24px;
        font-weight: bold;
        color: @prim;
        line-height: 34px;
    }
    .text2 {
        font-size: 14px;
        color: @text0;
        line-height: 24px;
    }
}
.product {
    padding: 0 16px 20px;
    border-bottom: 1px solid @bg3;
    .product-name {
        padding: 15px 0 12px;
    }
    .product-title {
        padding: 16px 0 12px;
        .text1 {
            font-size: 14px;
            color: #000000;
            line-height: 24px;
        }

        .text2 {
            font-size: 12px;
            color: #ff4f50;
        }
    }
    .product-info {
        display: flex;

        .van-image {
            flex-shrink: 0;
        }
        .product-content {
            flex-grow: 1;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            margin-left: 12px;
            .text1 {
                font-size: @font1;
                font-weight: bold;
                color: @text0;
                line-height: 24px;
            }

            .text2 {
                font-size: @font1;
                color: @text3;
                line-height: 17px;
            }
            .price {
                font-size: @font1;
                font-weight: bold;
                color: @text0;
                line-height: 17px;
            }
        }
    }
}
.info-item {
    display: flex;
    justify-content: space-between;
    padding: 0 16px;
    height: 48px;
    align-items: center;
    border-bottom: 1px solid @bg3;
    font-size: @font2;
    .text1 {
        flex-shrink: 0;
        &:first-child {
            margin-right: 10px;
        }

        &.prim {
            color: @prim;
        }
    }
}
.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;
        }
    }
}

.address {
    position: relative;
    padding: 20px 24px 16px 48px;
    & > img {
        position: absolute;
        left: 18px;
        top: 22px;
        width: 20px;
        display: block;
    }

    .text1 {
        font-size: 14px;
        color: #000000;
        line-height: 24px;
    }

    .text2 {
        font-size: 13px;
        color: #939599;
        line-height: 24px;
        .flex();
        img {
            width: 16px;
            height: 16px;
            margin-left: 6px;
        }
    }
}

.address + .address {
    border-top: 1px solid @tabBorder;
}

.bottom {
    position: fixed;
    bottom: 0px;
    left: 0;
    right: 0;
    background-color: @bg;
    z-index: 20;
    border-top: 1px solid @tabBorder;

    .bottom-content {
        padding: 6px 16px;
    }
}
</style>
