<template>
    <view class="custom-select-class" @click="showTreeSelectModal()">
        <view class="custom-select-content">
            <text v-if="selectValue">{{ visibleName }}</text>
            <text v-else style="color:#909399;font-size: 12px;">{{ field.description || placeholder ||
                `请输入${field.title}` }}</text>
        </view>
        <uni-icons :size="14" color="#909399" type="down" style=" padding: 0 5px;"></uni-icons>
    </view>
    <next-tree :ifSearch="true" :border="true" labelKey="name" ref="treeSelectRef" :checkStrictly="true"
        :funcMode="field.multiple ? 'checkbox' : 'radio'" :treeData="options" @confirm="confirmTreeSelect"
        @cancel="cancelTreeSelect"></next-tree>
</template>


<script lang="ts" setup>
import nextTree from '@/components/next-tree/next-tree.vue'
import { computed, useAttrs, PropType } from 'vue'


interface DataItem {
    id: string | number
    name: string
    children?: DataItem[]
}

/**
 * 根据id查找name值，递归则获取路径拼接name
 * @param nodes
 * @param id
 * @param path
 */
function findPathById(
    nodes: DataItem[],
    id: string,
    path: string[] = []
): string | null {
    const result = nodes
        .map(node => {
            if (node.id === id) {
                return [...path, node.name].join(' / ')
            }
            if (node.children) {
                return findPathById(node.children, id, [...path, node.name])
            }
            return null
        })
        .find(p => p !== null)

    return result || null
}


const visibleName = computed(() => {
    const id = selectValue.value
    if (props.field.multiple) {
        const arrName: string[] = []
        options?.map((item: { id: string | number, name: string }) => {
            if (id.includes(item.id)) {
                arrName.push(item.name)
            }
            return item
        })
        return arrName.join(',')
    }
    return findPathById(options, id)

})
const emits = defineEmits(['update:modelValue'])
const treeSelectRef = ref()

// const props = defineProps({
//     modelValue: {
//         type: [Array]
//     },
//     placeholder: {
//         type: String
//     },
//     readyonly: {
//         type: Boolean,
//         default: () => false
//     },
//     field: {
//         type: Object,
//         required: true
//     },
// })

const props = defineProps<{
    modelValue?: any
    placeholder?: String
    readyonly?: Boolean,
    field?: any
}>()

const selectValue = ref(props.modelValue)
const options = props.field.enum.map((item: any, index: number) => {
    return {
        id: item.value || item,
        name: props.field.enumNames[index] || item
    }
})

function checkedTreeData(treeData: any, selectIds?: any) {
    treeData.map((item: any) => {
        if (selectIds.indexOf(item.id) !== -1) {
            item.checked = true
        } else {
            item.checked = false
        }
        if (item.children && item.children.length) {
            checkedTreeData(item.children, selectIds)
        }
    })
}

const showTreeSelectModal = async () => {
    checkedTreeData(options, props.field.multiple ? selectValue.value : [selectValue.value])
    unref(treeSelectRef).showTree = true
}

const cancelTreeSelect = () => {

}

const confirmTreeSelect = (list: { id: string | number, name: string }[]) => {
    if (props.field.multiple) {
        selectValue.value = list.map(item => item.id)
    } else {
        selectValue.value = list[0].id
    }
    emits('update:modelValue', selectValue.value)
}
</script>

<style scoped lang="scss">
.example {
  padding: 15px;
  background-color: #fff;
}

:deep(.is-disabled) {
  color: #333;

}

.custom-select-class {
  border-color: #e5e5e5;
  background-color: transparent;
  display: flex;
  box-sizing: border-box;
  flex-direction: row;
  align-items: center;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
}

.custom-select-content {
  width: auto;
  position: relative;
  overflow: hidden;
  flex: 1;
  line-height: 1;
  font-size: 14px;
  line-height: 35px;
  padding-left: 10px;
  height: 35px;

}

.tag-container {
  &__item {
    padding: 0 6px 0 0;
  }
}
</style>