<template>
    <!-- <button class="button" @click="toggle()"><text class="button-text">右侧</text></button> -->
    <uni-popup ref="popup" background-color="#fff" @change="change">
        <view class="popup-content" :class="{ 'popup-height': 'right' }">
            <div class="search">
                <uni-search-bar class="uni-mt-10" radius="5" placeholder="自动显示隐藏" clearButton="auto" cancelButton="none"
                    @confirm="search" style="width: 200px;" />
            </div>
            <div class="checkbox">
                <uni-data-checkbox v-model="selectedId" :localdata="list" model="button" :map="customColumn"
                    style="width: 100%;"></uni-data-checkbox>
            </div>
            
            <!-- <div class="pagination"><uni-pagination :total="50" title="标题文字" style="width:100%" /></div> -->
            <div class="footer">
                <button size="default" style="color:#ffffff;background-color:#007aff;border-color:#007aff;margin-top: 10px;width:100%"
        hover-class="is-hover" @click="close()">确认</button>
            </div>
        </view>
    </uni-popup>
</template>

<script lang="ts" setup>
const emit = defineEmits(['closeDrawer'])

const props = defineProps({
    modelValue: {
        type: [String],
        required: false
    },
    showCheckboxDrawer: {
        type: Boolean,
        default: () => {
            return false;
        }
    },
    list: {
        type: Array as PropType<{ id: string, name: string }[]>
    }
})

const selectedId = ref()
const popup = ref()
const customColumn = {
    text: 'name',
    value: 'id'
}

const toggle = () => {
    popup.value?.open('right')
}
const search = () => {

}
const change = (e:any) =>{
    if(!e.show){
        emit('closeDrawer', selectedId.value)
        selectedId.value = undefined
    }
   
}

const close = ()=>{
    popup.value?.close()
}

watch(
    () => props.showCheckboxDrawer,
    _value => {
        if (props.showCheckboxDrawer) {
            toggle()
        } 
    }
)

watch(
  () => props.modelValue,
  () => {
    selectedId.value = props.modelValue
  }
)

</script>
<script lang="ts">
export default {
    options: {
        styleIsolation: 'apply-shared', //解除样式隔离
    }

}
</script>
<style lang="scss" scoped>
@mixin flex {
    /* #ifndef APP-NVUE */
    display: flex;
    /* #endif */
    flex-direction: row;
}

@mixin height {
    /* #ifndef APP-NVUE */
    height: 80%;
    /* #endif */
    /* #ifdef APP-NVUE */
    flex: 1;
    /* #endif */
}

.popup-content {
    @include flex;
    padding: 10px;
    flex-direction: column;
    background-color: #fff;
    height: 100%;
    justify-content: space-around;
}

.popup-height {
    @include height;
    width: auto;
}

.search {
    @include flex;
    justify-content: center;
}

.checkbox {
    @include flex;
    height: 80%;
    overflow: auto;
}

.pagination {
    @include flex;
    width: 100%;
    margin: 0 5px;
    justify-content: center;
}
.footer{
    @include flex;
    width: 100%;
    margin: 0 5px;
    justify-content: center;
}

:deep(.uni-data-checklist .checklist-group) {
    flex-direction: column !important;
}

:deep(.uni-data-checklist .checklist-group .checklist-box) {
    margin: 10px 10px;
}
</style>