<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||0}}项)</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>
						<radio :checked="item.checked" :value="item.id" />
					</view>
				</view>
				<u-empty style="height: auto;padding-top: 10vh;" text="暂无指标" img-width="120" v-if="!childItems.length&&items.length" mode="list"></u-empty>
			</view>
		</view>
		<view style="flex-grow: 1;height: 100%;" v-if="items.length==0">
			<u-empty style="height: auto;padding-top: 10vh;" text="暂无考评项" mode="list"></u-empty>
		</view>
	</view>
</template>

<script>
	import {findAllItem} from '@/api/assess'
	export default{
		data(){
			return{
				items: [],
				activeIndex:0,
				childItems:[],
				checkedItem: null // 已选指标
			}
		},
		onLoad(opts) {
			this.checkedItem = opts.item&&JSON.parse(opts.item)||null
			findAllItem().then(res=>{
				console.log(res,'0')
				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=>{
					item.checked = (this.checkedItem && item.id == this.checkedItem.id) ? true :false
				})
			},
			chooseItem(item,index){
				console.log(item,index)
				this.checkedItem = item
				uni.$emit('selKpItem',item)
				uni.navigateBack()
			}
			
		}
	}
</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>
