<template>
  <div class="properties-list">
    <tiny-collapse v-model="activeNames">
      <tiny-collapse-item v-for="(group, groupIndex) in data" :key="group" :name="groupIndex">
        <template #title>
          <slot name="title" :group="group">
            <div @click="onGroupClick(group)">
              {{ group.label?.zh_CN || '' }}
            </div>
          </slot>
        </template>
        <config-group :group="group" :index="groupIndex" :design="design" :emptyText="emptyText">
          <template #item="{ data, propIndex }">
            <config-item
              :key="propIndex"
              :properties="properties"
              :property="data"
              :data-prop-index="propIndex"
              :data-group-index="groupIndex"
              :isTopLayer="true"
              :group="group"
              @click="onPropClick(data)"
            >
              <template #prefix>
                <slot name="prefix" :data="data"></slot>
              </template>
              <template v-if="!data.noBinding" #suffix>
                <slot name="suffix" :data="data"></slot>
              </template>
            </config-item>
          </template>
        </config-group>
      </tiny-collapse-item>
    </tiny-collapse>
  </div>
</template>

<script lang="ts">
import { computed, provide, ref, watchEffect } from 'vue'
import { Collapse, CollapseItem } from '@opentiny/vue'
import ConfigGroup from './ConfigGroup.vue'
import ConfigItem from './ConfigItem.vue'
export default {
  components: {
    TinyCollapse: Collapse,
    TinyCollapseItem: CollapseItem,
    ConfigGroup,
    ConfigItem
  },
  props: {
    data: {
      type: [Array, Object],
      default: () => []
    },
    design: Boolean,
    emptyText: {
      type: String,
      default: '空'
    }
  },
  emits: ['selected', 'select-prop', 'select-group'],
  setup(props, { emit }) {
    const activeNames = ref([])

    const getPropsObj = (data?: Record<string, any> | any[]) => {
      const obj = {}

      data?.forEach(({ content }) => {
        if (content.length) {
          content.forEach(
            (item: { schema: string | any[]; widget: { props: { modelValue: any } }; property: string | number }) => {
              const node: any = item.schema?.length ? getPropsObj(item.schema) : {}

              node.setValue = (value: any) => {
                item.widget.props.modelValue = value
              }
              obj[item.property] = node
            }
          )
        }
      })

      return obj
    }

    const propsObj = computed(() => getPropsObj(props.data || []))

    provide('propsObj', propsObj)

    const onPropClick = (data: any) => emit('select-prop', data)
    const onGroupClick = (data: any) => emit('select-group', data)

    const filterActiveGroup = (data: any[] | Record<string, any>) =>
      data?.filter?.((item: { fold: any }) => !item.fold)?.map?.((item: any, index: any) => index) || []

    watchEffect(() => {
      activeNames.value = filterActiveGroup(props.data)
    })

    const properties = computed(() => props.data)

    return { onPropClick, onGroupClick, activeNames, properties }
  }
}
</script>