<style lang='scss' scoped>
	.headerSelect-list-picker{
		background-color: #fff;
		display: flex;
		box-shadow: 0px 2px 7px 0px rgba(0, 0, 0, 0.08);
		&-alarm{
			border-right: 1px solid #eee;
		}
		&-alarm,&-state{
			width: 50%;
			display: flex;
			justify-content: center;
			align-items: center;
			padding: 26rpx 0;
		}
	}
</style>
<template>
	<view class="headerSelect">
		<view class="headerSelect-list-picker">
			<view class="headerSelect-list-picker-alarm" @click="alarmSelectShow = true">
				<text>{{(alarmSelectValue) =='WARNING'?"预警":(alarmSelectValue)=='ALARM'?"报警":"-"}}</text>
				<u-icon name="arrow-down" class="pl10" color="#c0c4cc"></u-icon>
			</view>
			<view class="headerSelect-list-picker-state" @click="stateSelectShow = true">
				<text>{{stateSelectValue=="UNPROCESS"?"未处理":stateSelectValue=="PROCESSED"?"已处理":"状态"}}</text>
				<u-icon name="arrow-down" class="pl10" color="#c0c4cc"></u-icon>
			</view>
		</view>
		<u-select v-model="alarmSelectShow" :list="alarmSelectList" @confirm="onAlarmConfirmFn"></u-select>
		<u-select v-model="stateSelectShow" :list="stateSelectList" @confirm="onStateConfirmFn"></u-select>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				alarmSelectValue:"",
				alarmSelectShow: false, // 报警预警弹框
				alarmSelectList: [
					{
						value: "ALARM",
						label: '报警'
					},
					{
						value: "WARNING",
						label: '预警'
					}
				],
				stateSelectValue:"",
				stateSelectShow: false, // 状态弹框
				stateSelectList: [
					{
						value: "",
						label: '全部'
					},
					{
						value: "UNPROCESS",
						label: '未处理'
					},
					{
						value: "PROCESSED",
						label: '已处理'
					}
				],
			}
		},
		props:{
			alarmValue:{
				type:String,
				default:"ALARM"
			},
			stateValue:{
				type:String,
				default:""
			},
		},
		created() {
			console.log(this.alarmValue,this.stateValue);
			this.alarmSelectValue = this.alarmValue;
			this.stateSelectValue = this.stateValue;
		},
		methods: {
			// 状态选择
			onStateConfirmFn(arr){
				this.stateSelectValue = arr[0].value;
				this.$emit("onStateConfirm",arr[0].value);
			},
			// 报警预警选择
			onAlarmConfirmFn(arr){
				this.alarmSelectValue = arr[0].value;
				this.$emit("onAlarmConfirm",arr[0].value);
			},
		}
	}
</script>
