<template>
    <van-popup :show="innerShow" position="bottom"
        class="doc-unit">
        <van-picker :loading="loading"
            title="医生选择"
            :columns="array"
            :columns-field-names="fieldNames"
            v-model="innerValue"
            @confirm="onConfirm"
            @cancel="onCancel"
        >
        </van-picker>
    </van-popup>
</template>

<script>
import { getOfficeDoctor } from '@/api/doctor/generalFU.js'

export default {
    name: 'DocUnit',
    props: {
        show: Boolean,
        value: [String, Number],
        unitId: [String, Number],
        officeId: [String, Number],
        fieldNames: {
            type: Object,
            default: () => {
                return {text: 'staffName', value: 'id'}
            }
        }
    },
    emits: ['update:show', 'update:value', 'change'],
    data() {
        return {
            innerValue: undefined,
            array: [],
            loading: false,
        }
    },
    computed: {
        params() {
            return {
                unitId: this.unitId,
                officeId: this.officeId
            }
        },
        innerShow() {
            return this.show
        },
        innerUnitId() {
            return this.unitId
        }
    },
    created() {
        this.getData()
    },
    methods: {
        getData() {
            this.array = []
            if (!this.officeId) return
            this.loading = true
            getOfficeDoctor(this.innerUnitId, this.officeId).then(res => {
                this.array = res.data || []
            }).finally(() => {
                this.loading = false
            })
        },
        onConfirm({ selectedValues, selectedOptions }) {
            this.$emit('update:value', selectedValues[0])
            this.$emit('change', selectedOptions[0])
            this.$emit('update:show', false)
        },
        onCancel() {
            this.$emit('update:show', false)
        }
    },
    watch: {
        value: {
            handler(value) {
                if (value == null) return
                this.innerValue = [value]
            },
            immediate: true
        },
        params: {
            handler() {
                this.getData()
            }
        },
    }
}
</script>

<style lang="less" scoped>

</style>
