<template>
    <van-popup :show="innerShow" position="bottom"
        :teleport="teleport"
        class="doc-unit">
        <van-picker :loading="loading"
            title="机构选择"
            :columns="array"
            :columns-field-names="fieldNames"
            v-model="innerValue"
            @confirm="onConfirm"
            @cancel="onCancel"
        >
            <template #columns-top>
                <van-search v-model="searchStr" placeholder="请输入搜索关键词" clearable
                    @search="onSearch"/>
            </template>
        </van-picker>
    </van-popup>
</template>

<script>
import { getUnitByName } from '@/api/doctor/generalFU.js'
import { debounce } from '@/utils/common.js'

export default {
    name: 'DocUnit',
    props: {
        show: Boolean,
        value: [String, Number],
        valueName: String,
        fieldNames: {
            type: Object,
            default: () => {
                return {text: 'unitName', value: 'id'}
            }
        },
        teleport: [String, Element]
    },
    emits: ['update:show', 'update:value', 'change'],
    data() {
        return {
            innerValue: undefined,
            array: [],
            loading: false,
            searchStr: ''
        }
    },
    computed: {
        innerShow() {
            return this.show
        }
    },
    created() {
        this.onSearch = debounce(this.onSearch, 500)
        this.onSearch('')
    },
    methods: {
        onSearch(value) {
            if (this.loading) return
            this.array = []
            if (!value) {
                return
            }
            if (!value.trim()) return
            this.loading = true
            this.getData(value).then(res => {
                // console.log(res.data)
                this.array = res.data || []
            }).finally(() => {
                this.loading = false
            })
        },
        getData(query) {
            return getUnitByName(query)
        },
        onConfirm({ selectedValues, selectedOptions }) {
            this.$emit('update:value', selectedValues[0])
            this.$emit('change', selectedOptions[0] || {})
            this.$emit('update:show', false)
            this.searchStr = ''
        },
        onCancel() {
            this.$emit('update:show', false)
        }
    },
    watch: {
        value: {
            handler(value) {
                if (value == null) return
                this.innerValue = [value]
            },
            immediate: true
        },
        valueName: {
            handler(value) {
                if (!value) {
                    return
                }
                this.onSearch(value)
            },
            immediate: true
        },
        searchStr(val) {
            if (!val) return
            this.onSearch(val)
        }
    }
}
</script>

<style lang="less" scoped>

</style>