<template>
	<view class="hzIndex">
	<hzHeader title="区域选择"></hzHeader>
	<view class="hzContent" style="padding-top: 200upx;">
		<view class="saveBtn" @click="saveArea">保存</view>
		<view class="main">
			<view class="tab-boxs">
				<view class="tab-item" v-for="(item, index) in buildList" :key="index" :class="currentTabIndex == index ? 'active' : ''" @click="currentTabIndex = index">
					<view class="activeLine" v-if="currentTabIndex == index"></view>
					<view>{{item.ACCESSNAME}}</view>
				</view>
			</view>

			<!-- 未审批列表 -->
			<view class="list-box">
				<view v-for="(item, index) in buildList" :key="index" v-show="currentTabIndex == index">
					<uni-table ref="table" :border="false" type="selection" emptyText="暂无更多数据" @selection-change="selectionChange">
						<uni-tr>
							<uni-th width="150" align="left">区域</uni-th>
						</uni-tr>
						<uni-tr v-for="(items, indexs) in item.areaList" :key="indexs">
							<uni-td align="left">{{ items.ACCESSNAME}}</uni-td>
						</uni-tr>
					</uni-table>
				</view>
				
				
				
				<!-- <view class="detail" v-for="(item, index) in list" :key="index">
					<view class="detail_msg">
						<view class="info-item" @click="detail(item)">
							<text>办卡类型：</text>
							<text class="infoSpan">{{item.ACCESSNAME}}</text>
						</view>
					</view>
					
				</view> -->
			</view>
		</view>
	 </view>
	</view>
</template>

<script>
import uniCalendar from '@/components/uni-calendar/uni-calendar.vue';
import { getAccessControlList  } from '@/common/api.js';
import { callbackRequest, alertTip, getStorage,formatDate } from '@/common/util.js';
import loadMore from '@/components/loadMore.vue';
import datetimePicker from '@/components/dateTime.vue';
import contentNone from '@/components/contentNone.vue';
import UniPopup from "@/components/uni-popup/uni-popup.vue"
import xflSelect from '../../components/xfl-select/xfl-select1.vue'
export default {
	data() {
		return {
			formatDate: formatDate,
			userId: getStorage('userInfo').userId,
			currentTabIndex:0,
			list: [],
			buildList: [
				{id:'1',ACCESSNAME:'科技楼',areaList:[{ACCESSNAME:'科技楼测试区域1'},{ACCESSNAME:'科技楼测试区域2'},{ACCESSNAME:'科技楼测试区域3'}]},
				{id:'1',ACCESSNAME:'调度楼',areaList:[{ACCESSNAME:'调度楼测试区域1'},{ACCESSNAME:'调度楼测试区域2'},{ACCESSNAME:'调度楼测试区域3'}]},
				{id:'1',ACCESSNAME:'后勤楼',areaList:[{ACCESSNAME:'后勤楼测试区域1'},{ACCESSNAME:'后勤楼测试区域2'},{ACCESSNAME:'后勤楼测试区域3'}]},
			],
			examineBatch:'',
			chosenType:'',
			chosenAreaList:[]
		};
	},
	components: {
		loadMore,
		contentNone,
		UniPopup,
		xflSelect 
	},
	watch: {
		currentTabIndex: function(newVal, oldVal) {
			this.currentTabIndex = newVal;
			// if (this.currentTabIndex==0) {
				
			// }else if (this.currentTabIndex==1) {
				
			// }
			// this.getExaminePage();
		}
		
	},
	onLoad(options) {
		this.selectedIndexs = []
		
		this.chosenType = options.chosenType || 0;
		this.currentTabIndex = options.currentTabIndex || 0;
		this.examineBatch = options.examineBatch || "1";
	},
	onShow() {
		this.getAccessControlList();
	},
	methods: {
		getAccessControlList() {
			var data = {};
				data = { 
					userId: this.userId,
					// examineBatch:this.examineBatch,
					// examineState:'0',
					// type:"1"
					// orgId:getStorage('userInfo').department_id
					};
			console.log(data)
			let params = {
				method:getAccessControlList,
				data: data
			};
			callbackRequest(params).then(res => {
				if (res.data.returnCode == 1) {
					let result = res.data.returnData||[];
					this.buildList = result
					console.log(result)
					// this.list = result;
				} else {
					alertTip(res.data.returnMsg);
				}
			});
		},
		getUserPermissions(code) {
			let that = this;
			// if (!that.userId) {
			// 	return;
			// }
			let userId= getStorage('userInfo').userId;
			callbackRequestNoLoading({ method: getUserPermission3, data: { userId: userId,parentCode:code } }).then(res => {
				if (res.data.returnCode == 1) {
					that.permissions = res.data.returnData;
				} else {
					console.log('获取权限失败');
				}
			});
		},
		selectionChange(e) {
			// console.log(this.currentTabIndex)
			// console.log(e.detail.index)
			let arrList = []
			let arrIdsList = []
			let selectedIndexs = [] // 选择的下标数组
			selectedIndexs = e.detail.index
			// 将数组中的值，作为table表格数组的下标来获取对应的当前行数据
			selectedIndexs.map(i => {
				arrList.push(this.buildList[this.currentTabIndex].areaList[i].ACCESSNAME)
				arrIdsList.push(this.buildList[this.currentTabIndex].areaList[i].ACCESSID)
			})
			// console.log(arrList)
			// console.log(arrIdsList)
			let obj = {
				addressId:this.buildList[this.currentTabIndex].ACCESSID,
				address:this.buildList[this.currentTabIndex].ACCESSNAME,
				area:arrList.join(','),
				areaIds:arrIdsList.join(','),
			}
			// console.log(obj)
			this.chosenAreaList[this.currentTabIndex] = obj
		},
		saveArea() {
			let arr = []
			this.chosenAreaList.forEach(item=>{
				if(item.area!=''){
					arr.push(item)
				}
			})
			console.log(arr)
			let pages = getCurrentPages(); //获取所有页面栈实例列表
			let nowPage = pages[pages.length - 1]; //当前页页面实例
			let prevPage = pages[pages.length - 2]; //上一页页面实例
			if(this.chosenType==1){
				prevPage.$vm.areaData0 = arr;
			}
			if(this.chosenType==2){
				prevPage.$vm.areaData1 = arr;
			}
			uni.navigateBack({   // 返回上一页面
				delta: 1   // 返回的页面数
			});
		},

	},
	onReachBottom() {
		// if(this.currentTabIndex==0){
	
		// }else{

		// }
		
	}
};
</script>

<style lang="scss">
@import '@/static/css/common.scss';
page {
	// background: #f8f8f8;
}
 
 
.saveBtn{
	width: 110upx;
	height: 70upx;
	font-size: 30upx;
	line-height: 70upx;
	text-align: center;
	color: #fff;
	background: linear-gradient( 90deg, #50CBA1 0%, #06AEA6 100%), #C1EFEA;
	border-radius: 12px;
	position: absolute;
	top: 200upx;right: 40upx;
	
}
.main {
	position: absolute;
	top: 280upx;
	width: 100%;
	z-index: 10;
	.tab-boxs {
		width: 25%;
		// min-height: 80vh;
		position: absolute;
		top: 0;
		left: 0;
		padding-top: 50upx;
		.tab-item {
			height: 100upx;
			width: 100%;
			font-size: 30upx;
			margin: 40upx 0;
			display: flex;
			font-size: 30upx;
			justify-content: center;
			align-items: center;
		}
		.active {
			background-color: #DFE7F5;
			color: #333;
			border-top-right-radius: 100upx;
			border-bottom-right-radius: 100upx;
			font-weight: bold;
			
		}
		.activeLine{
			background: linear-gradient( 90deg, #50CBA1 0%, #06AEA6 100%), #5685F2;
			border-radius: 20upx;
			margin-right: 10upx;
			// float: left;
			width: 10upx;
			height: 30upx;
		}
	}

	.list-box {
		width: 70%;
		min-height: 80vh;;
		margin-top: 20upx;
		background: #fff;
		border-radius: 20upx;
		position: absolute;
		padding: 20upx;
		padding-top: 40upx;
		top: 0;
		right: 20upx;
		
		.detail{
			// height: 400upx;
		}
		 
	}
}

#addbtn {
	height: 120upx;
	background-color: #ffffff;
	padding: 30upx;
	border-radius: 30upx;
	color: #333333;
	border-bottom: 0.033333rem solid #eee;
	align-items: center;
	position: relative;
	margin-top: 20upx;
}
.addbtn view text:nth-child(1) {
	font-size: 32upx;
	margin-left: 220upx;
	color: #00c277;
}
.addbtn view text:nth-child(2) {
	font-size: 32upx;
	margin-left: 180upx;
	color: #00c277;
}
.tips {
	font-size: 22upx;
	// margin-left: 80upx;
	margin-top: 20upx;
}
uni-radio .uni-radio-input {
    -webkit-appearance: none;
    appearance: none;
    margin-right: 5px;
    outline: 0;
    border: 1px solid #d1d1d1;
    background-color: #fff;
    border-radius: 50%;
    width: 18px!important;
    height: 18px!important;
    position: relative;
}
</style>
