<template>
    <view class="collection-info">
        <view class="ci-header">
            <view class="ch-stadium">
                <view class="cs-txt">当前门店</view>
                <picker>
                    <view class="cs-picker">
                        <input />
                        <image></image>
                    </view>
                </picker>
                
            </view>
            <view class="ch-date-scene">
                <view class="cds-item">
                    <view class="ci-txt">日期</view>
                    <view class="ci-frame ci-date">
                        <input />
                        <view></view>
                        <picker>
                            <image></image>
                        </picker>
                        
                    </view>
                </view>
                <view class="cds-item">
                    <view class="ci-txt">场景</view>
                    <view class="ci-frame ci-scene">
                        <picker class="cs-picker">
                            <view class="cp-picker-frame">
                                <input />
                                <image></image>
                            </view>
                        </picker>
                    </view>
                </view>
            </view>
            
        </view>
        <view class="ci-tab">
            <view class="ct-item">
                <view>全部</view>
            </view>
            <view class="ct-item">
                <view class="active">退款</view>
            </view>
        </view>
        <view class="ci-total">
            收款100笔（<text>￥10000.00</text>) ，退款2笔（<text>￥200.00</text>）
        </view>
        <view class="ci-ls">
            <view class="cl-item">
                <view class="ci-name">
                    <view>线上-订购</view>
                    <view>+20.00</view>
                </view>
                <view class="ci-line">
                    <view>c2021122215468999</view>
                    <view>退款成功</view>
                </view>
                <view class="ci-line">
                    <view>221-12-12 14:13:25</view>
                    <view></view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
export default {

}
</script>

<style lang="scss">
    @import "~style/public.scss";
    page{
        background-color: #fff;
    }
    .collection-info{
        .ci-header{
            padding: 0 24upx;
            .ch-stadium{
                padding: 26upx 0;
                @include centerFlex(space-between);
                
                .cs-txt{
                    flex-shrink: 0;
                    flex-grow: 0;
                    margin-right: 20upx;
                    font-size: 28upx;
                    line-height: 40upx;
                    color: #9c9c9f;
                }
                picker{
                    flex-grow: 1;
                }
                .cs-picker{ 
                    padding: 0 20upx;
                    height: 92upx;
                    border-radius: 10upx;
                    background-color: #f2f1f6;
                    @include centerFlex(space-between);
                    >input{
                        flex-grow: 1;
                        height: 100%;
                        font-size: 28upx;
                        color: #1a1a1a;
                    }
                    image{
                        flex-grow: 0;
                        flex-shrink: 0;
                        width: 28upx;
                        height: 28upx;
                        background-color: skyblue;
                    }
                }
            }
            .ch-date-scene{
                margin-bottom: 30upx;
                @include centerFlex(space-between);
                .cds-item{
                    flex-grow: 0;
                    flex-shrink: 0;
                    @include centerFlex(flex-start);
                    .ci-txt{
                        margin-right: 16upx;
                        line-height: 34upx;
                        font-size: 24upx;
                        color: #9c9c9f;
                    }
                    .ci-frame{
                        height: 64upx;
                        border-radius: 10upx;
                        background-color: #f2f1f6;
                    }
                    .ci-date{
                        padding: 0 16upx;
                        width: 240upx;
                        @include centerFlex(space-between);
                        >input{
                            flex-grow: 1;
                            height: 100%;
                            font-size: 24upx;
                            color: #1a1a1a;
                        }
                        >view{
                            flex-grow: 0;
                            flex-shrink: 0;
                            margin: 0 14upx;
                            height: 32upx;
                            width: 2upx;
                            background-color: #B2B2B2;
                        }
                        picker{
                            flex-shrink: 0;
                            flex-grow: 0;
                            image{ 
                                margin: 0;
                                padding: 0;
                                display: block;
                                height: 40upx;
                                width: 40upx;
                                background-color: skyblue;
                            }
                        }
                        
                    }
                    .ci-scene{
                        .cs-picker{
                            
                        }
                        .cp-picker-frame{
                            padding: 0 20upx;
                            width: 264upx;
                            @include centerFlex(space-between);
                            input{
                                flex-grow: 1;
                                height: 64upx;
                                font-size: 24upx;
                                color: #1a1a1a;
                            }
                            image{
                                flex-shrink: 0;
                                flex-grow: 0;
                                margin-left: 16upx;
                                height: 28upx;
                                width: 28upx;
                                background-color: skyblue;
                            }
                        }
                    }

                }
            }
            
        }
        .ci-tab{
            @include centerFlex(center);
            border-bottom: 2upx solid #D8D8D8;
            .ct-item{
                flex-grow: 1;
                @include centerFlex(center);
                >view{
                    position: relative;
                    display: inline-block;
                    text-align: center;
                    line-height: 110upx;
                    height: 110upx;
                    font-size: 32upx;
                    color: #9C9C9F;
                    &.active{
                        color: $themeColor;
                        &::after{
                            content: '';
                            display: block;
                            position: absolute;
                            left: 50%;
                            bottom: 0;
                            transform: translateX(-50%);
                            width: 200%;
                            height: 8upx;
                            border-radius: 4upx;
                            background-color: $themeColor;
                        }
                    }
                    
                }
            }
        }
        .ci-total{
            padding: 0 24upx;
            line-height: 96upx;
            font-size: 24upx;
            color: #9C9C9F;
            @include textHide(1);
            >text{
                color: #F6843E;
            }

        }
        .ci-ls{
                padding: 0 30upx;
            .cl-item{
                padding: 30upx 0;
                border-bottom: 2upx solid #D8D8D8;
                .ci-name{
                    margin-bottom: 8upx;
                    @include centerFlex(space-between);
                    >view{
                        font-size: 32upx;
                        color: #1a1a1a;
                        width: 50%;
                        @include textHide(1);
                        &+view{
                            text-align: right;
                            font-weight: 500;
                            color: #F6843E;
                        }
                    }
                }
                .ci-line{
                    @include centerFlex(space-between);
                    
                    >view{
                        line-height: 34upx;
                        font-size: 24upx;
                        color: #9C9C9F;
                        @include textHide(1);
                        &+view{
                            flex-shrink: 0;
                            max-width: 50%;
                        }
                    }
                }

            }
        }
    }
</style>