<template>
  <FlexView 
    position="relative"
    :direction="vertical ? 'column' : 'row'" 
    :align="vertical ? undefined : 'center'" 
    :justify="vertical ? 'center' : undefined"
    :gap="10"
    :flexGrow="1"
    :wrap="!vertical"
    :innerStyle="innerStyle"
  >
    <ActivityIndicator v-if="loadStatus === 'loading'" />
    <Alert
      v-else-if="loadStatus === 'error'" 
      message="加载失败" 
      description="点击重新加载" 
      type="error" 
      @click="handleLoadData"
    />
    <CheckBoxGroup 
      v-else 
      :modelValue="modelValue"
      :disabled="disabled"
      :multiple="multiple"
      @update:modelValue="handleChange" 
    >
      <template v-if="useCell">
        <Cell
          v-for="value in data2"
          :key="value.value"
          :name="value.value"
          :disabled="value.disable"
        >
          <CheckBox
            checkPosition="right" 
            block 
            :name="value.value"
            :text="value.text"
            :disabled="value.disable"
          >
            <template #extraText>
              <Text
                fontConfig="subSecondText"
                :text="value.desc" 
                :innerStyle="{ maxWidth: '100%' }"
              />
            </template>
          </CheckBox>
        </Cell>
      </template>
      <template v-else>
        <CheckBox
          v-for="value in data2"
          :key="value.value"
          :name="value.value"
          :text="value.text" 
          :disabled="value.disable"
        >
          <template #extraText>
            <Text
              fontConfig="subSecondText"
              :text="value.desc" 
              :innerStyle="{ maxWidth: '100%' }"
            />
          </template>
        </CheckBox>
      </template>
    </CheckBoxGroup>
  </FlexView>
</template>

<script setup lang="ts">
import ActivityIndicator from '@/components/basic/ActivityIndicator.vue';
import Cell from '@/components/basic/Cell.vue';
import Text from '@/components/basic/Text.vue';
import Alert from '@/components/feedback/Alert.vue';
import CheckBox from '@/components/form/CheckBox.vue';
import CheckBoxGroup from '@/components/form/CheckBoxGroup.vue';
import FlexView from '@/components/layout/FlexView.vue';
import { onMounted, ref, type PropType } from 'vue';

export interface CheckBoxListItem {
  text: string;
  desc?: string;
  value: any;
  disable?: boolean;
}
export interface CheckBoxListProps {
  modelValue?: any[],
  multiple?: boolean,
  disabled?: boolean,
  useCell?: boolean,
  vertical?: boolean,
  className?: string,
  innerStyle?: Record<string, any>,
  loadData: () => Promise<CheckBoxListItem[]>;
}

const props = withDefaults(defineProps<CheckBoxListProps>(), {
  modelValue: () => ([]),
  loadData: () => Promise.resolve([]),
  disabled: false,
  multiple: false,
  className: '',
  vertical: false,
})
const emit = defineEmits(['update:modelValue', 'change'])

const loadStatus = ref<'loading' | 'error' | 'success'>('loading');
const loadError = ref('');
const data2 = ref<CheckBoxListItem[]>([]);

const handleChange = (checkedValues: any[]) => {
  emit('update:modelValue', checkedValues);
  emit('change', checkedValues);
}
const handleLoadData = () => {
  loadStatus.value = 'loading';
  loadError.value = '';
  
  props.loadData().then((v) => {
    data2.value = v;
    loadStatus.value = 'success';
  }).catch((e) => {
    loadError.value = e.message || '加载失败';
    loadStatus.value = 'error';
    console.error(e);
    
  });
}
const reload = () => {
  handleLoadData();
}

defineExpose({ reload });
defineOptions({
  options: {
    virtualHost: true,
  }
})

onMounted(() => {
  handleLoadData();
});
</script>