<template>
	<view class="kp-details">
		<!-- 考评项 -->
		<view class="kp-tabsBox">
			<view class="kp-tabs">
				<view @click="onTab(index)" :class="activeIndex == index ? 'active':''" v-for="(item,index) in items" :key="item.id">
					<view>{{item.name}}</view>
					<view>({{item.assessTargetNum}}项)</view>
				</view>
			</view>
			<view class="kp-items">
				<view v-for="(item,index) in childItems" :key="item.id" @click="chooseItem(item,index)" class="checkbox-item">
					<view class="item-name">{{item.name}}</view>
					<view>
						<checkbox :value="item.id" :checked="item.checked" />
					</view>
				</view>
			</view>
		</view>
		<!-- 选择按钮 -->
		<view class="kp-ok" @click="kpOk">
			确定选择
		</view>
	</view>
</template>

<script>
	import {findAllItem} from '@/api/assess'
	export default{
		data(){
			return{
				items: [],
				activeIndex:0,
				childItems:[],
				checkedList:[]
			}
		},
		onLoad(opts) {
			this.checkedList = JSON.parse(opts.item) || []
			findAllItem().then(res=>{
				if(res.status == 200){
					this.items = res.data
					this.onTab(0)
				}
			})
		},
		methods:{
			onTab(index){
				this.activeIndex = index
				this.childItems = this.items[index].assessTargetList
				this.childItems.map(item=>{
					let hasItemIndex = this.checkedList.findIndex(o=>o.id==item.id)
					item.checked = hasItemIndex>=0
				})
			},
			chooseItem(item,index){
				console.log(item,index)
				let hasItemIndex = this.checkedList.findIndex(o=>o.id==item.id)
				// 已存在
				if(hasItemIndex>=0){
					this.checkedList.splice(hasItemIndex,1)
				}else{
					this.checkedList.push(item)
				}
				this.childItems[index].checked  = !(hasItemIndex>=0)
				this.childItems.splice()
			},
			kpOk(){
				if(this.checkedList.length){
					uni.$emit('selKpItem',this.checkedList)
					uni.navigateBack()
				}else{
					uni.showToast({
						icon:'none',
						title:'请选择考评指标'
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	page{
		height: 100%;
		background: #F8F8F8;
	}
	.kp-details{
		height: 100%;
		display: flex;
		flex-direction: column;
		.kp-tabsBox{
			flex-grow: 1;
			display: flex;
			.kp-tabs{
				width: 30%;
				text-align: center;
				margin: 15upx;
				overflow: auto;
				> view{
					padding: 15upx;
					background: #fff;
					border-radius: 6upx;
					box-shadow: 1px 2px 3px #eee;
					border: 1px solid #eee;
					margin-bottom: 15upx;
					> view{
						&:last-child{
							color: #666;
						}
					}
				}
				> view.active{
					background: #00aaff;
					color: #fff;
					> view{
						&:last-child{
							color: #fff;
						}
					}
				}
			}
			.kp-items{
				width: 70%;
				margin: 15upx 15upx 15upx 6upx;
				overflow: auto;
				.checkbox-item{
					width:100%;
					padding: 15upx;
					border-radius: 6upx;
					border: 1px solid #eee;
					box-shadow: 1px 2px 3px #eee;
					background: #fff;
					display: flex;
					justify-content: space-between;
					margin-bottom: 15upx;
				}
			}
		}
		.kp-ok{
			text-align: center;
			padding: 26upx;
			background: #55aaff;
			color: #fff;
			font-size: 18px;
		}
	}
</style>
