<template>
	<u-popup v-model="isShow" class="uni-multiple-picker" @close="cancel" mode="bottom">
		<view class="u-multiple-picker-header flex justify_between align_center">
			<text class="multiple-picker-btn" @click="cancel">取消</text>
			<text class="multiple-picker-btn color-blue" @click="confirm">确定</text>
		</view>
		<u-row class="choose-info">
			<u-col :span="3">当前已选:</u-col>
			<u-col :span="9" class="choose-info-item">{{nowChooseItem}}</u-col>
		</u-row>
		<scroll-view class="picker-content" scroll-y>
			<view class="picker-main">
				<view class="picker-main-item" v-for="(item, index) in listData" :key="item.id" @click="chooseItem(index)">
					<view class="item-name">{{item.name}}</view>
					<u-icon v-show="item.checked==true" class="item-icon" name="checkbox-mark" color="#2979ff" size="28"></u-icon>
				</view>
				<view v-if="listData && listData.length == 0">
					<u-empty text="数据为空" mode="list" :img-width="200" :margin-top="-60"></u-empty>
				</view>
			</view>
		</scroll-view>
	</u-popup>
</template>

<script>
	export default{
		props: {
			show: {
				type: Boolean,
				default: false
			},
			dataList: {
				type: Array,
				default: ()=>{
					return []
				}
			}
		},
		watch: {
			show (newValue, oldValue) {
				this.isShow = newValue
			},
			dataList (newValue, oldValue) {
				console.log(newValue)
				this.listData = newValue
			},
		},
		computed: {
			nowChooseItem: function() {
				let str = ''
				this.listData.map(item => {
					if(item.checked){
						str += item.name + ',';
					}
				})
				str = str == '' ? '' : str.substring(0,str.length - 1)
				return str
			},
			nowChooseItemArr: function() {
				let arr = []
				this.listData.map(item => {
					if(item.checked){
						arr.push({id: item.id, name: item.name})
					}
				})
				return arr
			},
		},
		data(){
			return{
				isShow: this.show,
				listData: this.dataList || [],
			}
		},
		methods: {
			//  选择
			chooseItem(ind){
				this.$set(this.listData[ind], 'checked', !this.listData[ind].checked)
			},
			//  确定
			confirm(){
				this.$emit('confirm', this.nowChooseItemArr)
			},
			//  取消
			cancel(){
				this.$emit('cancel')
			},
		}
	}
</script>

<style lang="scss" scoped>
	.uni-multiple-picker{
		.u-multiple-picker-header{
			padding: 20upx 30upx;
			position: relative;
			display: flex;
			justify-content: space-between;
			.multiple-picker-btn{
				color: rgb(96, 98, 102);
			}
			.color-blue{
				color: #2979ff;
			}
		}
		.u-multiple-picker-header:after{
			content: "";
			position: absolute;
			border-bottom: 1px solid #eaeef1;
			-webkit-transform: scaleY(.5);
			transform: scaleY(.5);
			bottom: 0;
			right: 0;
			left: 0;
		}
		.choose-info{
			padding: 14upx 30upx 14upx;
			color: rgb(96, 98, 102);
			.choose-info-item{
				color: #2979ff;
			}
		}
		.picker-content{
			height: 300upx;
			padding: 6upx 0 20upx;
			position: relative;
			.picker-main{
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%,-50%);
				width: 100%;
				max-height: 300upx;
				.picker-main-item{
					position: relative;
					padding: 0 30upx;
					.item-name{
						padding: 14upx 0;
						text-align: center;
						// border-bottom: 1upx dashed #efefef;
					}
					.item-icon{
						position: absolute;
						right: 100upx;
						top: 19upx;
					}
				}
			}
		}
	}
</style>