<template>
	<div class="sc-select">
		<div v-if="initloading" class="sc-select-loading">
			<el-icon class="is-loading"><el-icon-loading /></el-icon>
		</div>
		<el-select
			v-bind="$attrs"
			:loading="loading"
			@visible-change="visibleChange"
			:value-on-clear="null"
		>
			<el-option
				v-for="item in options"
				:key="item[id]"
				:label="item[name]"
				:value="objValueType ? item : item[id]"
			>
				<slot name="option" :data="item"></slot>
			</el-option>
		</el-select>
	</div>
</template>

<script>
export default {
	props: {
		apiObj: { type: Object, default: () => {} },
		objValueType: { type: Boolean, default: false },
		params: { type: Object, default: () => ({}) },
		id: { type: String, default: "id" },
		name: { type: String, default: "name" },
		showName: { type: String, default: null },
	},
	data() {
		return {
			loading: false,
			options: [],
			initloading: false,
		};
	},
	created() {
		//如果有默认值就去请求接口获取options
		if (this.hasValue()) {
			this.initloading = true;
			this.getRemoteData();
		}
	},
	methods: {
		//选项显示隐藏事件
		visibleChange(ispoen) {
			if (ispoen && this.options.length == 0 && this.apiObj) {
				this.getRemoteData();
			}
		},
		//获取数据
		async getRemoteData() {
			this.loading = true;
			var query = Object.assign({ page: 0 }, this.params);
			var res = await this.apiObj.req(query);
			this.loading = false;
			this.initloading = false;
			if (
				this.$attrs.modelValue !== null &&
				!res.some(
					(option) => option[this.id] === this.$attrs.modelValue
				)
			) {
				this.options = [
					{
						[this.id]: this.$attrs.modelValue,
						[this.name]: this.showName,
					},
					...res,
				];
			} else {
				this.options = res;
			}
		},
		//判断是否有回显默认值
		hasValue() {
			if (
				Array.isArray(this.$attrs.modelValue) &&
				this.$attrs.modelValue.length <= 0
			) {
				return false;
			} else if (this.$attrs.modelValue) {
				return true;
			} else {
				return false;
			}
		},
	},
};
</script>

<style scoped>
.sc-select {
	display: inline-block;
	position: relative;
	min-width: 120px;
}
.sc-select-loading {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: #fff;
	z-index: 100;
	border-radius: 5px;
	border: 1px solid #ebeef5;
	display: flex;
	align-items: center;
	padding-left: 10px;
}
.sc-select-loading i {
	font-size: 14px;
}

.dark .sc-select-loading {
	background: var(--el-bg-color-overlay);
	border-color: var(--el-border-color-light);
}
</style>
