<template>
	<div class="scTableSearch" v-if="fieldsShow">
		<div class="searchBody">
			<div class="searchBox searchConditionItem">
				<div class="leftBox">
					<el-radio-group v-model="params.type">
						<el-radio :label="item.prop" :size="size" v-for="(item,index) in fieldsList" :key="index">{{item.label}}</el-radio>
					</el-radio-group>
				</div>
				<div class="rightBox" @click="fieldsSwitch">
					<el-icon class="icon"><sc-icon-SwitchQuery /></el-icon>
					<span class="name">切换查询方式</span>
				</div>
			</div>
			<div class="searchBox searchTextItem">
				<el-input class="text" v-model="params.message" type="textarea" placeholder="请输入检索条件，用空格、换行区分"></el-input>
				<div class="operateBox">
					<el-button type="primary" :size="size" @click="save">批量查询</el-button>
					<el-button type="info" :size="size" @click="reset">重置</el-button>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
export default {
	name: "herderMultipleInput",
	props:{
		searchList:{
			type:[Object,Array],
		},
		fieldsShow:{
			type:Boolean,
			default:false
		}
	},
	watch:{
		searchList:{
			handler(val){
				let list = [];
				for(let i in val){
					list.push({prop:i,label:val[i]})
				}
				this.fieldsList = list;
				if(this.fieldsList && this.fieldsList.length>0){
					this.params.type = this.params.type===""?this.fieldsList[0].prop:this.params.type;
				}
			},
			immediate:true,
			deep:true
		},
	},
	data(){
		return{
			size:"small",
			fieldsList:[],
			params:{
				type:"",
				message:""
			},
			fieldsData:{}
		}
	},
	mounted() {

	},
	methods:{
		fieldsSwitch(){
			this.$emit('fieldsSwitch',false);
		},
		setData(){
			const str = this.params.message;
			if(str === ""){
				return []
			}
			const list = str.split(/\s+/);
			return list.filter(em=>em!=="");
		},
		save(){
			this.fieldsData[this.params.type] = {
				operator:"in",
				value:this.setData()
			}
			this.$emit('fieldsSearch',this.fieldsData)
		},
		reset(){
			this.params.message = "";
			if(this.fieldsList && this.fieldsList.length>0){
				this.fieldsList.forEach((item,index)=>{
					if(index===0){
						this.params.type = item.prop;
					}
					if(this.fieldsData[item.prop]){
						this.fieldsData[item.prop].value = [];
					}
				})
			}
			if(this.fieldsData[this.params.type]){
				this.fieldsData[this.params.type].value = [];
			}
			this.$emit('fieldsSearch',this.fieldsData);
		}
	}
}
</script>

<style scoped lang="scss">
.scTableSearch{
	width: 100%;
	margin-top: 0;
	.searchBody{
		width: 100%;
		padding: 5px 10px 10px 10px;
		display: flex;
		flex-direction: column;
		align-items: center;
		.searchBox{
			width: 100%;
		}
		.searchConditionItem{
			display: flex;
			align-items: center;
			margin-bottom: 5px;
			.leftBox{
				flex: 1;
			}
			.rightBox{
				flex-basis: 100px;
				display: flex;
				align-items: center;
				justify-content: flex-end;
				cursor: pointer;
				.icon{
					color: var(--el-color-primary);
				}
				.name{
					color: var(--el-color-primary);
					margin-left: 6px;
				}
			}
		}
		.searchTextItem{
			flex: 1;
			display: flex;
			align-items: center;
			border-radius: 4px;
			box-shadow: 0 0 0 1px var(--el-input-border-color, var(--el-border-color)) inset;
			padding: 1px;
			background: var(--el-color-white);
			.text{
				font-size: 12px;
				::v-deep .el-textarea__inner{
					box-shadow: none;
				}
			}
			.operateBox{
				padding: 10px;
				display: flex;
				align-items: center;
			}
		}
	}
}
</style>
