<template>
	<view class="shopTourDetails-wrap">
		<scroll-view scroll-y class="scroll-con-l">
			<view class="item-con" v-for="(item, index) in itemList" :key="index">
				<view :class="['item-tit', nowInd==index ? 'active' : '']" @click="changeType(index)">{{item.name}}</view>
			</view>
		</scroll-view>
		<scroll-view scroll-y class="scroll-con-r" @scrolltolower="onreachBottom">
			<view class="item-con" v-for="(item, index) in evaluationItemsList" :key="index">
				<view class="item-tit">{{item.name}}</view>
				<view class="item-main">
					<view class="item-state">状态：
						<text v-if="item.state == 0" class="green">合格</text>
						<text v-if="item.state == 1" class="red">不合格</text>
						<text v-if="item.state == 2" class="yellow">不适用</text>
					</view>
					<text class="item-btn" @click="openPopup=true">查看评论</text>
				</view>
				<view class="item-footer">
					考核时间：2020-09-09 14:29
				</view>
			</view>
		</scroll-view>
		<!-- 查看评论 -->
		<comment-popup :openPopup="openPopup" @close="closePopup" />
	</view>
</template>

<script>
	import CommentPopup from './commentPopup.vue'
	export default{
		components: { CommentPopup },
		data(){
			return{
				itemList: [  //  考评项目
					{ name: '工作态度' },
					{ name: '办事效率' },
					{ name: '正常营业' },
					{ name: '工作态度' },
				],
				evaluationItemsList: [  //  考评项
					{ name: '按时完成工作', state: 0 },
					{ name: '待人接物礼貌', state: 1 },
					{ name: '按时完成工作', state: 2 },
					{ name: '待人接物礼貌', state: 1 },
					{ name: '按时完成工作', state: 0 },
					{ name: '待人接物礼貌', state: 1 },
					{ name: '按时完成工作', state: 2 },
					{ name: '待人接物礼貌', state: 1 },
					{ name: '按时完成工作', state: 0 },
					{ name: '待人接物礼貌', state: 1 },
					{ name: '按时完成工作', state: 2 },
					{ name: '待人接物礼貌', state: 1 },
					{ name: '按时完成工作', state: 0 },
					{ name: '待人接物礼貌', state: 1 },
					{ name: '按时完成工作', state: 2 },
					{ name: '待人接物礼貌', state: 1 },
				],
				nowInd: 0,  //  当前考评分类
				openPopup: false,  //  查看评论
			}
		},
		methods: {
			// scroll-view到底部加载更多
			onreachBottom() {
				// if(this.list.length < this.total){
				// 	this.pageNo += 1
				// 	this.pageInit()
				// }else{
				// 	this.status = "nomore"
				// }
			},
			//  切换分类
			changeType(ind){
				this.nowInd = ind
			},
			//  关闭   查看评论
			closePopup(){
				this.openPopup = false
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #f8f8f8;
		height: calc(100vh - 48px);
	}
	.shopTourDetails-wrap{
		height: 100%;
		background-color: #f8f8f8;
		.scroll-con-l{
			display: inline-block;
			width: 28%;
			height: 99%;
			margin: 1% 1% 0;
			box-sizing: border-box;
			.item-con{
				.item-tit{
					text-align: center;
					padding: 26upx 0;
					margin-bottom: 12upx;
					background-color: #fff;
					position: relative;
					&:before{
						content: '';
						background-color: #fff;
						width: 8upx;
						height: 50upx;
						display: block;
						position: absolute;
						right: 0;
						top: 18upx;
					}
				}
				.item-tit.active{
					&:before{
						background-color: #fa3534;
					}
				}
			}
		}
		.scroll-con-r{
			display: inline-block;
			width: 69%;
			height: 99%;
			margin: 1% 1% 0 0;
			.item-con{
				padding: 14upx 30upx;
				margin-bottom: 18upx;
				border-radius: 12upx;
				background-color: #fff;
				.item-tit{
					font-weight: bold;
				}
				.item-main{
					padding: 14upx 0;
					display: flex;
					justify-content: space-between;
					.item-state{
						font-size: 26upx;
						text.green{
							color: #19be6b;
						}
						text.yellow{
							color: #ff9900;
						}
						text.red{
							color: #fa3534;
						}
					}
					.item-btn{
						font-size: 24upx;
						color: #2979ff;
					}
				}
				.item-footer{
					font-size: 24upx;
					color: #464646;
				}
			}
		}
	}
</style>
