<template>
    <!-- <el-select
        v-model="value2"
        value-key="title"
        :multiple="multiple"
        filterable
        clearable
        default-first-option
        :placeholder="placeholder"
        popper-class="no-display"
        @click.native="isShowDialog = true"
        @change="handleChange"
    > -->
    <div class="base-select-popup">
        <el-input
            :value="value2"
            placeholder="请选择"
            readonly
            @click.native="isShowDialog = true"
        >
        </el-input>
        <base-dialog
            v-model="isShowDialog"
            @confirm="handleConfirm"
        >
            <el-tree
                :data="data"
                :props="{
                    children: 'children',
                    label: 'title',
                }"
                highlight-current
                :expand-on-click-node="false"
                default-expand-all
                ref="tree"
                :show-checkbox="multiple"
                check-strictly
                node-key="id"
            ></el-tree>
        </base-dialog>
    </div>
    <!-- </el-select> -->
</template>

<script>
import { fetchTree } from '@/api/system/organization'

export default {
    props: {
        value: {
            type: [Array, String, Object],
        },
        placeholder: {
            type: String,
            default: '点击选择',
        },
        multiple: {
            type: Boolean,
            default: false,
        },
        showField: {
            type: String,
            required: true,
        },
    },
    data() {
        return {
            isShowDialog: false,
            data: [],
        }
    },
    computed: {
        value2: {
            get() {
                if (this.multiple) {
                    return this.value
                        ?.map(el => {
                            return el[this.showField]
                        })
                        .join(',')
                } else {
                    return this.value?.[this.showField]
                }
            },
            set(val) {
                this.$emit('input', val)
            },
        },
    },
    created() {
        this.getTree()
    },
    methods: {
        handleConfirm() {
            if (this.multiple) {
                this.value2 = this.$refs.tree.getCheckedNodes()
                this.isShowDialog = false
            } else {
                const selectedNode = this.$refs.tree.getCurrentNode()
                this.value2 = selectedNode
                this.isShowDialog = false
            }
        },
        async getTree() {
            const res = await fetchTree({ module_type_condition: 'PC' })
            this.data = res
        },
        handleChange() {
            console.log(arguments)
        },
    },
}
</script>
