<template>
	<view>
		<u-navbar title="考核我的指标" bgColor="rgb(211, 131, 42)" leftIconColor="#fff" titleStyle="color:#fff" placeholder
			border=true :autoBack="true" leftIconSize='35'></u-navbar>
		<view v-show="status==1">
			<view class="content-box">
				<view class="schbox">
					<view>考核时间：</view>
					<view @click='showCalendar' class="inputsr">
						<view class="timeInput">
							{{datatime|| '请选择时间'}}
						</view>
						<view @click.stop.prevent>
							<u-icon @click='showCalendar' style="margin-right: 10rpx;" v-if="!datatime" name="calendar"
								color="#999999" size="50"></u-icon>
							<u-icon @click="cleartime" style="margin-right: 10rpx;" v-else name="close-circle"
								color="#999999" size="40"></u-icon>
						</view>
					</view>
					<view @click="pageClick()" class="btn">查询</view>
				</view>

				<view class="count-box">
					<view>总积分：<text>{{infos.totalPoints||0}}</text>分</view>
					<view>加分：<text>{{infos.bonusPoins||0}}</text>分</view>
					<view>减分：<text>{{infos.deductionPoints||0}}</text>分</view>
				</view>

				<uni-table border stripe emptyText="暂无更多数据">
					<uni-tr>
						<uni-th align="center" width="40rpx">序号</uni-th>
						<uni-th align="center" width="100rpx">提交时间</uni-th>
						<uni-th align="center" width="100rpx">考核人员</uni-th>
						<uni-th align="center" width="150rpx">考核指标</uni-th>
						<uni-th align="center" width="40rpx">分数</uni-th>
					</uni-tr>
					<block v-for="item,index in dataList" :key="index">
						<uni-tr @click="goDetail(item)">
							<uni-td align="center">{{index+1}}</uni-td>
							<uni-td align="center"
								:style="{color:item.isObjection?'#D3832A':''}">{{item.createTime}}</uni-td>
							<uni-td align="center">{{item.createdUserName}}</uni-td>
							<uni-td align="center">{{item.classifyName}}</uni-td>
							<uni-td align="center">{{item.point}}</uni-td>
						</uni-tr>
					</block>
				</uni-table>
			</view>
			<pageView :totalNum="totalNum" :pageCount="pageCount" :crrNum="crrNum" @pageClick="pageClick" />
		</view>

		<l-calendar v-model:value="show" :initStartDate='date[0]' :initEndDate='date[1]' @hide='showCalendar'
			@change="onConfirm"></l-calendar>
	</view>
</template>

<script>
	import pageView from '@/compoment/pageView/pageView.vue'
	import {
		beMyApiIndicators
	} from '@/api/user.js'
	export default {
		components: {
			pageView
		},
		data() {
			return {
				crrNum: 1,
				pageCount: 10,
				totalNum: 0,
				status: 1,
				crrColl: 0,
				show: false,
				date: [],
				datatime: '',
				value: 0,
				dataList: [],
				infos: {}
			}
		},
		created() {
			this.initTime()

		},
		onShow() {
			this.getList()
		},
		methods: {
			getList() {
				let json = {
					current: this.crrNum,
					size: this.pageCount,
				}
				if (this.date && this.date.length) {
					json.startTime = this.date[0]
					json.endTime = this.date[1]
				}
				beMyApiIndicators(json).then(res => {
					this.infos = res.data;
					let data = res.data.indicatorsVOS;
					this.totalNum = data.total;
					this.dataList = data.records.map(item => {
						item.createTime = uni.$u.timeFormat(item.createTime, 'yyyy-mm-dd');
						return item
					})

				})
			},
			initTime() {
				let date = new Date();
				let year = date.getFullYear()
				let month = date.getMonth() + 1
				if (month < 10) month = '0' + month
				let start = year + '-' + month + '-01'
				date.setDate(0);
				let lastDay = date.getDate();
				let end = year + '-' + month + '-' + lastDay
				this.date = [start, end]
				this.datatime = start + ' 至 ' + end
			},
			pageClick(e) {
				this.crrNum = e || 1;
				this.getList()
			},
			setstate(status) {
				this.status = status
			},
			showCalendar() {
				this.show = !this.show
			},
			onConfirm(e) {
				this.date[0] = e.startDate
				this.date[1] = e.endDate
				this.datatime = e.startDate + ' 至 ' + e.endDate
			},
			cleartime() {
				this.date = []
				this.datatime = ''
			},
			goDetail(item) {
				uni.navigateTo({
					url: `/pagesHome/pages/integral/edit?check=1&id=${item.id}`
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	::v-deep .uni-table-th,
	::v-deep .uni-table-td {
		padding: 10rpx 0;
	}

	.count-box {
		display: flex;
		justify-content: space-around;
		align-items: center;
		font-size: 28rpx;

		text {
			font-size: 30rpx;
		}

		margin: 20rpx;
	}

	.my-table {
		text-align: center;


		.tb-head {
			display: flex;
			align-items: center;
			font-size: 28rpx;
		}

		.tb-body {
			display: flex;
			align-items: center;
			font-size: 26rpx;
			padding: 5rpx 0;
		}

		.td1 {
			width: 80rpx;
		}

		.td2 {
			width: 200rpx;
		}

		.td3 {
			flex: 1;
			overflow: hidden; //超出隐藏
			text-overflow: ellipsis; //文本超出时显示省略号
			white-space: nowrap; //设置文本不换行
		}

		.td4 {
			flex: 1;
			overflow: hidden; //超出隐藏
			text-overflow: ellipsis; //文本超出时显示省略号
			white-space: nowrap; //设置文本不换行
		}

		.td5 {
			width: 80rpx;
		}
	}

	.content-box {
		background-color: #fff;
		margin: 10rpx;
	}

	.inputsr {
		flex: 1;
		height: 64upx;
		border-radius: 8upx 8upx 8upx 8upx;
		opacity: 1;
		border: 2upx solid #EEEEEE;
		padding: 16upx 18upx;
		box-sizing: border-box;
		padding-right: 0;
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 26upx;
		font-weight: 400;
		color: #092C4D;

		>.timeInput {
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			flex: 1;
			font-size: 26upx;
		}
	}

	.schbox {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 15rpx 10rpx;
		box-sizing: border-box;
		background-color: #ffffff;

		>view:nth-of-type(1) {
			font-size: 28upx;
			font-weight: 400;
			color: #092C4D;
		}

		>view:nth-of-type(2) {
			flex: 1;
		}

		.btn {
			margin-left: 10upx;
			width: 128upx;
			height: 64upx;
			background: #D3832A;
			border-radius: 8upx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 32upx;
			font-weight: 400;
			color: #FFFFFF;
		}
	}

	.collapse {
		font-size: 30rpx;
		color: #303133;

		.title-box {
			display: flex;
			box-sizing: border-box;
			padding: 20rpx 30rpx;
			align-items: center;
			border-bottom: 1px solid #eee;

			.title {
				flex: 1;
			}
		}

		.sub {
			display: flex;
			align-items: center;
			padding: 20rpx 30rpx 20rpx 60rpx;
			border-bottom: 1px solid #eee;
			color: #666;
		}
	}

	.tabtip {
		display: flex;
		align-items: center;
		justify-content: space-between;

		>view {
			width: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
			background-color: #ffffff;
			font-size: 32upx;
			font-weight: 400;
			color: #90A0AF;

			>view {
				height: 80upx;
				border-bottom: 8upx solid #ffffff;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}

		.xz {
			color: #D3832A;
			border-bottom: 8upx solid #D3832A;
			// border-radius: 5upx;
		}
	}
</style>