<template>
	<view class="content">
		<!-- -->
		<!-- #ifdef H5 -->
		<view class="content-top" :style="'padding-top:30px'">
		<!-- #endif -->
			<!-- #ifdef APP-PLUS||MP -->
			<view class="content-top" :style="'padding-top:'+statusBarHeight+'px'">
			<!-- #endif -->
				<retuntop class="close" :isshow="false"></retuntop>

				<view class="my_msg-con">
					<u--image :showLoading="true" :src="`${HTTP_IMG_URL}${oaUserInfo.thumb}`" width="130.28rpx"
						height="130.28rpx" shape="circle" v-if="oaUserInfo.thumb">
					</u--image>
					<u--image :showLoading="true" v-else src="@/static/img/public/avatar.png" width="130.28rpx"
						height="130.28rpx" shape="circle">
					</u--image>
					<view @click="login" class="name_work" v-if="!$store.state.app.token">
						<view class="name">
							<text class="nickname">立即登录</text>
						</view>
						<view class="work">
							登录后可查看更多
						</view>
					</view>
					<view class="name_work" style="margin-top: 10rpx;" v-else>
						<view class="name">
							<text class="nickname">姓名:{{ oaUserInfo.nickname }}</text>
						</view>
						<view class="work">
							<view class="wr_item">
								<view class="wr_t_left">(技术部):</view>
								<view class="wr_t_right">技术专业</view>
							</view>
						</view>
					</view>
				</view>
				<view class="top_class">
					<view class="top_class-one" v-for="(item,i) in list" :key="i" @click="listbiao(item,i)">
						<view class="title_value">
							{{item.num}}
						</view>
						<view class="title">
							{{item.name}}
						</view>
					</view>
				</view>
			</view>
			<view class="content-banner">
				<view class="content-banner-title" style="display: flex;justify-content: space-between;">
					
					<view class="">
						待办事项
					</view>
					<view @click="gongao1">
						更多
						<text class="iconfont icon-xiangyou" style="margin-top: 5rpx;margin-right: 20rpx;"></text>
					</view>
				</view>
				<view class="content-banner-detail" v-for="(item,k) in list2" :key='k' v-if="isshow1">
					<view class="banner-detail">
						<view class="banner-detail-title">
							提醒
						</view>
						<view class="banner-detail-detail">
							{{item.title}}
						</view>
					</view>
					<view class="iconfont icon-xiangyou" style="margin-top: 5rpx;">

					</view>
				</view>

				<view class="bootom-top-three" v-else>
					<scroll-view scroll-x="true" scroll-left="0" class="top-three">
						<view class="top_users-header">
							<view class="">
								{{list6.approve}}
							</view>
							<view class="title1">
								待审批
							</view>
						</view>
						<view class="top_users-header">
							<view class="">
								{{list6.expenses}}
							</view>
							<view class="title2">
								待报销
							</view>
						</view>
						<view class="top_users-header">
							<view class="">
								{{list6.approve}}
							</view>
							<view class="title3">
								待审发票
							</view>
						</view>
						<view class="top_users-header">
							<view class="">
								{{list6.approve}}
							</view>
							<view class="title4">
								待回款
							</view>
						</view>
					</scroll-view>
				</view>
			</view>
			<view class="content-sort">
				<view class="content-sort-con" v-for="(item,l) in list3" :key="l" @click="appcenter(item,l)">
					<view class="sort-img">
						<image :src="item.img" mode="aspectFit"></image>
					</view>
					<view class="name">
						{{item.name}}
					</view>
				</view>
			</view>
			<view class="content-banner1">
				<view class="content-banner-title">
					<view class="">
						公告
					</view>
					<view @click="gongao">
						更多
						<text class="iconfont icon-xiangyou" style="margin-top: 5rpx;margin-right: 20rpx;"></text>
					</view>
				</view>
				<view class="content-banner-detail" v-for="(item,k) in list5" :key='k'>
					<view class="banner-detail">
						<view class="banner-detail-title">
							<view class="">
								提醒
							</view>

						</view>
						<view class="banner-detail-detail">
							{{item.title}}
						</view>
					</view>

				</view>
			</view>
			<view class="content-bootom">
				<view class="content-bootom-top">
					<view class="bootom-top-one">
						我的任务
					</view>
					<view class="bootom-top-two">
						<text>更多</text>
						<text class="iconfont icon-xiangyou" style="font-size: 25rpx;"></text>
					</view>

				</view>

				<view class="content-bootom-detail">
					<view class="bootom-detail" v-for="(item,h) in list4" :key="h">
						<view class="bootom-detail-one">
							<view class="detail-one-a" v-if='item.priority==4'>
								{{item.priority_name}}
							</view>
							<view class="detail-one-a" v-else style="background-color:  #F5F5F5;color: #999999;">
								{{item.priority_name}}
							</view>
							<view class="detail-one-b">
								{{item.title}}
							</view>
							<view class="detail-one-c" v-if="item.flow_status==3">
								{{item.flow_name}}
							</view>
							<view class="detail-one-c" v-else style="background-color:  #E4EDFF;color: #3274F9;">
								{{item.flow_name}}
							</view>
						</view>

						<view class="bootom-detail-two">
							<view class="detail-twoa ">

							</view>
							<view class="detail-twob">
								任务性质：{{item.cate_name}} <text style="margin-left: 20rpx;">
									计划完成时间：{{item.end_time}}</text>
							</view>
						</view>
					</view>
				</view>

			</view>


		</view>
</template>

<script>
	import retuntop from '@/components/return/index.vue'

	import {
		getdatatotal,
		getDocumentListApi,
		projecttasklist,
		todosubjec,
		tasksubjec
	} from '@/api/oa.js'
	import {
		HTTP_REQUEST_URL
	} from '@/config/app.js'
	export default {
		components: {
			retuntop
		},
		data() {
			return {
				title: 'Hello',
				statusBarHeight: 0,
				list: [],
				list2: [{
						detail: '提醒张三下达的紧急任务待完成'
					},
					{
						detail: '提醒张三下达的紧急任务待完成'
					},
				],
				list3: [{
					name: '请假申请',
					img: require('@/static/images/s2.png')

				}, {
					name: '出差申请',
					img: require('@/static/images/s4.png')

				}, {
					name: '请假申请',
					img: require('@/static/images/s3.png')

				}, {
					name: '采购申请',
					img: require('@/static/images/s5.png')

				}, {
					name: '物品维修',
					img: require('@/static/images/s8.png')

				}, {
					name: '用章申请',
					img: require('@/static/images/s7.png')

				}, {
					name: '报销申请',
					img: require('@/static/images/s6.png')

				}, {
					name: '更多',
					img: require('@/static/images/s1.png')

				}],
				list4: [{
					name: '紧急',
					con: '紧急紧急紧急紧急紧急紧急紧急紧急紧急紧急紧急',
					status: '紧急紧',
					con1: '紧急紧急紧急紧急紧急紧急紧急紧急紧急紧急紧急',
					con2: '紧急紧急紧急紧急紧急紧急紧急紧急紧急紧急紧急',

				}, {
					name: '紧急',
					con: '紧急紧急紧急紧急紧急紧急紧急紧急紧急紧急紧急',
					status: '紧急紧',
					con1: '紧急紧急紧急紧急紧急紧急紧急紧急紧急紧急紧急',
					con2: '紧急紧急紧急紧急紧急紧急紧急紧急紧急紧急紧急',

				}, {
					name: '紧急',
					con: '紧急紧急紧急紧急紧急紧急紧急紧急紧急紧急紧急',
					status: '紧急紧',
					con1: '紧急紧急紧急紧急紧急紧急紧急紧急紧急紧急紧急',
					con2: '紧急紧急紧急紧急紧急紧急紧急紧急紧急紧急紧急',

				}],
				HTTP_IMG_URL: '',
				list5: [],
				list6: {},
				isshow1:true
			}
		},
		computed: {
			oaUserInfo() {
				return this.$store.state.app.userInfo
			},

		},

		onLoad() {
			this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight;
			this.HTTP_IMG_URL = HTTP_REQUEST_URL
			this.getList()
			this.getDtnote()
			this.getDocumentList2()
			this.getDtlist()
			this.getDtlist1()
		},
		methods: {
			login() {
				uni.reLaunch({
					url: '/pages/oaLogin/oaLogin'
				})
			},
			//获取公告
			async getDtnote() {
				let res = await getDocumentListApi({
					page: 1,
					limit: 2
				})
			
				this.list5 = res.data.data
			},
			async getDtlist() {
				let res = await todosubjec()
				
				this.list6 = res.data
				// this.list5 = res.data.data
			},
			async getDtlist1() {
				let res = await tasksubjec()
			
				this.list2 = res.data.data
			},
			//获取任务
			async getDocumentList2() {

				let res = await projecttasklist({
					page: 1,
					limit: 3,

				})

				this.list4 = res.data.data

			},
			//获取部门
			async getList() {
				const res = await getdatatotal()
		
				this.list = res.data
			},
			//列表
			listbiao(item, i) {
				switch (item.type) {
					case "note":
						uni.navigateTo({
							url: '/pages/users/user_document/index'
						})
						break;
					case "approve":
						uni.switchTab({
							url: '/pages/examine/index'
						})

						break;
					case "expense":
						uni.navigateTo({
							url: '/pages/reimbursement/index'
						})
						break;
					case "invoice":
						uni.navigateTo({
							url: '/pages/invoice/index'
						})
						break;
					case "customer":
						uni.navigateTo({
							url: '/pages/personneltransfer/index'
						})
						break;

					case "project":

						uni.navigateTo({
							url: '/pages/project/index'
						})
						break;
					case "task":
						uni.switchTab({
							url: '/oaTask/oaTask'
						})
						break;
					case "article":
						uni.navigateTo({
							url: '/pages/users/article/index'
						})
						break;
				}

			},
			//公告
			gongao() {
				uni.navigateTo({
					url: '/pages/users/user_document/index'
				})
			},
			//待办
			gongao1() {
				this.isshow1=!this.isshow1
				},
			//应用中心
			appcenter(item, i) {
				switch (i) {
					case 0:
						uni.navigateTo({
							url: '/pages/views/com_approve'
						})
						break;
					case 1:
						uni.navigateTo({
							url: '/pages/appcenter/index'
						})
						break;
					case 2:
						uni.navigateTo({
							url: '/pages/appcenter/index'
						})
						break;
					case 3:
						uni.navigateTo({
							url: '/pages/appcenter/index'
						})
						break;
					case 4:
						uni.navigateTo({
							url: '/pages/appcenter/index'
						})
						break;

					case 5:
						uni.navigateTo({
							url: '/pages/appcenter/index'
						})
						break;
					case 6:
						uni.navigateTo({
							url: '/pages/appcenter/index'
						})
						break;
					case 7:
						uni.navigateTo({
							url: '/pages/appcenter/index'
						})
						break;
				}

			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #F3F4F8;
	}

	.content {
		.content-top {
			width: 100%;
			height: 761rpx;
			background: #3274F9;
			border-radius: 0px 0px 0px 0px;
			opacity: 1;

			.close {
				position: absolute;
				right: 0rpx;
				margin-top: 30rpx;
			}

			.top_detail {
				display: flex;
				margin-top: 138rpx;
				margin-bottom: 46rpx;
				margin-left: 28rpx;

				.top_detail_one {
					width: 112rpx;
					height: 112rpx;
					background: #FFFFFF;
					border-radius: 50%;
					opacity: 1;
					margin-right: 32rpx;
				}

				.top_detail_two {
					.top_detail_twoa {
						margin-bottom: 10rpx;
						display: flex;
						margin-top: 10rpx;

						.name {
							font-size: 32rpx;
							font-family: PingFang SC-Medium, PingFang SC;
							font-weight: 500;
							color: #FFFFFF;
							margin-right: 39rpx;
						}

						.phone {
							font-size: 28rpx;
							font-family: PingFang SC-Regular, PingFang SC;
							font-weight: 400;
							color: #FFFFFF;
						}
					}

					.top_detail_twob {
						font-size: 28rpx;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #FFFFFF;
					}

				}
			}

			.top_class {
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;
				padding: 28rpx 28rpx;

				.top_class-one {
					flex-basis: 25%;


					margin-bottom: 42rpx;
					text-align: center;

					.title {
						font-size: 25rpx;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #FFFFFF;
					}

					.title_value {
						font-size: 39rpx;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #FFFFFF;
						margin-bottom: 21rpx;
					}
				}
			}
		}

		.bootom-top-three {
			display: flex;
			white-space: nowrap;

			.top_users-header {
				display: inline-block;
				margin-right: 30rpx;
				text-align: center;
				font-size: 53rpx;
				font-family: PingFang SC-Bold, PingFang SC;
				font-weight: bold;
				color: rgba(0, 0, 0, 0.8);

				.title1 {
					width: 131rpx;
					height: 42rpx;
					line-height: 42rpx;
					background-color: #3274F9;
					text-align: center;
					border-radius: 21rpx 21rpx;
					font-size: 25rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #FFFFFF;
				}

				.title2 {
					width: 131rpx;
					height: 42rpx;
					line-height: 42rpx;
					background-color: #F9AA32;
					text-align: center;
					border-radius: 21rpx 21rpx;
					font-size: 25rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #FFFFFF;
				}

				.title3 {
					width: 131rpx;
					height: 42rpx;
					line-height: 42rpx;
					background-color: #F9AA32;
					text-align: center;
					border-radius: 21rpx 21rpx;
					font-size: 25rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #FFFFFF;
				}

				.title4 {
					width: 131rpx;
					height: 42rpx;
					line-height: 42rpx;
					background-color: red;
					text-align: center;
					border-radius: 21rpx 21rpx;
					font-size: 25rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #FFFFFF;
				}
			}
		}

		.my_msg-con {
			display: flex;
			margin-top: 138rpx;
			margin-bottom: 46rpx;
			margin-left: 28rpx;

			.name_work {
				margin-left: 31.58rpx;
				font-size: 28.07rpx;

				.name {
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 500;
					color: #FFFFFF;
					margin-right: 39rpx;
					margin-top: 20rpx;

					.nickname {
						font-size: 32rpx;
						font-weight: 500;
						margin-right: 30rpx;
					}
				}
			}

			.work {
				margin-top: 14.04rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 500;
				color: #FFFFFF;
				margin-right: 39rpx;

				.wr_item {
					display: flex;

					.wr_t_left {
						flex-shrink: 0;
						margin-right: 12rpx;
					}
				}
			}

			.omit {
				white-space: nowrap;
				/* 禁止换行 */
				overflow: hidden;
				/* 溢出隐藏 */
				text-overflow: ellipsis;
				/* 使用省略号代表被截断的文本 */
			}

		}

		.content-banner {
			width: 694rpx;
			height: 221rpx;
			background: #FFFFFF;
			border-radius: 21rpx 21rpx;
			margin: 0 auto;
			margin-top: -100rpx;
			padding-left: 28rpx;
			padding-top: 28rpx;

			.content-banner-title {

				font-size: 32rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 500;
				color: rgba(0, 0, 0, 0.8);
			}

			.content-banner-detail {
				display: flex;
				justify-content: space-between;
				margin-top: 19rpx;
				padding-right: 28rpx;

				.banner-detail {
					display: flex;

					.banner-detail-title {
						margin-right: 14rpx;
						width: 77rpx;
						height: 42rpx;
						text-align: center;
						line-height: 42rpx;
						border-radius: 7rpx 7rpx;
						opacity: 1;
						border: 1px solid #FF8C1A;
						font-size: 25rpx;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #FF8C1A;
					}

					.banner-detail-detail {
						font-size: 28rpx;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #666666;
					}
				}

			}

		}

		.content-banner1 {
			width: 694rpx;
			height: 221rpx;
			background: #FFFFFF;
			border-radius: 21rpx 21rpx;
			margin: 0 auto;
			margin-top: 25rpx;
			padding-left: 28rpx;
			padding-top: 28rpx;

			.content-banner-title {
				display: flex;
				justify-content: space-between;
				font-size: 32rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 500;
				color: rgba(0, 0, 0, 0.8);
			}

			.content-banner-detail {
				display: flex;
				justify-content: space-between;
				margin-top: 19rpx;
				padding-right: 28rpx;

				.banner-detail {
					display: flex;

					.banner-detail-title {
						margin-right: 14rpx;
						width: 77rpx;
						height: 42rpx;
						text-align: center;
						line-height: 42rpx;
						border-radius: 7rpx 7rpx;
						opacity: 1;
						border: 1px solid #FF8C1A;
						font-size: 25rpx;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #FF8C1A;
					}

					.banner-detail-detail {
						font-size: 28rpx;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #666666;
					}
				}

			}

		}

		.content-sort {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			width: 694rpx;
			height: 361rpx;
			background: #FFFFFF;
			border-radius: 21rpx 21rpx;
			margin: 0 auto;
			margin-top: 32rpx;


			.content-sort-con {

				width: 25%;
				text-align: center;
				margin-top: 28rpx;

				.sort-img {
					width: 88rpx;
					height: 88rpx;
					margin: 0 auto;

					image {
						width: 100%;
						height: 100%;
					}
				}
			}
		}

		.content-bootom {
			width: 694rpx;

			background: #FFFFFF;
			border-radius: 21rpx 21rpx;
			margin: 0 auto;
			margin-top: 32rpx;
			margin-bottom: 32rpx;


			.content-bootom-top {
				display: flex;
				justify-content: space-between;
				padding: 28rpx 28rpx;


				.bootom-top-one {
					font-size: 32rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 500;
					color: rgba(0, 0, 0, 0.8);
				}

				.bootom-top-two {
					font-size: 25rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #000000;
				}
			}

			.content-bootom-detail {
				padding: 28rpx 28rpx;

				.bootom-detail {

					padding-bottom: 21rpx;
					padding-top: 21rpx;
					border-bottom: 1px solid #CCCCCC;

					.bootom-detail-one {
						display: flex;
						justify-content: space-between;


						.detail-one-a {
							width: 63rpx;
							height: 35rpx;
							line-height: 35rpx;
							text-align: center;
							background: #FFE4E4;
							border-radius: 7rpx 7rpx;
							font-size: 25rpx;
							font-family: PingFang SC-Regular, PingFang SC;
							font-weight: 400;
							color: #F24848;
						}

						.detail-one-b {
							width: 450rpx;
							overflow: hidden;
							font-size: 28rpx;
							font-family: PingFang SC-Medium, PingFang SC;
							font-weight: 500;
							color: rgba(0, 0, 0, 0.8);
						}

						.detail-one-c {
							width: 116rpx;
							height: 49rpx;
							line-height: 49rpx;
							text-align: center;
							background: #DFFCDF;
							border-radius: 74rpx 74rpx;
							font-size: 28rpx;
							font-family: PingFang SC-Regular, PingFang SC;
							font-weight: 400;
							color: #F24848;
						}
					}

					.bootom-detail-two {
						.detail-twoa {
							font-size: 25rpx;
							font-family: PingFang SC-Regular, PingFang SC;
							font-weight: 400;
							color: #333333;
							margin-top: 21rpx;
						}

						.detail-twob {
							font-size: 25rpx;
							font-family: PingFang SC-Regular, PingFang SC;
							font-weight: 400;
							color: #999999;
							margin-top: 14rpx;
						}
					}
				}
			}
		}

	}
</style>