<template>
	<view class="index">
		<view>
			<view
				style="height: 290rpx;background-image: url('../../static/home/index-top-img.png');background-position: center bottom;background-size: 100%;">
			</view>
			<view class="navigate-title">
				<view @click="goIntoTargetPage('daiban')"
					style="width: 25%;height: 100%;display: flex;flex-direction: column;justify-content: center;">
					<text class="text">{{ticketCount}}</text>
					<view class="status">待办工单</view>
				</view>
				<view @click="goIntoTargetPage('warning')"
					style="width: 25%;height: 100%;display: flex;flex-direction: column;justify-content: center;">
					<text class="text">{{eventCount}}</text>
					<view class="status">事件提醒</view>
				</view>
			</view>
			<view class="daiban">
				<view class="daiban01">
					<view class="title">
						<view class="left-content">
							<view class="img-view">
								<image src="../../static/home/daiban.png" mode="" class="img"></image>
							</view>
							<text class="title-text-left">待审批</text>
						</view>
						<view class="" @click="goIntoTargetPage('daiban')">
							<text class="title-text-right">查看更多</text>
							<uni-icons type="right" :size="11" color="#ababab"></uni-icons>
						</view>
					</view>
					<view class="line"></view>
					<view class="listWrap" v-if="ticketList.length>0">
						<view v-for="item in ticketList" :key="item.id">
							<view class="itemTitle">{{item.title}}</view>
							<view class="itemCenter">
								<view class="info-details">所属工作流：{{item.workflow_.name}}</view>
								<view class="info-details">工单状态：{{item.state_.name}}</view>
								<view class="info-details">提交时间：{{item.create_time}} </view>
								<view class="info-details">更新时间：{{item.update_time}} </view>
							</view>
							<view class="bottom-btns">
								<view class="shenhezhong bottom-btn" @click="ticketHandle(item,'handle')"
									v-if="(item.act_state===1||item.act_state===3)&&item.state_.type===0">
									<image src="../../static/my/my_apply/blue-time.png" mode=""></image>
									处理
								</view>
								<view class="shenhejieshu bottom-btn" @click="ticketHandle(item,'show')">
									<image src="../../static/my/my_apply/tongguo.png" mode=""></image>
									查看
								</view>
							</view>
						</view>
					</view>
					<view class="listWrap" v-else>
						<view class="emptyList">暂无待办工单</view>
					</view>
				</view>
			</view>
			<view class="tongzhi">
				<view class="title">
					<view class="left-content">
						<view class="img-view">
							<image src="../../static/home/tongzhi.png" mode="" class="img"></image>
						</view>
						<text class="title-text-left">实时事件</text>
					</view>
					<view class="" @click="goIntoTargetPage('warning')">
						<text class="title-text-right">查看更多</text>
						<uni-icons type="right" :size="11" color="#ababab"></uni-icons>
					</view>
				</view>
				<view class="line"></view>
				<view class="listWrap" v-if="eventList.length>0">
					<view v-for="event in eventList" :key="event.id">
						<view class="itemTitle" v-if="event.cates_">事件类型:
							<text v-for="cate in event.cates_">{{cate.name}}</text>
						</view>
						<view class="itemCenter">
							<view class="info-details">触发时间：{{event.create_time}}</view>
							<view class="info-details">事件信息：{{event.voice_msg}}</view>
						</view>
						<view class="bottom-btns">
							<view class="shenhezhong bottom-btn" @click="eventHandle(event)">
								<image src="../../static/my/my_apply/blue-time.png" mode=""></image>
								处理
							</view>
						</view>
					</view>
				</view>
				<view class="listWrap" v-else>
					<view class="emptyList">今日暂无事件</view>
				</view>
			</view>
		</view>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				cateAggForm: {
					start_create: '',
					is_handled: false,
					completed: true
				},
				limitedOperation:false,
				limitedRpj:false,
				limitedVisit:false,
				ticketList: [],
				eventList: [],
				eventCount: 0,
				ticketCount: 0,
				// 2022年2月18日
				mytopimg: require("@/static/home/bgimg-top.jpg"),
			}
		},
		onLoad() {
				// #ifdef APP-PLUS
						this.showHeader = false;
						this.statusHeight = plus.device.uuid; 	//uniapp打包安卓调用设备唯一标识方法
				// #endif
			},
		onShow() {
			debugger;
			if(this.vuex_user.type==='visitor'){
				this.limitedVisit = true;
			}else{
				let date = new Date();
				this.cateAggForm.start_create = date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate();
				this.getTicketAgg();
				this.getTicket();
				this.getEventAgg();
				this.getEvent();
			}

		},
		methods: {
			getTicket() {
				let that = this;
				that.ticketList = []
				let params = {
					category: 'duty'
				};
				that.$u.api.getTickets(params).then(res => {
					that.ticketList = res.results.splice(0, 2);
				})
			},
			getEvent() {
				let that = this;
				let date = new Date();
				let years = date.getFullYear();
				let months = date.getMonth()+1;
				let days = date.getDate();
				that.eventList = []
				let params = {
					page: 1,
					start_create: years+'-'+months+'-'+days
				};
				that.$u.api.eventList(params).then(res => {
					let eventList = res.results.filter(item => {
						return item.handle_user === null;
					});
					that.eventList = eventList.splice(0, 2);
					// console.log(that.eventList[0].cates_.name)
				})
			},
			getTicketAgg() {
				this.$u.api.ticketDutyAgg().then(res => {
					if (res.err_msg) {} else {
						this.ticketCount = res.total_count;
					}
				})
			},
			getEventAgg() {
				this.$u.api.eventCateAgg(this.cateAggForm).then(res => {
					if (res.err_msg) {} else {
						this.eventCount = res.total_count;
					}
				})
			},
			goIntoTargetPage(type) {
				debugger;
				if(this.limitedVisit==true){
				}else{
					if (type == "daiban") {
						uni.navigateTo({
							url: "./list/ticket"
						})
					}
					if (type == "warning") {
						uni.navigateTo({
							url: "./list/event"
						})
					}
				}
				
			},
			ticketHandle(row, type) {
				let projectId = null;
				let cateType = row.workflow_.key;
				if (cateType === 'visit') {
					projectId = row.ticket_data.visit;
				} else if (cateType === 'rpj') {
					projectId = row.ticket_data.rpj;
				} else if(cateType.indexOf('opl_')!=-1){
					projectId = row.ticket_data.opl;
					cateType = 'opl'
				}
				const params = `?ticketId=${row.id}&projectId=${projectId}&cateType=${cateType}&type=${type}`;
				uni.navigateTo({
					url: './detail/ticketHandle' + params,
				})
			},
			eventHandle(val){
				let params = `?eventId=${val.id}`;
				uni.navigateTo({
					url: './detail/eventHandle' + params,
				})
			},
		}
	}
</script>

<style scoped>
	.index {
		background-color: #edf8ff;
		padding-bottom: 45rpx;
		position: relative;
	}

	.nav-bar {
		height: 401rpx;
		background-color: #2cade8;
		background-size: cover;
		color: #FFFFFF;
		padding-top: 26rpx;
		padding-left: 18rpx;
	}

	.nav-bar-text {
		font-size: 38rpx;
		color: #ffffff;
		font-weight: 400;

	}

	.navigate-title {
		width: 720rpx;
		height: 160rpx;
		background-color: #ffffff;
		box-shadow: 0px 2px 24px 0px rgba(213, 237, 255, 0.53);
		border-radius: 10px;
		display: flex;
		justify-content: space-around;
		align-items: center;
		text-align: center;
		position: absolute;
		left: 50%;
		top: 196rpx;
		transform: translateX(-50%);
		z-index: 1;
	}

	.navigate-title .text+.status {
		font-weight: normal;
		font-stretch: normal;
		letter-spacing: 0rpx;
	}

	.navigate-title .text {
		font-family: PingFang-SC-Bold;
		font-size: 48rpx;
		font-weight: 600;
		color: #2c6fd9;
	}

	.navigate-title .status {
		font-family: PingFang-SC-Medium;
		font-size: 26rpx;
		color: #383838;
	}

	.daiban01 {
		width: 720rpx;
		background-color: #ffffff;
		border-radius: 10rpx;
		margin: 0 auto;
		margin-top: 88rpx;
	}

	.title {
		display: flex;
		justify-content: space-between;
		padding: 20rpx 20rpx;
		height: 79rpx;
		align-items: center;
	}

	.left-content {
		display: flex;
		align-items: center;
	}

	.img-view {
		width: 30rpx;
		height: 30rpx;
	}

	.img-view .img {
		width: 100%;
		height: 100%;
	}

	.title-text-left {
		font-size: 34rpx;
		color: #383838;
		padding-left: 10rpx;
	}

	.title-text-right {
		font-family: PingFang-SC-Medium;
		font-size: 24rpx;
		font-weight: normal;
		font-stretch: normal;
		line-height: 72rpx;
		color: #ababab;
	}

	.line {
		width: 660rpx;
		height: 1rpx;
		background-color: #eeeeee;
		margin: 0 auto;
	}

	.daiban02 {
		width: 720rpx;
		background-color: #ffffff;
		border-radius: 10rpx;
		margin: 0 auto;
		margin-top: 18rpx;
	}

	/* 通知样式 */
	.tongzhi {
		width: 720rpx;
		background-color: #ffffff;
		border-radius: 10rpx;
		margin: 0 auto;
		margin-top: 20rpx;
		padding-bottom: 20rpx;
	}

	.tongzhi .content {
		display: flex;
		padding: 0 20rpx;
		margin-top: 41rpx;
	}


	.tongzhi-img image {
		width: 55rpx;
		height: 55rpx;
		border-radius: 50%;
	}

	.tongzhi .tongzhi-info {
		margin-left: 15rpx;
		flex: 1;
	}

	.tongzhi-info .tongzhi-title {
		font-size: 30rpx;
		color: #3d3d3d;
	}

	.tongzhi-info .tongzhi-content {
		font-family: PingFang-SC-Medium;
		font-size: 28rpx;
		line-height: 50rpx;
		color: #5b5b5b;
		overflow: hidden;
		text-overflow: ellipsis;
		display: flex;
		display: -webkit-box;
		line-clamp: 2;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		word-break: break-all;
	}

	.tongzhi .bottom-content {
		font-family: PingFang-SC-Regular;
		font-size: 24rpx;
		line-height: 72rpx;
		letter-spacing: 0rpx;
		color: #ababab;
		text-align: right;
		padding: 0 20rpx;
	}

	.bottom-content .liulan {
		margin-right: 40rpx;
	}

	.listWrap {
		padding: 20upx 50upx;
	}

	.itemTitle {
		font-family: PingFang-SC-Medium;
		font-size: 30upx;
		line-height: 72upx;
		color: #3d3d3d;
		flex: 1;
	}

	.itemCenter {
		padding-bottom: 10rpx;

	}

	.info-details {
		font-size: 26upx;
		line-height: 40rpx;
		color: #5b5b5b;
	}

	/* btns */
	.bottom-btns {
		text-align: center;
		font-family: PingFang-SC-Medium;
		font-size: 28rpx;
		line-height: 60rpx;
		display: flex;
		border-bottom: 1rpx solid #eeeeee;
	}

	.bottom-btn {
		flex: 1;
		/* border-right: 1upx solid #eeeeee; */
	}

	/* .bottom-btns>.bottom-btn:last-child{
		border-right: none;
	} */
	.shenhezhong {
		color: #2c6fd9;
	}

	.shenhejieshu {
		color: #15a306;
	}

	.bottom-btn image {
		width: 26rpx;
		height: 26rpx;
		margin-right: 10rpx;
		vertical-align: middle;
	}
</style>
