<template>
	<div class="check-btns">
		<div class="type-check">
			<slot name="type-check">
				<el-button
					:type="btnState == '1' ? 'primary' : 'default'"
					size="mini"
					@click="checkType(1)"
					>图表</el-button
				>
				<el-button
					:type="btnState == '2' ? 'primary' : 'default'"
					size="mini"
					@click="checkType(2)"
					>列表</el-button
				>
			</slot>
		</div>
		<div class="search-box">
			<slot name="search-common">
				<el-input
					style="cursor: pointer"
					placeholder="请输入内容"
					size="mini"
					clearable
					v-model="searchVal"
					suffix-icon="el-icon-search"
					class="input-with-select"
					@change="searchEquipList()"
				>
					<el-select
						v-model="selectItem"
						class="select02"
						slot="prepend"
						placeholder="请选择"
						@change="selClear()"
					>
						<el-option label="设备ID" value="1"></el-option>
						<el-option label="设备名" value="2"></el-option>
					</el-select>
				</el-input>
				<el-select
					v-model="is_online"
					class="select01"
					clearable
					size="mini"
					placeholder="请选择在线状态"
					@change="isOnlineSelect()"
				>
					<el-option label="全部" value=""></el-option>
					<el-option label="在线" value="1"></el-option>
					<el-option label="离线" value="0"></el-option>
				</el-select>
			</slot>
			<slot name="search-box"></slot>
		</div>
	</div>
</template>

<script>
export default {
	data() {
		return {
			selectItem: '1', //1设备号，2用户名
			searchVal: '',
			f_id: '',
			ename: '',
			is_online: null,
			btnState: this.displayType
		}
	},
	props: {
		displayType: {
			type: String
		}
	},
	methods: {
		checkType(i) {
			this.btnState = i
			this.$emit('fun', this.btnState)
		},
		// 搜索组合数据
		searchEquipList() {
			if (this.selectItem == 1) {
				this.f_id = this.searchVal
			} else if (this.selectItem == 2) {
				this.ename = this.searchVal
			}
			this.$emit('fun2', { f_id: this.f_id, ename: this.ename })
		},
		selClear() {
			if (this.searchVal) {
				this.searchVal = ''
				this.f_id = ''
				this.ename = ''
				this.$emit('fun2', { f_id: this.f_id, ename: this.ename })
			}
		},
		isOnlineSelect() {
			this.$emit('fun3', this.is_online)
		}
	}
}
</script>

<style lang='less' scoped>
.check-btns {
	display: flex;
	justify-content: space-between;
	margin-bottom: 20px;
	align-items: center;
	.search-box {
		text-align: right;
		.el-input {
			width: 400px;
			vertical-align: middle;
		}
		.select01 {
			width: 200px;
			vertical-align: middle;
		}
		/deep/.select02 {
			width: 86px;
		}
		.input-with-select {
			width: 260px;
		}
	}
}
</style>