// 公共组件 - 下拉列表
<template>
	<div>
		<!-- label -->
		<label v-if="isShowlabel">{{ label }}</label>
		<a-select
			:allowClear="true"
			v-model:value="dictId"
			:loading="getdictBizListLoading"
			:placeholder="getI18n('common', 'Common_Please_Select', [label])"
			@change="
				val => {
					$emit('on-change', val)
				}
			"
			:disabled="disabled"
		>
			<a-select-option
				v-for="i in dictBizListData"
				:key="i.id"
				:value="i.dictKey"
			>
				{{ i.dictValue }}
			</a-select-option>
		</a-select>
	</div>
</template>
<script lang="ts">
import { defineComponent, ref, onMounted, watch, PropType } from 'vue'
import { getI18n } from '@/utils/i18n'
import { getDictBizListApi, getDictListApi } from '@/api/user-center/dict'
import { DictListParamsModel } from '@/api/user-center/dict/model'
export default defineComponent({
	props: {
		// 是否显示label
		isShowlabel: {
			type: Boolean,
			required: false,
			default: false,
		},
		// 值
		label: {
			type: String,
			required: false,
			default: '',
		},
		// 绑定的值
		value: {
			type: String as PropType<string | undefined>,
			required: false,
		},
		// 字典id
		parentId: {
			type: String,
			required: false,
			default: '',
		},
		// 是否系统字典列表查询
		isSystemApi: {
			type: Boolean,
			required: false,
			default: false,
		},
		// 是否禁用
		disabled: {
			type: Boolean,
			required: false,
			default: false,
		},
	},
	emits: ['on-change'],
	setup(props) {
		let dictId = ref<string>() // id
		let getdictBizListLoading = ref<boolean>(false) // loading
		let dictBizListData = ref()
		// 字典
		const getDictList = async () => {
			var params: DictListParamsModel = {
				code: props.parentId,
				size: -1,
			}
			getdictBizListLoading.value = true
			var res = await (props.isSystemApi == true
				? getDictListApi(params)
				: getDictBizListApi(params))
			dictBizListData.value = res.data
			getdictBizListLoading.value = false
		}
		watch(
			() => props.value,
			newValue => {
				dictId.value = newValue
			},
			{ deep: true, immediate: true }
		)
		onMounted(() => {
			getDictList()
		})
		return {
			dictId,
			getdictBizListLoading,
			getDictList,
			dictBizListData,
			getI18n,
		}
	},
})
</script>