<template>
    <view>
        <view class="order--content" :class="[pattern ? 'chunk': 'broad']">
            <view class="order--group--header" @click="$emit('onBtn', {type: 'shopsDetail', order: orderInfo})">
                <image class="logo" v-if="orderInfo.shop.cover != ''" :src="orderInfo.shop.cover" mode="aspectFill">
                </image>
                <view class="store">
                    {{orderInfo.shop.name}}
                    <uni-icons type="right" size="16" color="#666" />
                </view>
                <view class="stateText" :style="{color: stateColor}">
                    {{orderInfo.collage.status_text}}
                </view>
            </view>

            <view class="order--header">
                <view class="order--no">
                    订单号：{{orderInfo.no}}
                </view>
            </view>
            <view class="order--flex" @click="$emit('onBtn', {type: 'goodsDetail', order: orderInfo})">
                <image class="order--cover" :src="orderInfo.cover" mode="aspectFill"></image>
                <view class="order--title">
                    {{orderInfo.name}}
                    <view class="unit"> {{orderInfo.unit}} </view>
                </view>
                <view class="order--count">
                    <view class="order--price">{{orderInfo.price}}<text>DT积分</text></view>
                    <view class="order--sum">共{{orderInfo.sum}} 件</view>
                </view>
            </view>
            <slot name="btns">
                <view class="flexrow">
                    <view class="">
                        <u-avatar-group :random-bg-color="true" :urls="orderInfo.users" size="26" gap="0.4"
                            class="avatar-group" />
                    </view>
                    <view class="order--btns">
                        <view v-if="orderInfo.collage.status =='3'" class="item item--sign"
                            @click="$emit('onBtn', {type: 'share', order: orderInfo})">
                            分享拼团
                        </view>
                        <view class="item item--cancel" @click="$emit('onBtn', {type: 'goInfo', order: orderInfo})">
                            查看详情
                        </view>
                    </view>
                </view>
            </slot>
        </view>
    </view>
</template>
<script>
    export default {
        props: {
            // 订单样式否为块
            pattern: {
                type: Boolean,
                default: true
            },
            // 店铺模式
            stores: {
                type: Boolean,
                default: false
            },
            // 订单信息
            orderInfo: {
                type: Object,
                default: () => {
                    return {
                        cover: "",
                        name: "",
                        price: "",
                        sum: 1,
                        collage: {},
                        users: [],
                        invite: '',
                        order: {},
                    }
                }
            },
            // 状态标签颜色
            stateColor: {
                type: String,
                default: "#FF6160"
            },
            // 可操作按钮组
            orderBtns: {
                type: Array,
                default: () => {
                    return [{
                        text: "订单详情",
                        type: "info"
                    }, {
                        text: "删除订单",
                        type: "delete",
                        style: {
                            color: "#FF6160"
                        }
                    }]
                }
            }
        }
    }
</script>
<style scoped lang="scss">
    $margin: 30rpx;
    $radius: 10rpx;

    .text-nowrap {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .text-ellipsis {
        display: -webkit-box;
        overflow: hidden;
        text-overflow: ellipsis;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }

    .order--content {
        background: white;

        &.chunk {
            margin: $margin $margin;
            border-radius: $radius;
            padding: $margin;
        }

        &.broad {
            padding: $margin;
            border-bottom: solid 1rpx #ddd;
        }

        .order--header {
            display: flex;
            justify-content: space-between;
            padding-bottom: $margin;
            border-top: solid 1rpx #f9f9f9;
            align-items: center;

            &>.order--no {
                flex: 1;
                margin-right: $margin;
                font-size: 26rpx;
                line-height: 40rpx;
                color: #555;
                @extend .text-nowrap;
                padding-top: 10rpx;
            }

            &>.stateText {
                font-size: 26rpx;
                color: $text-price;
            }
        }

        .order--flex {
            display: flex;
            align-items: center;

            .order--cover {
                vertical-align: top;
                width: 128rpx;
                height: 128rpx;
            }

            .order--title {
                @extend .text-ellipsis;
                text-align: left;
                flex: 1;
                padding-left: $margin;
                font-size: 28rpx;
                line-height: 40rpx;
                display: flex;
                flex-direction: column;
                align-items: flex-start;
                justify-content: center;
                box-sizing: border-box;

                .unit {
                    color: #999;
                    font-size: 26rpx;
                    padding-top: 10rpx;
                }
            }

            .order--count {
                text-align: right;
                padding-left: $margin;
                line-height: 40rpx;

                // color: $text-price;
                .order--price {
                    font-size: 30rpx;
                    font-weight: bold;

                    &>text {
                        font-size: 24rpx;
                        font-weight: normal;
                        padding-left: 10rpx;
                    }
                }

                .order--sum {
                    font-size: 26rpx;
                    color: #777;
                }
            }
        }

        .order--group {
            .order--group--header {
                padding-bottom: $margin;
                display: flex;
                justify-content: space-between;
                align-items: center;

                &>.logo {
                    width: 38rpx;
                    height: 38rpx;
                    vertical-align: middle;
                    margin-right: $margin/2;
                }

                &>.store {
                    @extend .text-nowrap;
                    flex: 1;
                    margin-right: $margin;
                    font-size: 28rpx;
                    line-height: 40rpx;
                    color: #555;
                }

                &>.stateText {
                    font-size: 26rpx;
                }
            }

            .order--group--flex {
                @extend .order--flex;
                margin-bottom: $margin - 10;

                &:last-child {
                    margin: 0;
                }
            }
        }

        .order--group--header {
            padding-bottom: $margin;
            display: flex;
            justify-content: space-between;
            align-items: center;

            &>.logo {
                width: 38rpx;
                height: 38rpx;
                vertical-align: middle;
                margin-right: $margin/2;
            }

            &>.store {
                @extend .text-nowrap;
                flex: 1;
                margin-right: $margin;
                font-size: 28rpx;
                line-height: 40rpx;
                color: #555;
            }

            &>.stateText {
                font-size: 26rpx;
            }
        }

        .order--group--flex {
            @extend .order--flex;
            margin-bottom: $margin - 10;

            &:last-child {
                margin: 0;
            }
        }

        .flexrow {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: space-between;
            box-sizing: border-box;
            padding-top: $margin - 10;
            border-top: solid 1rpx #f9f9f9;
            margin-top: $margin - 10;
        }

        .order--btns {
            display: flex;
            justify-content: flex-end;

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

                &--cancel,
                &--delete,
                &--logistic {
                    color: #666;
                }

                &--pay,
                &--sign {
                    color: #34CE98;
                    border-color: #34CE98;
                }
            }
        }
    }
</style>
