<template>
	<div class="my-select">
		<el-select :model-value="modelValue" @change="onChange" v-bind="attrs">
			<el-option v-for="v in list" :key="v.value" :label="v.label" :value="v.value" >
				<slot name="option" :item="v">
					<!-- 默认内容 -->
					<span>{{ v.label }}</span>
				</slot>
			</el-option>
		</el-select>
	</div>
</template>

<script setup lang="ts">
	import { ref, useAttrs, watch } from 'vue'
	const props = defineProps({
		modelValue: { required: true },
		list: { default: () => [], type: [Array, Object] }
	})
	const attrs = useAttrs()
	const emit = defineEmits(['update:modelValue', 'change'])
	const onChange = (value) => {
		emit('update:modelValue', value)
		emit('change', value)
	}
</script>
<style scoped lang="less">
	.my-select {
		&:deep(.el-select) {
			--el-select-input-font-size: 12px;
			.el-select__wrapper {
				font-size: 12px;
				min-height: 0;
				height: 28px;
				padding: 0 8px;
			}
			.el-select__selected-item,
			.el-select__input-wrapper,
			.el-select__placeholder {
				line-height: normal;
			}
			.el-select__input {
				height: 24px;
			}
		}
	}
	.el-popper {
		.el-select-dropdown {
			li {
				padding-left: 8px;
				padding-right: 8px;
				height: 30px;
				line-height: 30px;
				font-size: 12px;
			}
		}
	}
</style>
