<style lang='scss' scoped>
	.pickerGroup-list-picker{
		background-color: #fff;
		display: flex;
		box-shadow: 0px 2px 7px 0px rgba(0, 0, 0, 0.08);
		&-left{
			border-right: 1px solid #eee;
		}
		&-left,&-right{
			width: 50%;
			display: flex;
			justify-content: center;
			align-items: center;
			padding: 26rpx 0;
		}
	}
</style>
<template>
	<view class="pickerGroup">
		<view class="pickerGroup-list-picker">
			<view class="pickerGroup-list-picker-left" @click="leftSelectShow = true">
				<text>{{getLeftSelectTextCmp}}</text>
				<u-icon name="arrow-down" class="pl10" color="#c0c4cc"></u-icon>
			</view>
			<picker v-if="rightSelectType=='date'" class="pickerGroup-list-picker-right" 
				mode="date" :fields="dateTypeMode" :value="dateVal" @change="bindDateChange">
			    <view class="">
					<text>{{getRightSelectTextCmp}}</text>
					<u-icon name="arrow-down" class="pl10" color="#c0c4cc"></u-icon>
				</view>
			</picker>
			<view v-else class="pickerGroup-list-picker-right" @click="rightSelectShow = true">
				<text>{{getRightSelectTextCmp}}</text>
				<u-icon name="arrow-down" class="pl10" color="#c0c4cc"></u-icon>
			</view>
		</view>
		<u-select
			v-model="leftSelectShow"
			:list="leftSelectList"
			@confirm="onLeftSelectConfirmFn"
			:value-name="leftValueName"
			:label-name="leftLabelName"
			:child-name="leftChildName"
			:mode="leftMode"
		></u-select>
		<u-select
			v-model="rightSelectShow"
			:list="rightSelectList"
			@confirm="onRightSelectConfirmFn"
			:value-name="rightValueName"
			:label-name="rightLabelName"
			:child-name="rightChildName"
			:mode="rightMode"
		></u-select>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				leftSelectValue:"",
				leftSelectShow: false, // 报警预警弹框
				
				rightSelectValue:"",
				rightSelectShow: false, // 状态弹框
				
				dateVal:"",
				
				leftSelectLabel: "全部",
				rightSelectLabel: "",
			}
		},
		watch:{
			rightValue(newVal){
				this.dateVal = this.rightValue;
			}
		},
		computed:{
			getLeftSelectTextCmp(){
				// let obj = this.leftSelectList.find((item)=>{
				// 	return item[this.leftValueName] === this.leftSelectValue
				// });
				// if (!!obj) {
				// 	return obj[this.leftLabelName];
				// } else{
				// 	return "-";
				// }
				return this.leftSelectLabel
			},
			getRightSelectTextCmp(){
				if(this.rightSelectType==="date"){
					if (!!this.dateVal) {
						return this.dateVal
					} else{
						return "-"
					}
				}else{
					// let obj = this.rightSelectList.find((item)=>{
					// 	return item[this.rightValueName] === this.rightSelectValue
					// });
					// if (!!obj) {
					// 	return obj[this.rightLabelName];
					// } else{
					// 	return "-";
					// }
					return this.rightSelectLabel
				}
			}
		},
		props:{
			rightSelectType:{
				type:String,
				default:""
			},
			dateTypeMode :{
				type:String,
				default:"month"
			},
			leftSelectList: {
				type:Array,
				default () {
					return []
				},
			},
			rightSelectList:{
				type:Array,
				default:()=>{
					return []
				},
			},
			// 左边默认值
			leftValue:{
				type:String,
				default:""
			},
			// 右边默认值
			rightValue:{
				type:String,
				default:""
			},
			// 自定义属性值
			leftValueName: {
				type: String,
				default: "value"
			},
			leftLabelName: {
				type: String,
				default: "label"
			},
			leftChildName: {
				type: String,
				default: "children"
			},
			rightValueName: {
				type: String,
				default: "value"
			},
			rightLabelName: {
				type: String,
				default: "label"
			},
			rightChildName: {
				type: String,
				default: "children"
			},
			// 左、右侧下拉模式
			leftMode: {
				type: String,
				default: "single-column"
			},
			rightMode: {
				type: String,
				default: "single-column"
			},
		},
		created() {
			this.leftSelectValue = this.leftValue;
			this.rightSelectValue = this.rightValue;
			this.dateVal = this.rightValue;
		},
		methods: {
			bindDateChange(e){
				this.dateVal = e.detail.value;
				// this.rightValue = e.detail.value;
				this.$emit("onDateChange",e.detail.value);
			},
			onRightSelectConfirmFn(arr){
				// this.rightSelectValue = arr[0].value;
				this.rightSelectLabel = arr[arr.length - 1].label;
				this.$emit("onRightConfirm",arr[arr.length - 1].value);
			},
			// 
			onLeftSelectConfirmFn(arr){
				// this.leftSelectValue = arr[0].value;
				this.leftSelectLabel = arr[arr.length - 1].label;
				this.$emit("onLeftConfirm",arr[arr.length - 1].value);
			},
			getLabel(arr) {
				let label = '';
				for (let item of arr) {
					label += item.label
				}
				return label
			}
		}
	}
</script>
