<template>
    <u-picker
        ref="pickerRef"
        :keyName="keyName"
        :show="isShow"
        :columns="[xhColumns]"
        @confirm="confirm"
        @cancel="close"></u-picker>
</template>

<script>
import { dropDown } from "@/api/vehicle/common";
/* https://uviewui.com/components/picker.html */

export default {
    props: {

        //自定义需要展示的text属性键名
        keyName: {
            type: String,
            default: 'label'
        },
        columns: {
            type: Array,
            default: () => []
        },
        api: { //传入此参数columns无效
            type: String,
            default: ''
        },
		workTypeId: { //
            type: String,
            default: ''
        },
    },
	
	watch: {
		workTypeId: {
			immediate: false,
			deep: true,
			handler(newVal) {
				if(this.api == 'dropDown') this.getData()
			}
		}
	},

    data() {
        return {
            isShow: false,
            xhColumns: []
        }
    },
    created() {
        if (this.api) {
            this.getData()
        } else {
            this.xhColumns = this.columns
        }
    },
    methods: {
        getData() {
            let getApiMap = {
                'dropDown': async () => {
                    let { data } = await dropDown({workTypeId: this.workTypeId})
					
                    this.xhColumns = data.map(e => {
                        return {
                            label: e.vehTypeName,
                            value: e.vehTypeId
                        }
                    })
					// console.log( this.xhColumns,' this.xhColumns')
                },
            }
            getApiMap[this.api]()
        },
        show() {
            this.isShow = true;
        },

        close() {
            this.isShow = false
        },

        confirm(e) {
            const { value } = e
            this.$emit('confirm', value[0])
            this.close()
        },


    }
}
</script>

<style lang="scss" scoped></style>
