<template>
    <view class="pin-detail">
        <view class="goods">
            <image class="cover" :src="goods.cover" mode="aspectFill" />
            <view class="info">
                <view class="title">{{goods.name}} </view>
                <view class="subtitle">
                    <view class="hasPined" v-if="collage.sale>0">
                        <image src="/static/store/fire.png" mode="widthFix" />已拼{{collage.sale}}件
                    </view>
                    <view class="tuan">{{collage.number}}人团</view>
                </view>
                <view class="price">
                    <view class="now">{{goods.price}}<span>DT积分</span></view>
                    <view class="old"> {{goods.cost}}积分 </view>
                </view>
            </view>
        </view>
        <view class="pin">
            <view class="title">
                <block v-if="collage.down>0 && collage.status == 3">
                    <u-count-down :time="collage.down* 1000" format="DD:HH:mm:ss" autoStart millisecond @change="onChange">
                        &nbsp; </u-count-down>
                    距离结束<span>{{ timeData.days }}</span>&nbsp;天
                    <span>{{ timeData.hours>10?timeData.hours:'0'+timeData.hours}}&nbsp;</span>小时<span>{{ timeData.minutes }}&nbsp;</span>分钟<span>{{ timeData.seconds }}&nbsp;</span>秒
                </block>
                <block v-if="collage.status != 3">
                    <span>{{collage.status_text}}</span>
                </block>
            </view>
            <view class="avatars">
                <block>
                    <image v-for="(item,index) in users" :key='index+1' :class="['avatar',item.master?'pin':''] " :src="item" mode="aspectFill" />
                </block>
                <block v-if="collage.surplus>0">
                    <image v-for="(item,index) in collage.surplus" :key='index+2' class="wen" src="/static/book/wen.png" mode="aspectFill" />
                </block>
            </view>
            <view class="title" v-if="collage.sale>0">已拼<span>{{collage.sale}}</span>人</view>
            <view class="progress">
                {{collage.number - collage.surplus}}人
                    <u-line-progress activeColor="#34ce98" class="line" :percentage="collage.score" :showText="false" />
                {{collage.number}}人
            </view>
        </view>
        <view class="warn" v-if="collage.status == 3 || collage.status == 2">完成支付后，需在24小时内邀请好友参加拼团，否则拼团失败，自动退款</view>

        <view class="order" v-if="orderDetail.order_no != ''">
            <view class="title">订单详情</view>
            <view class="order-item">
                <view class="order-item-title">订单编号：</view>
                <view class="order-item-detail">{{orderDetail.order_no}}</view>
            </view>
            <view class="order-item">
                <view class="order-item-title">下单时间：</view>
                <view class="order-item-detail">{{orderDetail.created_at}}</view>
            </view>
            <view class="order-item">
                <view class="order-item-title">支付时间：</view>
                <view class="order-item-detail">{{orderDetail.paid_at}}</view>
            </view>
            <view class="order-item" v-if="collage.status == 1&& express.deliver_at">
                <view class="order-item-title">发货时间：</view>
                <view class="order-item-detail">{{ express.deliver_at || '--'}}</view>
            </view>
            <view class="order-item" v-if="collage.status == 1 && express.receive_at">
                <view class="order-item-title">签收时间：</view>
                <view class="order-item-detail">{{ express.receive_at || '--'}}</view>
            </view>
            <view class="order-item">
                <view class="order-item-title">支付方式：</view>
                <view class="order-item-detail">DT支付</view>
            </view>
            <view class="order-item">
                <view class="order-item-title">备注信息：</view>
                <view class="order-item-detail">{{orderDetail.remark || '--'}}</view>
            </view>
        </view>

        <view class="btn" v-if="collage.status == 1 && can">
            <view v-if="can.logistic_show" @click="onBtn('logistic')" class="btn-item"> 查看物流 </view>
            <view v-if="can.sign" @click="onBtn('sign')" class="btn-item success"> 确认签收 </view>
        </view>
    </view>
</template>

<script>
    import {
        myPinDetail
    } from '@/apis/interfaces/pin.js'
    import { sign } from '@/apis/interfaces/order'
    export default {
        data() {
            return {
                orderDetail: {},
                goods: {},
                collage: {},
                users: [],
                timeData: {},
                express: {},
                can: {}
            };
        },
        onLoad() {
            this.getInfo()
        },
        methods: {
            getInfo(){
              myPinDetail(this.$Route.query.id).then(res => {
                  this.orderDetail = res.order_detail;
                  this.goods = res.item;
                  let collage = res.collage;
                  collage.score = (res.collage.number - res.collage.surplus)/res.collage.number * 100
                  this.collage = collage;
                  this.users = res.users;
                  this.express = res.order_detail.express;
                  this.can = res.order_detail.can;
              }).catch(err => {
                  uni.showToast({
                      title: err.message,
                      icon: "none",
                      mask: true,
                      duration: 3000
                  })
              })  
            },
            onChange(e) {
                this.timeData = e
            },
            onBtn(type) {
                switch (type) {
                    case 'logistic':
                        this.$Router.push({
                            name: 'OrderLogistics',
                            params: {
                                orderNo: this.orderDetail.order_no,
                            },
                        });
                        break;
                    case 'sign':
                        uni.showModal({
                            title: '温馨提示',
                            content: '是否确认收到货物并签收该订单',
                            confirmText: '确认签收',
                            confirmColor: "#34CE98",
                            cancelText: '再想想',
                            cancelColor: "#666666",
                            success: (res) => {
                                if (res.confirm) {
                                    sign(this.orderDetail.order_no).then(res => {
                                        this.getInfo();
                                        return;
                                    }).catch(err => {
                                        uni.showToast({
                                            title: err.message,
                                            icon: 'none'
                                        })
                                    })
                                }
                            }
                        });
                        break;
                }
            }
        }
    }
</script>

<style lang="scss">
    .pin-detail {
        background-color: $window-color;
        min-height: 100vh;
        position: relative;

        .goods {
            padding: $padding;
            border-top: solid 20rpx #f9f9f9;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
            box-sizing: border-box;
            background-color: #fff;

            .cover {
                width: 200rpx;
                height: 200rpx;
                border-radius: 10rpx;
            }

            .info {
                flex: 1;
                margin-left: 20rpx;
                font-size: 32rpx;

                .title {
                    font-size: 32rpx;
                    color: #454545;
                }

                .subtitle {
                    width: 100%;
                    display: flex;
                    flex-direction: row;
                    align-items: center;
                    justify-content: flex-start;
                    box-sizing: border-box;
                    color: #999;
                    font-size: 26rpx;
                    margin-top: 20rpx;

                    .hasPined {
                        display: flex;
                        flex-direction: row;
                        align-items: center;
                        justify-content: flex-start;
                        box-sizing: border-box;
                        color: #d81e06;
                        background-color: rgba(255, 0, 0, .1);
                        padding: 4rpx 24rpx;
                        border-radius: 30rpx;

                        image {
                            width: 34rpx;
                            height: 34rpx;
                            margin: 6rpx;
                        }
                    }

                    .tuan {
                        margin-left: 20rpx;
                    }
                }

                .price {
                    display: flex;
                    flex-direction: row;
                    align-items: center;
                    justify-content: flex-start;
                    box-sizing: border-box;
                    margin-top: 20rpx;
                    margin-left: 10rpx;

                    .now {
                        font-size: 38rpx;
                        font-weight: bold;
                        color: #d81e06;

                        span {
                            font-weight: normal;
                            font-size: 24rpx;
                            padding-left: 4rpx;
                        }
                    }

                    .old {
                        font-weight: normal;
                        font-size: 26rpx;
                        color: #999;
                        margin-left: 30rpx;
                        text-decoration: line-through;
                        padding-top: 16rpx;
                    }
                }
            }
        }

        .pin {
            margin-top: $margin - 10;
            background-color: #fff;
            padding: $padding;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            box-sizing: border-box;

            .title {
                font-size: 30rpx;
                color: #454545;

                span {
                    color: #d81e06;
                    font-size: 36rpx;
                    font-weight: bold;
                    padding: 0 6rpx;
                }
            }

            .progress {
                width: 100%;
                display: flex;
                flex-direction: row;
                align-items: center;
                justify-content: center;
                box-sizing: border-box;
                color: #454545;
                font-size: 28rpx;
                margin-top: $margin*2 - 20;

                .line {
                    flex: 1;
                    margin: 0 $margin - 10;
                }
            }

            .avatars {
                display: flex;
                flex-direction: row;
                align-items: center;
                justify-content: center;
                box-sizing: border-box;
                position: relative;
                margin-top: $margin;

                image {
                    width: 100rpx;
                    height: 100rpx;
                    // padding: 20rpx;
                    border-radius: 50%;
                    margin: 10rpx 20rpx;
                    border: solid 2rpx #f9f9f9;
                }

                .pin {
                    position: relative;

                    &::after {
                        position: absolute;
                        top: 0;
                        left: 0;
                        content: '拼主';
                        background: orange;
                        padding: 4rpx 0;
                        font-size: 20rpx;
                        width: 100%;
                        text-align: center;
                        color: #fff;
                    }
                }
            }
        }

        .warn {
            text-align: center;
            padding: $padding - 10 $padding + 20;
            color: grey;
            font-size: 26rpx;
        }

        .order {
            background-color: #fff;
            padding: $padding;
            margin-top: 20rpx;
            padding-bottom: 150rpx;

            .title {
                font-size: 32rpx;
                color: #454545;
                font-weight: bold;
                border-bottom: solid 1rpx #f9f9f9;
                padding-bottom: 20rpx;
            }

            .order-item {
                display: flex;
                flex-direction: row;
                align-items: center;
                justify-content: space-between;
                ;
                box-sizing: border-box;
                color: #454545;
                padding: $padding 0;
                border-bottom: solid 1rpx #f9f9f9;

                .order-item-title {
                    font-size: 30rpx;
                }

                .order-item-detail {
                    font-size: 30rpx;
                }
            }
        }

        .btn {
            position: fixed;
            bottom: 0;
            background-color: #fff;
            width: 100%;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: flex-end;
            box-sizing: border-box;
            padding: 0 $padding + 20 $padding $padding + 20;

            .btn-item {
                font-size: 26rpx;
                margin-left: $margin/2;
                color: #333;
                line-height: 56rpx;
                border: solid 1rpx #ddd;
                padding: 0 ($margin - 10);
                border-radius: 28rpx;
                display: inline-block;
                margin-top: $margin;
            }

            .success {
                color: #34CE98;
                border-color: #34CE98;
            }
        }
    }
</style>
