<template>
    <global-page
        title="自定义"
        ref="paging"
    >
        <template #default>
            <view class="custom-title">推荐显示7个选项</view>
            <up-checkbox-group
                v-if="listTab?.length"
                v-model="checkboxValue"
                placement="column"
                class="custom-checkbox"
            >
                <up-checkbox
                    class="checkbox-item"
                    v-for="(item, index) in listTab"
                    :key="item.key"
                    :label="item.label"
                    :name="item.label"
                    shape="circle"
                    size="14"
                    labelSize="14"
                >
                </up-checkbox>
            </up-checkbox-group>
        </template>

        <template v-slot:bottom>
            <global-button @tap="saveCustom" class="custom-btn" type="primary" size="large" :radius="5">
                保存
            </global-button>
        </template>


    </global-page>
</template>

<script setup>
import { ref, watch, onMounted } from 'vue'
import useFlightSupportStore from 'mocp/store/flight-support'
import { storeToRefs } from 'pinia'
import { cloneDeep } from 'lodash'


const flightSupportStore = useFlightSupportStore()
const {listTab} = storeToRefs(flightSupportStore)
const checkboxValue = ref([])

watch(
    checkboxValue,
    (value, oldValue) => {
        if (value.length > 7) {
            checkboxValue.value = value.filter(item => item != oldValue[oldValue.length - 1])
        }
        flightSupportStore.setListTabSelected(value)
    }
)

onMounted(() => {
    console.log('59', listTab.value)
    checkboxValue.value = listTab.value.filter(item => item.selected).map(item => item.label)
})

const saveCustom = () => {
    uni.$mocpJump.navigateBack()
}
</script>
<style lang="scss" scoped>
@import '../constants/flightSupportList';
</style>
