<!-- 
    filename: SearchBar.vue
    author: liubin
    date: 2023-11-23 14:01:17
    description: 
-->

<template>
	<div class="search-bar">
		<div class="vertical-blue-line"></div>
		<el-form
			:inline="true"
			ref="search-bar__form"
			:model="form"
			class="search-bar__form">
			<el-form-item :label="'产线'" prop="productionLineId">
				<el-select
					size="small"
					placeholder="请选择产线"
					clearable 
					filterable
					@change="getEquipmentByLineId"
					v-model="form.productionLineId">
					<el-option
						v-for="item in listLine"
						:key="item.id"
						:label="item.name"
						:value="item.id"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item :label="'设备'" prop="equipmentId">
				<el-select
					size="small"
					placeholder="请选择设备"
					clearable 
					filterable
					v-model="form.equipmentId">
					<el-option
						v-for="item in listEq"
						:key="item.id"
						:label="item.name"
						:value="item.id"></el-option>
				</el-select>
			</el-form-item>
		</el-form>
		<el-button type="primary" @click="handleSearch" size="small">
			查询
		</el-button>
	</div>
</template>

<script>
export default {
	name: 'SearchBar',
	model: {
		prop: 'value',
		event: 'change',
	},
	props: {
		value: {
			type: Object,
			default: () => {},
		},
	},
	data() {
		return {
			listLine: [],
			listEq: [],
		};
	},
	computed: {
		form: {
			set(val) {
				this.emit(val);
			},
			get() {
				return this.value;
			},
		},
	},
	mounted() {
		this.getLine();
	},
	methods: {
		emit(newValue) {
			debugger;
			this.$emit('update', { ...this.form, ...newValue });
		},
		async getLine() {
			const { data, code } = await this.$axios({
				url: '/base/core-production-line/listAll',
			});
			if (code == 0) {
				this.listLine = data;
				return;
			}
			this.listLine.splice(0);
		},
		async getEquipmentByLineId(id) {
			const { data, code } = await this.$axios({
				url: '/base/core-equipment/listByLine',
				params: {
					id,
				},
			});
			if (code == 0) {
				this.listEq = data;
				return;
			}
			this.listEq.splice(0);
		},
		handleSearch() {
			this.$emit('action', {
				action: 'search',
				payload: this.form,
			});
		},
	},
};
</script>

<style scoped lang="scss">
.search-bar {
	padding: 12px 0;
	font-size: 16px;
	position: relative;
	display: flex;
	align-items: center;
	gap: 12px;

	:deep(.el-form-item) {
		margin-bottom: 0 !important;
		margin-right: 0;

		&:not(:last-child) {
			margin-right: 18px;
		}
	}
}

.vertical-blue-line {
	width: 4px;
	height: 18px;
	background: #0b58ff;
	border-radius: 2px;
}
</style>
