<template>
	<div class="depth-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"
				:disabled="modelValue === v.value"
			/>
		</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">
	.depth-select {
		&:deep(.el-select) {
			--el-input-text-color: #000;
			--el-select-input-font-size: 1.2rem;
			.el-select__wrapper {
				font-size: 1.2rem;
				min-height: 0;
				height: 2.8rem;
				padding: 0 0.8rem;
			}
			.el-select__selected-item,
			.el-select__input-wrapper,
			.el-select__placeholder {
				line-height: normal;
			}
			.el-select__input {
				height: 2.4rem;
			}
		}
	}
	.el-popper {
		.el-select-dropdown {
			li {
				padding-left: 0.8rem;
				height: 3rem;
				line-height: 3rem;
				font-size: 1.2rem;
				color: #000;
				font-weight: 400;
				&.is-disabled {
					color: #909399;
				}
			}
		}
	}
</style>
