<template>
  <u-loading-icon v-if="data2.loadStatus.value === 'loading'" />
  <view 
    v-else-if="data2.loadStatus.value === 'error'" 
    class="d-flex flex-row align-center"
    @click="data2.loadData(undefined, true)"
  >
    <u-icon name="error-circle-fill"></u-icon>
    <text class="ml-2">{{ data2.loadError.value }}</text>
  </view>
  <uni-data-checkbox
    v-else
    :modelValue="modelValue"
    selectedColor="#ff8719"
    @update:modelValue="(v: any) => $emit('update:modelValue', v)"
    :localdata="data2.content.value"
    v-bind="$attrs"
  >
  </uni-data-checkbox>
</template>

<script setup lang="ts">
import { useSimpleDataLoader } from '@/common/composeabe/SimpleDataLoader';
import type { PropType } from 'vue';

export interface DynamicCheckboxProps {
  loadData: () => Promise<{
    text: string
    value: any
    disable?: boolean
  }[]>;
}

const props = defineProps({	
  modelValue : { type: null }	,
  loadData: { 
    type: Function as PropType<DynamicCheckboxProps['loadData']>, 
    default: () => {} 
  },
})
const data2 = useSimpleDataLoader(props.loadData, true);

defineEmits(['update:modelValue'])

</script>