<template>
    <view class="card-manage">
        <order-filter 
            ref="orderFilter"
            @click:time="showPeriodModal"
            @click:filter="showFilterModal"
            :start-time="condition.start_time"
            :end-time="condition.end_time"
        ></order-filter>
        <view class="cm-list">
            <view class="cl-item" v-for="(e, i) in 10" :key="i">
                <view class="ci-bar">
                    <view class="cb-name">欧轩智能羽毛球馆(永泰店)</view>
                    <view class="cb-status">使用中</view>
                </view>
                <view class="ci-lines">
                    <kv-line label="卡名称：">智能浴室用水卡</kv-line>
                    <kv-line label="水阀卡号：">20195171564566</kv-line>
                    <kv-line label="手机号码：">18316553478</kv-line>
                    <kv-line label="微信昵称：">yiming</kv-line>
                    <kv-line label="可用时长："><text class="cl-txt">100分00秒</text></kv-line>
                </view>
            </view>
        </view>

        <!-- 时间段选择 -->
        <period-modal ref="periodModal"></period-modal>
        <!-- status窗口 -->
        <filter-modal ref="filterModal"></filter-modal>
    </view>
</template>

<script>
import orderFilter from "@/components/filter/header.vue";
import periodModal from "@/components/filter/period_modal.vue";
import filterModal from "@/components/filter/filter_modal.vue";
import kv_line from "@/components/kv_line.vue";

export default {
    components: {
        'order-filter': orderFilter,
        'period-modal': periodModal,
        'filter-modal': filterModal,
        'kv-line': kv_line
    },
    data(){
        return {
            condition: {
                start_time: '2024-08-20',
                end_time: '2024-08-20',
            }
        }
    },
    onLoad(options){
        this.$refs.orderFilter.initStadiumSelect(options?.brand_id);
    },
    methods: {
        showPeriodModal(){
            let { start_time, end_time } = this.condition;
            this.$refs.periodModal.init({
                start: start_time,
                end: end_time,
                success: res=>{
                    this.condition.start_time = res.start;
                    this.condition.end_time = res.end;
                }
            });
        },
        showFilterModal(){
            this.$refs.filterModal.show();
        }
    }
}
</script>

<style lang="scss">
    .cm-list{
        padding: 24upx;
        @include isPd(24upx);
        .cl-item{
            padding: 0upx 20upx 30upx;
            border-radius: 10upx;
            background: #fff;
            .ci-bar{
                padding: 30upx 0upx;
                border-bottom: 1upx solid #D8D8D8;
                @include ctf(space-between);
                .cb-name{
                    @include flcw(28upx, 40upx, #1A1A1A, 500);
                    @include tHide;
                }
                .cb-status{
                    flex-shrink: 0;
                    max-width: 30%;
                    @include tHide;
                    @include flcw(28upx, 40upx, $mColor);
                }
            }
            .ci-lines{
                padding-top: 20upx;
                .cl-txt{
                    color: #FF873D;
                }
            }
            &+.cl-item{
                margin-top: 24upx;
            }
        }
    }
</style>