<template>
	<view>
		<view class="">
			<s-tabs 
			        v-model="tabIndex"
			        line-position="center"
			        line-width="100%"
			        line-height="80%"
			        line-color="rgb(232, 245, 255)"
			        line-radius="10"
			        :list="tabs"
					 @change="tabChange"
			/>
		</view>
		<!-- top="xxx"下拉布局往下偏移,防止被悬浮菜单遮住 -->
		<mescroll-uni ref="mescrollRef" @init="mescrollInit" top="90" @down="downCallback" :up="upOption" @up="upCallback" @emptyclick="emptyClick">
			
			<uni-card v-for="item in goods">
				<!-- <image slot='cover' style="width: 100%;" :src="cover"></image> -->
				<view class="">
					<uni-row class="demo-uni-row" >
						<uni-col :span="6">
							<view class="demo-uni-col dark">考核内容：</view>
						</uni-col>
						<uni-col :span="18">
							<view class="demo-uni-col light">{{item.detailedtargenttitle}}</view>
						</uni-col>
					</uni-row>
					<uni-row class="demo-uni-row" >
						<uni-col :span="6">
							<view class="demo-uni-col dark">考核标准：</view>
						</uni-col>
						<uni-col :span="18">
							<view class="demo-uni-col light">{{item.score}}{{item.company}}</view>
						</uni-col>
					</uni-row>
					<uni-row class="demo-uni-row" >
						<uni-col :span="6">
							<view class="demo-uni-col dark">备注：</view>
						</uni-col>
						<uni-col :span="18">
							<view class="demo-uni-col light">{{item.detailedtargentcont}}</view>
						</uni-col>
					</uni-row>
				</view>
				<view slot="actions" class="card-actions">
					<view class="card-actions-item" @click="scorededuction(item)">
						<view v-show="item.addreduce == 1?true:item.addreduce == 3?true:false" class="">
							<u-button
							    text="减分"
							    size="normal"
							    plain
								hairline
							    shape="circle"
							    type="error"
								class="butcss"
							></u-button>
						</view>
						
					</view>
					<view class="card-actions-item" >
						
					</view>
					<view class="card-actions-item" @click="bonuspoints(item)">
						<view v-show="item.addreduce == 2?true:item.addreduce == 3?true:false" class="">
							<u-button
								text="加分"
								size="normal"
								plain
								hairline
								shape="circle"
								type="primary"
								class="butcss"
							></u-button>
						</view>
					</view>
				</view>
			</uni-card>
				
		</mescroll-uni>
<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	
	
	export default {
		mixins: [MescrollMixin], // 使用mixin
		data() {
			return {
				
				headerVerify:{
					userkey:"",
					token:"",
					userCont:""
				},
				arg:{
					company:"",
					department:"",
					targets:""
				},
				upOption:{
					// page: {
					// 	size: 10 // 每页数据的数量
					// },
					noMoreSize: 4, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
					empty:{
						tip: '~ 搜索无数据 ~', // 提示
						btnText: '去看看'
					}
				},
				goods: [], //列表数据
				tabs: [],
				tabIndex: 0 // tab下标
			}
		},
		onLoad(option) {
			console.log("option",option)
			let _this = this
			//判断Token是否有效
			let systemCache = _this.$commonMethod.getSystemCacheDate('myCache')
			if(!systemCache){
				_this.$commonMethod.JumpUrl('/pages/login/login')
			}else{
				let currentTime = new Date().getTime() - systemCache.tokenTime
				if (currentTime >= 10800000){
					_this.$commonMethod.verifyPowerIsTrue('myCache')
				}
			}
			_this.headerVerify.userkey = systemCache.userKey
			_this.headerVerify.token = systemCache.token
			_this.headerVerify.userCont = systemCache.userInfo
			_this.arg = {
				company:option.company,
				department:option.department,
				targets:option.targets
			}
			// _this.getSunTask()
		},
		onReady() {
			let _this=this;
			_this.getSunTask()
		},
		methods: {
			//获取考核子栏目
			getSunTask(){
				let _this = this
				let sunTargetDate ={
					department:_this.arg.department,
					targets:_this.arg.targets,
					group:_this.arg.company,
				}
				let getUrl = _this.$commonMethod.localhostUrl+'/api/webach/aboutmytask'
				uni.request({
					url:getUrl,
					header: {
						'Content-Type': 'application/json', //自定义请求头信息
						// 'User-Agent':250,
						'user-key': _this.headerVerify.userkey,
						'user-token':_this.headerVerify.token
					},
					method:'POST',//请求方式，必须为大写
					data:sunTargetDate,
					success: (res) => {
						console.log(res)
						let callBackDate = res.data
						if(callBackDate.code == 0){
							let tarTitle = new Array
							callBackDate.data.forEach((datItem,index)=>{
								let contInfo = {
									company:datItem.group,
									department:datItem.department,
									targets:datItem.targets,
									suntarget:datItem.suntargets,
									label:datItem.projectName
								}
								tarTitle.push(contInfo)
							})
							_this.tabs = tarTitle
						}else{
							_this.$refs.uToast.show({
								message: callBackDate.msg,
								duration: 1000 * 2,
								position:'bottom',
							})
						}
					},
					fail:function(e){
						_this.$refs.uToast.show({
							message: e,
							duration: 1000 * 2,
							position:'bottom',
						})
					}
				});
			},
			/*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
			upCallback(page) {
				console.log(page,"page---------------->")
				let _this = this
				//联网加载数据
				let curTab = this.tabs[_this.tabIndex]
				
				console.log(curTab,"page---------------->")
				let sunTargetDate ={
					page:page.num,
					pagesize:page.size,
					group:curTab.company,
					department:curTab.department,
					targets:curTab.targets,
					suntargets:curTab.suntarget
				}
				//获取定性考核项列表
				uni.request({
					url:_this.$commonMethod.localhostUrl+'/api/webach/taskparametertitlelist',
					header: {
						'Content-Type': 'application/json', //自定义请求头信息
						// 'User-Agent':250,
						'user-key': _this.headerVerify.userkey,
						'user-token':_this.headerVerify.token
					},
					method:'POST',//请求方式，必须为大写
					data:sunTargetDate,
					success: (res) => {
						console.log(res)
						let callBackDate = res.data
						if(callBackDate.code == 0){
							console.log("列表值",callBackDate.data)
							this.mescroll.endSuccess(callBackDate.data.length);
							if(page.num == 1) this.goods = [];
							_this.goods=this.goods.concat(callBackDate.data)
						}else{
							_this.goods.mescroll.endErr();
							_this.$refs.uToast.show({
								message: callBackDate.msg,
								duration: 1000 * 2,
								position:'bottom',
							})
						}
					},
					fail:function(e){
						_this.goods.mescroll.endErr();
						_this.$refs.uToast.show({
							message: e,
							duration: 1000 * 2,
							position:'bottom',
						})
					}
				});
			},
			//点击空布局按钮的回调
			emptyClick(){
				uni.showToast({
					title:'点击了按钮,具体逻辑自行实现'
				})
			},
			// 切换菜单
			tabChange() {
				this.goods = []// 先置空列表,显示加载进度
				this.mescroll.resetUpScroll() // 再刷新列表数据
			},
			//减分
			scorededuction(data){
				let _this = this
				console.log("减分---------->",data)
				_this.$commonMethod.JumpUrl('/pages/department/scorededuction?data='+JSON.stringify(data))
			},
			//加分
			bonuspoints(data){
				let _this = this
				console.log("加分---------->",data)
				_this.$commonMethod.JumpUrl('/pages/department/bonuspoints?data='+JSON.stringify(data))
			}
		}
	}
</script>

<style>
	
	.card-actions {
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		align-items: center;
		height: 45px;
		border-top: 1px #eee solid;
	}
	
	.card-actions-item {
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	
	.card-actions-item-text {
		font-size: 12px;
		color: #666;
		margin-left: 5px;
	}
	.duiqi{
		align-items: flex-start;
		flex-direction: column;
	}
	.butcss{
		height: 50rpx;
		padding: 0 50rpx;
	}
	.demo-uni-row{
		margin-top: 20rpx;
	}
</style>
