<template>
   <u-popup :show="isShow" @close="close" :closeOnClickOverlay="false">	
		<view class="container">
			<view class="search">
				<u-row>
					<u-col :span="2" v-if="multiple">
						<view class="all-choosed">
							<image
								@click="handleChooseAll"
								:src="allChecked?'/static/icon/choosed.png':'/static/icon/nochoose.png'" 
								class="choosed-image">
							</image>
							全选
						</view>
					</u-col>
					<u-col :span="!multiple?12:10">
						<u-search
							v-model="search.text"
							placeholder="关键字搜索" 
							@search="handleSearch"
							@custom="handleSearch"
						>
						</u-search>
					</u-col>
				</u-row>

			</view>
			<view class="last">
				<u-button type="primary" :plain="true" :disabled="page==1" @click="handleLast">
					<u-icon name="arrow-up" color="#2979ff" size="28"></u-icon>
				</u-button>
			</view>
			<view class="list">
				<template v-for="(item,index) in showList">
					<view class="item" :key="index" 
						@click="handleClick(item)"
					>
						<image 
							v-if="multiple"
							:src="item.checked?'/static/icon/choosed.png':'/static/icon/nochoose.png'" 
							class="choosed-image">
						</image>
						<view>
							<view class="item-value"
								:class="{
									'is-disabled': renderItem(item,'disabled')
								}"
							>
								{{item[objMap.label]}}<text v-if="hasTip && !isNull(renderItem(item,'tip'))">{{renderItem(item,'tip')}}</text>
							</view>
						</view>
						
					</view>
				</template>
				
				<view class="empty" v-if="showList.length==0">暂无数据</view>
			</view>
			<view class="next">
				<u-button type="primary" :plain="true" :disabled="page==totalPage" @click="handleNext">
					<u-icon name="arrow-down" color="#2979ff" size="28"></u-icon>
				</u-button>
			</view>
			
			<view class="page-footer" v-if="multiple">
				<u-row style="">
					<u-col :span="6">
						<u-button type="info" shape="" :hairline="false" :custom-style="{
								width: '100%',
								borderRadius: '0',
								background: '#FFF',
								height: '100rpx',
								fontSize: '32rpx',
								fontWeight: '500',
							  }" @click="handleClose">取消
						</u-button>
					</u-col>	
					<u-col :span="6">
						<u-button type="primary" shape="" :hairline="false" :custom-style="{
								width: '100%',
								borderRadius: '0',
								height: '100rpx',
								fontSize: '32rpx',
								fontWeight: '500',
								background:'linear-gradient(to right, #41B5FF, #4573FC)',
							  }" @click="handleSubmit">确认
						</u-button>
					</u-col>
				</u-row>
				
			</view>
		</view>
	</u-popup>
</template>

<script>
import {isArray,clone } from 'lodash'
import {getImages} from '@/plugins/images'

export default {
	props: {
		//单页展示数据量
		size: {
			type: Number,
			default: 30
		},
		// 多选
		multiple: {
			type: Boolean,
			default: false
		},
		dataList: {
			type: Array,
			default: () => []
		},
		objMap: {
			type: Object,
			default: () => {
				return {
					label: 'label',
					value: 'value',
				}
			}
		},
		hasTip: {
			type: Boolean,
			default: false
		},
	},
    data() {
        return {
			allChecked: false,
           isShow: false,
		   loadding: false,
		   
		   page: 1,
		   total: 0,
		   totalPage: 0,
		   search: {
			   text: ''
		   },
		   
		   orginList: [],
		   resultList: [], //搜索结果集合
		   showList: [], 

        }
    },
	mounted() {
		
	},
	
	watch: {
		dataList: {
			immediate: true,
			deep: true,
			handler(newVal) {
				this.getData()
			}
		}
	},
	
    methods: {
		
		show() {
			this.isShow= true;
		},
		handleChooseAll() {
			this.allChecked = !this.allChecked
			this.resultList.map(e => {
				if(!this.renderItem(e,'disabled')) e.checked = this.allChecked
				
			}) 
		},
		
		
		computeCheckedData() {
			let allLength = this.resultList.filter((e) => !this.renderItem(e,'disabled')).length
			let checedLength = this.resultList.filter((e) => e.checked).length
			if(allLength == checedLength) {
				this.allChecked = true
			} else {
				this.allChecked = false
			}
		},
			
		getChoosed() {
			let data = this.orginList.filter((e) => e.checked)
			this.$emit('confirm',data)
		},	
		
		handleClick(e) {
			if(this.renderItem(e,'disabled')) return
			if(this.multiple) {
				e.checked=!e.checked
				this.computeCheckedData()	
			} else {
				console.log(e,'e')
				this.$emit('confirm',e);
				this.isShow = false;
			}			
		},
		
		handleSearch() {
			this.page = 1
			if(this.search.text) {
				this.resultList = this.orginList.filter((e) => e[this.objMap.label].includes(this.search.text))
			} else {
				this.resultList = clone(this.orginList)
			}
			this.computeCheckedData()
			this.totalPage = Math.ceil(this.resultList.length / this.size)
			this.handlePageData()	
		},
		//上一页
		handleLast() {
			if(this.page != 1) this.page -= 1;
			this.handlePageData()
		},
		//下一页
		handleNext() {
			if(this.page != this.totalPage) this.page += 1;	
			this.handlePageData()
		},
		//处理分页数据
		handlePageData() {
			let index = (this.page - 1) * this.size
			this.showList = clone(this.resultList).splice(index,this.size)
		},
        getData() {
			
			let that = this;
			if(isArray(this.dataList)) {
				this.dataList.forEach((item) => {			
					let obj = {
						...item,
						checked: false,
					}			
					this.orginList.push(obj);
				})				
				this.$emit('onDataLoad',this.orginList)
				this.handleSearch()
				
			} else {
				this.orginList = [];
				this.showList = [];
				this.page = 1
				this.totalPage = 0
			}
			
	   },
	   
		close() {
			this.isShow = false
			this.allChecked = true
			this.handleChooseAll()	
		},
		
		handleClose() {
			 this.close()	
		},
		handleSubmit() {
			if(this.multiple) this.getChoosed()
			this.close()
		},

    }

}
</script>

<style lang="scss" scoped>
	
	/* 内容satrt */
	.container {
		background: #fff;
		.search {
			padding: 20rpx 40rpx 20rpx 40rpx;
			
			.all-choosed {
				display: flex;
				justify-content: flex-start;
				align-items: center;
				font-size: 24rpx;
			}
		}
		.list {
			height: calc(100vh - 540rpx);
			padding: 0 20rpx;
			overflow-y: auto;
			
			.item {
				padding: 20rpx 20rpx;
				display: flex;
				align-items: center;				
				 
				.item-value {
					font-size: 24rpx;
				}
				.item-label {
					font-size: 24rpx;
				}
				.is-disabled {
					color: #909193;
				}
				// border-bottom: 2rpx solid #ddd;
			}
			.empty {
				display: flex;
				align-items: center;
				justify-content: center;
				height: calc(100vh - 400rpx);
				color: #909193;
				min-height: 800rpx;
			}
		}
		
		.last,.next {
			margin: 10rpx 40rpx;
			display: flex;
			justify-content: center;
			align-items: center;
		}
		
		.page-footer {
			// position: absolute;
			width: 100%;
			left: 0;
			bottom: 0;
		}
	
	}
	
	/* 内容end */

	
	.choosed-image {
		width: 40rpx;
		height: 40rpx;
		margin-right: 10rpx;
	}
</style>
