
<template>
    <u-popup :show="show" mode="bottom">
        <view class="box">
            <view class="head">
                <view>请选择参观时间段</view>
                <u-icon name="close-circle" size="48rpx" @click="close"></u-icon>
            </view>
            <u-divider lineColor="#868686"></u-divider>
            <view class="container">
                <view :class="[{'active':current === index},'card']" @click="handelInfo(index,item)" v-for="(item,index) in appointmentTimeList" :key="index">
                    <view class="time">
                        <view>{{item.date}}</view>
                        <view>{{item.time}}</view>
                    </view>
                    <view class="count" v-if="item.residue>0">*剩余{{item.residue}}人</view>
                    <view class="count" v-else>*满员</view>
                </view>
            </view>
            <u-divider lineColor="#868686"></u-divider>
            <view class="foot">
                <u-button text="确定" class="btn" @click="onConfirm"></u-button>
            </view>
        </view>

    </u-popup>
</template>

<script>
export default {
    data() {
        return {
            current:-1,
            currentObj:{}
        }
    },
    props: ['show','appointmentTimeList'],
    methods: {
        close() {
            this.$emit("update:show", false)
        },
        handelInfo(index,item) {
            this.current = index
            this.currentObj = item
        },
        onConfirm() {
            if(!Object.keys(this.currentObj).length){
                return this.$common.msgToast("请选择一个参观时间段", null, "error");
            }
            this.$emit("onConfirm", this.currentObj)
            this.close()
        }
    },
}
</script>

<style lang="scss">
/deep/ .u-transition {
    height: 752rpx;
}

.box {
    padding: 30rpx;

    .head {
        display: flex;
        justify-content: space-between;
        align-items: center;
        color: #000000;
    }

    .container {
        height: 410rpx;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        overflow-y: auto;

        .card {
            margin: 5rpx;
            box-sizing: border-box;
            width: 220rpx;
            height: 140rpx;
            border: 2px solid #1836C8;
            border-radius: 32rpx;
            font-size: 28rpx;
            padding-right: 10rpx;
            padding-bottom: 12rpx;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            padding-top: 20rpx;
            padding-left: 20rpx;
            margin-bottom: 10rpx;

            .time {

                font-weight: 600;
            }

            .count {
                font-size: 16rpx;
                color: #9DADFE;
                text-align: right;
            }
        }

        .active{
            background-color: #1936C9;
            color: #FFFFFF;
        }
    }

    .foot {
        .btn {
            width: 436rpx;
            height: 60rpx;
            border-radius: 32rpx;
            background-color: #1936C9;
            color: #FFFFFF;
        }

    }

    .container::after {
        content: '';
        flex: auto;
    }
}
</style>

