<template>
	<view class="content">
		
		<view class="select-all" @tap="selectPage()">
			<checkbox :value="isSelectAll"></checkbox>
			<text>全选</text>
		
		</view>
		<view style="flex: 1;width: 750upx;overflow: hidden;">
			<scroll-view enableBackToTop="true" scroll-y style="height: 100%;">
				<view class="check-cell" v-for="(item,index) in pageList" :key="index" >
					<div class="uni-list-cell uni-collapse">
						<div class="uni-list-cell-navigate" :class="cardShowList[index] ? ' uni-navigate-bottom' : 'uni-navigate-right'" @tap="isShowCard(index)">
							<view class="uni-flex" style="align-items: center;">
								<checkbox :value="item.USERTYPEID" color="#63B7F9" :checked="item.SELECTED" @tap.stop="selectAll(index)"/><text class="strong-text" @tap.stop="selectAll(index)">{{item.USERTYPENAME}}</text>
							</view>
						</div>
						<checkbox-group class="uni-collapse-content" :class="cardShowList[index]  ? 'uni-active' : ''" v-show="cardShowList[index] " @change="checkboxChange($event,index)">
							<view class="cell-body uni-flex" v-for="(u,s) in item.userList" :key="s">
								<checkbox :value="u.USER_ID" color="#63B7F9" :checked="u.SELECTED" :disabled="u.DISABLED===1"/><text>{{u.USER_NAME}}</text>
							</view>
						</checkbox-group>
					</div>
				</view>
			</scroll-view>
			
		</view>
		<view>
			<div class="rate-box">
				<div class="rate-gray" @click="showPopupBottom=true">{{readContent||'填写您的阅办意见'}}</div>
				<div class="btn" hover-class="btn-active" @tap="upReader">传阅</div>
				
			</div>
				<!-- 关联弹出框 -->
			<uni-popup :show="showPopupBottom" type="bottom" @hidePopup="hidePopup">
				<view class="pop-body">
					<textarea v-model="readContent" placeholder="填写您的阅办意见" auto-height :focus="showPopupBottom" class="comment-textarea" placeholder-style="color:#A3A6AC;"/>
					<div class="small-btn" hover-class="btn-active" @tap="showPopupBottom=false">确定</div>
				</view>
			</uni-popup> 
		</view>
	</view>
</template>

<script>
	import uniPopup from '@/components/uni-popup.vue'
	export default {
		data() {
			return {
				pageList:[],
				documentListType:'',
				documentId:'',
				cardShowList:[],
				selectAllList:[],
				showPopupBottom:false,
				isSelectAll:false,
				readContent:'',
				personList:[]
			}
		},
		components:{uniPopup},
		methods:{
			getList() {
				let _this = this
				
				_this.$request.$get('getDocumentPerson',{
				
					documentListType: this.documentListType,
					documentId: this.documentId

				}).then(res => {
					
					if(!res.ResultCode ||res.ResultCode!='100'){
						
						_this.pageList = []
					}else{
						_this.pageList  = res.Data.List
						_this.readContent = res.Data.SUGGESTION
						_this.personList =[]
						_this.pageList.forEach((n,i)=>{
							_this.cardShowList[i] = true
							n.SELECTED = false
							_this.selectAllList[i] = false
							_this.personList[i]=[]
							let selected =  n.userList.filter(s=>{
								if(s.SELECTED) {
									_this.personList[i].push(s.USER_ID)
								}
								return s.SELECTED==true
							})
							if(selected.length==n.userList.length) {
								_this.selectAllList[i] = true
								n.SELECTED = true
							}
							
						})
					
					}
					uni.hideLoading()
					
				})
			},
			hidePopup() {
				this.showPopupBottom = false
			},
			isShowCard(index) {
				let _this = this
				
				_this.cardShowList[index] = !_this.cardShowList[index]
				_this.$forceUpdate()
			},
			selectAll(index,signle) { 
				
				let _this = this
				let value = this.pageList[index].SELECTED =  !_this.selectAllList[index]
				let userList = _this.pageList[index].userList.filter(n=> n.DISABLED===0)
				if(value) {
					this.personList[index] = userList.map(n=>{return n.USER_ID})
				}else{
					this.personList[index] = null
				}
				userList.forEach(n=>{
					n.SELECTED = value
				})
				_this.selectAllList[index] = value
			},
			checkboxChange(e,index){
				console.log(e)
				let value = e.detail.value
				this.pageList[index].SELECTED = value.length == this.pageList[index].userList.length ? true :false
				this.personList[index] = value
				this.$forceUpdate()
			},
			selectPage(){
				let _this = this
				let value = this.isSelectAll = !this.isSelectAll 
				_this.selectAllList.map((n,i)=>{
					
					if(value != n){
						_this.selectAll(i,value)
					}
				})
			},
			upReader(){
				let _this = this 
				let readingIds = []
			
				this.personList.forEach(n=>{
					readingIds = [...readingIds,...n]
				})
				_this.$request.$post('documentCirculate',{
				
					suggestion: this.readContent,
					readingIds: readingIds.toString(),
					documentId: this.documentId
				}).then(res=>{
					if(res.ResultCode=='100') {
						uni.showToast({
							title:res.ResultDesc
						})
						_this.readContent = ''
						setTimeout(function(){
							uni.navigateBack({
								delta: 1
							})
							uni.$emit('docCirculate', true); // 通知详情页刷新
							
						},1000)
						
					}else{
						uni.showToast({
							title:res.ResultDesc,
							icon:'none'
						})
					}
				})
			}
		},
		onUnload() {
			this.$util.addUserBehavior()
		},
		onLoad(option) {
			uni.showLoading({
				title:'正在加载'
			})
			this.documentListType = option.type
			this.documentId = option.id
			this.getList()
		}
	}
</script>

<style scoped>

.content {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	height: 100%;
	width: 750upx;
	
}
.strong-text {
	font-weight: bolder;
}
.select-all {
	background-color: #fff;
	padding: 12upx 30upx;
}
.check-cell {
	background-color: #fff;
}
.check-cell {
	margin-top: 24upx;
}
.uni-collapse-content {
	box-sizing: border-box;
	padding-left: 30upx;
}
.cell-body {
	padding: 22upx 0;
	align-items: center;
	border-bottom: 2upx solid #EAEBF0;
}
.uni-list-cell:after {
	height: 0;
}
	.rate-box{
	/* 	position: fixed;
		bottom: 0;
		left: 0; */
		width: 100%;
		height: 110upx;
		display: flex;
		align-items: center;
		background-color: #fff;
		border-top: 1upx solid #eee;
		justify-content: space-evenly;
		margin-top: 24upx;
	}
	.rate-gray {
		width: 460upx;
		height: 70upx;
		line-height: 70upx;
		color: #A3A6AC;
		background-color: #F7F8FB;
		border-radius: 35upx;
		padding-left: 24upx;
		font-size: 26upx;
	}
	.rate-gray:before {
		content: '';
		width: 31upx;
		height: 30upx;
		background: url('../../static/images/publicity/tsjy_yj.png') no-repeat center;
		background-size: contain;
		display: inline-block;
		margin-right: 24upx;
	}
	
	span.ico-t-count {
		
		font-style: normal;
		color: #fff;
		border-radius: 18px;
		min-width: 8px;
		width: auto;
		height: auto;
		padding: 0upx 8upx;
		font-size: 20upx;
		line-height: 1.2;
		text-align: center;
		white-space: nowrap;
		background-color: #ed4d3e;
		position: absolute;
		right: -28upx;
		top: -12upx;
	}
	.pop-body {
		height: 220upx;
		padding: 32upx 24upx;
		display: flex;
		/* align-items: flex-end; */
		justify-content: space-between;
	}
	.comment-textarea {
		background-color: #F7F8FB;
		font-size: 26upx;
		border-radius: 6upx;
		padding: 16upx;
		min-height: 148upx;
		text-align: left;
		width: 520upx;
	}
	.btn {
		width: 176upx;
		height: 70upx;
		line-height: 70upx;
		text-align: center;
		font-size: 26upx;
		color: #fff;
		background-color: #4C98E8;
		border-radius: 35upx;
		
	}
	.small-btn {
		width: 120upx;
		height: 60upx;
		line-height: 60upx;
		text-align: center;
		font-size: 26upx;
		color: #fff;
		background-color: #4C98E8;
		border-radius: 30upx;
		margin-top: 110upx;
	}
	
	.btn:active {
		background-color: #a7c3e8;
	}
</style>
