<template>
  <view class="unit-select" :style="{ height: height }">
    <view class="header">
      <view class="icon" @click="close">
        <ui-icon color="rgb(138,138,138)" name="close" size="19"></ui-icon>
      </view>
      <text>{{ title }}</text>
    </view>
    <view class="content" :style="{ height: `${height - 90}rpx` }">
      <view class="parent">
        <view
          v-for="item in itemList"
          @click="checkParent(item)"
          :key="item.value"
          class="item"
          :class="{
            actived: isActived(item)
          }"
        >
          {{ item.text }}
        </view>
      </view>
      <view class="child">
        <view
          v-for="child in state.selectItemList"
          @click="checkChild(child)"
          :key="child.value"
          class="item"
          :class="{
            actived: isActived(child)
          }"
        >
          <text>{{ child.text }}</text>
          <ui-icon
            v-if="isActived(child)"
            color="rgb(66, 107, 199)"
            name="check"
            size="16"
          ></ui-icon>
        </view>
      </view>
    </view>
  </view>
</template>
<script setup lang="ts">
import { reactive, watch } from 'vue';

interface itemListType {
  text: string;
  value: any;
  children?: itemListType[];
}

const emit = defineEmits<{
  (e: 'close'): void;
  (e: 'change', value: number[]): void;
  (e: 'confirm', value: itemListType[]): void;
}>();
const props = withDefaults(
  defineProps<{
    title: string;
    defaultKey?: number[];
    itemList: itemListType[];
    height: number;
  }>(),
  {
    value: [],
    title: '',
    defaultKey: [],
    itemList: [],
    height: 0
  }
);

const state = reactive<{
  value: number[];
  selectItemList: itemListType[];
}>({
  value: [],
  selectItemList: []
});

const isActived = (item = {}) => {
  return state?.value?.includes(item.value);
};

const getChildList = (item: itemListType) => {
  const data = props.itemList.find((i) => i.value === item.value);
  return data?.children || [];
};

const checkParent = (item: itemListType) => {
  if (isActived(item)) {
    return;
  } else {
    state.value = [item.value];
    state.selectItemList = getChildList(item);
  }
  emit('change', [...state.value]);
};

const close = () => {
  emit('close');
};

const findValue = (
  list: itemListType[],
  array: number[],
  value: itemListType[]
) => {
  list.forEach((item) => {
    if (item.value === array[0]) {
      value.push(item);
      if (item.children?.length) {
        findValue(item.children, array.slice(1), value);
      }
    }
  });
};

const getSelectItemList = () => {
  const confirmVal: itemListType[] = [];
  findValue(props.itemList, state.value, confirmVal);
  return confirmVal;
};

const checkChild = (child: itemListType) => {
  if (isActived(child)) {
    return;
  } else {
    const parent = state.value[0];
    state.value = [parent, child.value];
  }
  emit('change', [...state.value]);

  emit('confirm', getSelectItemList());
};

const installData = (val: number[]) => {
  state.value = val;
  if (val?.[0] !== undefined && val?.[0] !== null) {
    state.selectItemList = getChildList({
      value: val[0],
      text: ''
    });
  }
};

watch(
  () => props.defaultKey,
  (val) => {
    installData(val);
  },
  {
    immediate: true
  }
);
</script>
<style scoped lang="scss">
@import '../../libs/css/unit-select.scss';
</style>
