<template>
  <view class="flex items-center gap-20 px-20 h-[44px] border-0 border-b border-solid border-border-light">
    <view v-for="(item, index) in configs" :key="item.prop" class="flex-1 min-w-1 h-full">
      <ie-dropdown-item :config="item" :index="index" :absolute="absolute" />
    </view>
  </view>
</template>
<script lang="ts" setup>
import IeDropdownItem from './ie-dropdown-item.vue';
import type { Dropdown } from '@/types';
import { useDropdown, DROPDOWN_SYMBOL } from './ie-dropdown-hooks';

const emit = defineEmits<{
  (e: 'change', value: any): void;
}>();
const modelValue = defineModel<Record<string, any>>();
const props = defineProps<{
  configs: Dropdown.DropdownItem[];
  // 是否使用绝对定位
  absolute?: boolean;
}>();
const dropdown = useDropdown(props.configs);

const prevFormValue = ref<Record<string, any>>({});

watch(() => dropdown.form.value, (newVal) => {
  const oldVal = prevFormValue.value;
  modelValue.value = newVal;
  if (!dropdown.deepEqual(newVal, oldVal)) {
    emit('change', newVal);
  }
  prevFormValue.value = dropdown.deepClone(newVal);
}, {
  deep: true
});

provide(DROPDOWN_SYMBOL, dropdown);
onMounted(() => {
  dropdown.init(modelValue.value || {});
  prevFormValue.value = dropdown.deepClone(dropdown.form.value);
});
</script>
<style lang="scss" scoped></style>