<script setup lang="ts">
import type { PropType } from 'vue';
import { onMounted, ref } from 'vue';
import { Empty, Skeleton, Tree } from 'ant-design-vue';
import { communityTree } from "#/api/property/community";
import type { CommunityVO } from "#/api/property/community/model";

defineOptions({ inheritAttrs: false });

withDefaults(defineProps<{ showSearch?: boolean }>(), { showSearch: true });

const emit = defineEmits<{
  reload: [];
  select: [];
}>();

const selectFloorId = defineModel('selectFloorId', {
  type: Array as PropType<string[]>,
});

const searchValue = defineModel('searchValue', {
  type: String,
  default: '',
});

type TreeArray = CommunityVO[];
const treeArray = ref<TreeArray>([]);
const showTreeSkeleton = ref<boolean>(true);

async function loadTree() {
  showTreeSkeleton.value = true;
  searchValue.value = '';
  selectFloorId.value = [];
  treeArray.value = await communityTree(4);
  showTreeSkeleton.value = false;
}

// async function handleReload() {
//   await loadTree();
//   emit('reload');
// }

onMounted(loadTree);
</script>

<template>
  <div class="h-full flex flex-col">
    <Skeleton
      :loading="showTreeSkeleton"
      :paragraph="{ rows: 8 }"
      active
      class="p-[8px] flex-1 min-h-0"
    >
    <div class="bg-background flex flex-col h-full rounded-lg">
      <div class="flex-1 overflow-y-auto px-[8px] mt-2.5 min-h-0">
        <Tree
          class="tree-background"
          v-bind="$attrs"
          v-if="treeArray.length > 0"
          v-model:selected-keys="selectFloorId"
          :field-names="{ title: 'label', key: 'id' }"
          :show-line="{ showLeafIcon: false }"
          :tree-data="treeArray"
          :virtual="false"
          default-expand-all
          @select="$emit('select')"
        >
          <template #title="{ label }">
              <span v-if="label.indexOf(searchValue) > -1">
                {{ label.substring(0, label.indexOf(searchValue)) }}
                <span style="color: #f50">{{ searchValue }}</span>
                {{ label.substring(label.indexOf(searchValue) + searchValue.length) }}
              </span>
            <span v-else>{{ label }}</span>
          </template>
        </Tree>
        <div v-else class="mt-5">
          <Empty
            :image="Empty.PRESENTED_IMAGE_SIMPLE"
            description="暂无数据"
          />
        </div>
      </div>
    </div>
    </Skeleton>
  </div>
</template>

<style scoped lang="scss">
.bg-background{
  background-color: white;
  :deep(.ant-tree){
    background-color: white;
    color: #333;
  }
}
</style>
