<template>
    <div>
    <van-field
        v-model='innerValueName'
        readonly
        is-link
        label='药品名称：'
        placeholder='请选择'
        class='input-back mt-2 form-input w-full'
        @click='showDrug= true'
    />
    <van-popup v-model:show='showDrug' position='bottom'>
        <div class='pb-4 pr-4 pl-4'>
            <van-picker
                :columns='array'
                :columns-field-names='fieldNames'
                @confirm='drugConfirm'
                @cancel='showDrug = false'
            >
                <template #columns-top>
                    <van-search v-model="searchStr" :placeholder='placeholder' @search='onSearch' clearable/>
                </template>
            </van-picker>
        </div>
    </van-popup>
    </div>
</template>

<script>


import { getDrug } from '@/api/doctor/generalFU'
import { debounce } from '@/utils/common'

export default {
    name: 'DocDrug',
    props: {
        value: [String, Number],
        valueName: String,
        placeholder: String,
        fieldNames: {
            type: Object,
            default: () => {
                return { text: 'chemicalName', value: 'id' }
            }
        }
    },
    emits: ['update:value', 'change'],
    data() {
        return {
            innerValue: null,
            innerValueName: undefined,
            array: [],
            loading: false,
            showDrug: false,
            searchStr: ''
        }
    },
    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
            getDrug(value).then(res => {
                this.array = res.data || []
                if (this.array.length && this.innerValue) {
                   let list = this.array.filter(item => item.id == this.innerValue)
                    if (list && list.length) {
                        this.innerValueName = list[0].chemicalName
                    }
                }
            }).finally(() => {
                this.loading = false
            })
        },
        drugConfirm({ selectedOptions }) {
            this.innerValueName = selectedOptions[0].chemicalName
            this.$emit('update:value', selectedOptions[0].id)
            this.$emit('change', selectedOptions[0])
            this.searchStr = ''
            this.showDrug = false
        }
    },
    watch: {
        value: {
            handler(value) {
                this.innerValue = value
            },
            immediate: true
        },
        valueName: {
            handler(value) {
                if (!value) {
                    return
                }
                this.onSearch(value)
            },
            immediate: true
        },
        searchStr: {
            handler(val) {
                if (!val) return
                this.onSearch(val)
            }
        }
    }
}
</script>

<style lang='less' scoped>
.form-input {
    padding: 8px 12px;
    border-radius: 8px;
}

.input-back {
    background: #FAFAFA;
}

//灰色
.greyColor {
    color: var(--van-text-color-2);
}

//确认按钮颜色
.blueColor {
    color: var(--van-primary-color)
}
</style>