<template>
	<view class="workbench">
		<view style="position: relative;overflow: hidden;">
			<view
				style="position: absolute;top:0;left:0;bottom:0;right:0;height: 290rpx;background-image: url(../../static/workSpace/bgimg.png);background-position: center bottom;background-size: 100%;">
			</view>
			<view class="top-title" style="display: flex;">
				<block v-for="(item,index) in routerList" :key="item.index">
					<view class="title-item" @click="goInto(index)">
						<view class="title-icon">
							<image :src="require('@/static/workSpace/'+item.icon+'')" mode="widthFix"></image>
						</view>
						<text class="title-text">{{item.name}}</text>
					</view>
				</block>
			</view>
		</view>
		<view style="height: 22rpx;">
		</view>
		<view class="my-apply">
			<view class="title">
				<view class="">
					<image src="../../static/home/daiban.png" mode="widthFix" class="img"></image>
					<text class="title-text-left">作业管理</text>
				</view>
				<view class="" @click="goIntoMoreApply('operation')">
					<text class="title-text-right">查看更多</text>
					<uni-icons type="right" :size="15" color="#ababab"></uni-icons>
				</view>
			</view>
			<view class="line"></view>
		</view>

		<view class="my-apply">
			<view class="title">
				<view class="">
					<image src="../../static/home/daiban.png" mode="widthFix" class="img"></image>
					<text class="title-text-left">入场项目</text>
				</view>
				<view class="" @click="goIntoMoreApply('rpj')">
					<text class="title-text-right">查看更多</text>
					<uni-icons type="right" :size="15" color="#ababab"></uni-icons>
				</view>
			</view>
			<view class="line"></view>
		</view>

		<view class="my-apply">
			<view class="title">
				<view class="">
					<image src="../../static/home/daiban.png" mode="widthFix" class="img"></image>
					<text class="title-text-left">来访项目</text>
				</view>
				<view class="" @click="goIntoMoreApply('visit')">
					<text class="title-text-right">查看更多</text>
					<uni-icons type="right" :size="15" color="#ababab"></uni-icons>
				</view>
			</view>
			<view class="line"></view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				name: "",
				username: "",
				routerList: [{
						name: '新增作业',
						icon: 'specialmatter.png',
						path: 'index',
					},
					{
						name: '新增入厂',
						icon: 'hetong.png',
						path: 'index'
					},
					{
						name: '新增来访',
						icon: 'renli.png',
						path: 'index'
					},
				],
				myApplyArray: [],
				mytopimg: require("@/static/workSpace/bgimg-top.jpg"),
			}
		},
		onShow() {
			// this._getMyApply();
			// this.getUserInfo();
		},
		methods: {
			goInto(index) {
				if (index == 0) {
					uni.navigateTo({
						url: '/pages/workSpace/operation/operationCreate'
					})
				} else if (index == 1) {
					uni.navigateTo({
						url: '/pages/workSpace/rpj/rpjCreate'
					})
				} else if (index == 2) {
					uni.navigateTo({
						url: '/pages/workSpace/visit/visitCreate'
					})
				}

			},
			getUserInfo() {
				var promise;
				var that = this;
				promise = new Promise(function(resolve, reject) {
					authUser().then(res => {
						if (res.statusCode === 200) {
							const principal = res.data.principal;
							that.username = principal.username;
							resolve()
						} else {
							uni.showToast({
								title: '获取用户信息失败',
								icon: 'none'
							})
						}
					}).catch(err => {
						uni.showToast({
							title: 'user请求失败',
							icon: 'none'
						})
					})
				})
				promise.then(function() {

					//查看当前用户路由
					getCurrentUserRoute(that.username).then(res => {
						if (res.statusCode === 200) {
							const routes = res.data.data.routes;
							that.initList(routes);
						} else {
							uni.showToast({
								title: '获取当前用户路由失败',
								icon: 'none'
							})
						}
					}).catch(err => {
						uni.showToast({
							title: '获取路由失败',
							icon: 'none'
						})
					})
				})

			},
			/* 跳转详情页 */
			intoUpdataPage(val) {

				this.$store.commit("clearAllStoreData"); /* 清空选择人员时留存的数据 */
				const routeObj = routeArray.find(item => {
					return item.pcRoute == val.menuID;
				})
				const params =
					`?pkId=${val.pkId}&itemId=${val.itemId}&execId=${val.execId}&eventStatus=${val.eventStatus}&detail=${true}`;
				uni.navigateTo({
					url: routeObj.appAdd + params,

				})
			},

			/* 获取列表数据 */
			_getMyApply() {
				getMyApply().then(res => {
					if (res.statusCode === 200) {
						let list = res.data.data.rows;
						if (list && list.length > 0) {
							list = list.slice(0, 3);
						}
						list = list.map(item => {
							if (!item.submissionTime) {
								item.submissionTime = "";
							}
							if (item.eventStatus == 3) { //审核中
								item.statusColor = '#2c6fd9';
							}
							if (item.eventStatus == 1) { //审核通过
								item.statusColor = '#15a306';
							}
							if (item.eventStatus == 0) { //退回
								item.statusColor = '#e2053e';
							}

							return item;
						});

						this.myApplyArray = list;
					} else {
						this.myApplyArray = [];
						uni.showToast({
							title: res.data.message,
							icon: 'none'
						})
					}
				}).catch(err => {
					this.myApplyArray = [];
					uni.showToast({
						title: '网络异常, 请求失败',
						icon: 'none'
					})
				})
			},


			/*  -----------------顶部模块页面跳转-----------------------------------------------*/
			/* 没有子页面的模块 */
			goSingleIntoPage(path) {
				let url = "";
				switch (path) {
					case 'index':
						url = '/pages/workbench/new_apply/xinwen_management/xinwen';
						break;
				}
				uni.navigateTo({
					url
				})
			},

			/* 存在子页面的模块 。顺序与上边文字顺序一一对应*/
			intoAddPage(e, urls) {
				const i = parseInt(e.target.value);
				let url = urls[i];
				uni.navigateTo({
					url
				})
			},



			goIntoMoreApply(index) {
				if (index === 'operation')
					uni.navigateTo({
						url: '/pages/workSpace/operation/operationList'
					})
				else if (index === 'rpj')
					uni.navigateTo({
						url: '/pages/workSpace/rpj/rpjLisst'
					})
				else if (index === 'visit')
					uni.navigateTo({
						url: '/pages/workSpace/visit/visitList'
					})
			}
		}
	}
</script>

<style scoped>
	.my-nav-bar {}

	.workbench-picker {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		background-color: transparent;
		color: transparent;
	}

	.workbench {
		position: relative;
		background-color: #edf8ff;
		padding-bottom: 17rpx;
	}

	.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;

	}

	.top-title {
		width: 720rpx;
		height: auto;
		background-color: #FFFFFF;
		border-radius: 10rpx;
		margin-top: 190rpx;
		margin-left: 50%;
		transform: translateX(-50%);
		display: flex;
		justify-content: space-around;
		flex-wrap: wrap;
		padding-bottom: 20rpx;
	}

	.title-item {
		width: 20%;
		text-align: center;
		padding-top: 20rpx;
		box-sizing: border-box;
		position: relative;
	}

	.title-icon image {
		width: 77rpx;

		border-radius: 50%;

	}

	.title-text {
		font-size: 26rpx;
		color: #383838;

	}

	.empty-view {
		height: 390rpx;
	}

	.my-apply {
		width: 720rpx;
		margin: 0 auto;
		border-radius: 10rpx;

	}

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

	.my-apply .title {
		display: flex;
		justify-content: space-between;
		padding: 21rpx 21rpx;
		background-color: #FFFFFF;

	}

	.my-apply .title .img {
		width: 30rpx;
		height: 30rpx;
		margin-right: 10rpx;
	}

	.my-apply .title-text-left {
		font-family: PingFang-SC-Medium;
		font-size: 34rpx;
		line-height: 72rpx;
		letter-spacing: 0rpx;
		color: #383838;
	}

	.my-apply .title-text-right {
		font-family: PingFang-SC-Medium;
		font-size: 24rpx;
		line-height: 72rpx;
		letter-spacing: 0rpx;
		color: #ababab;
		margin-right: 10rpx;
	}

	.apply-item {
		line-height: 50rpx;
		padding: 0 21rpx;
		margin-bottom: 17rpx;
		background-color: #FFFFFF;
	}

	.apply-item .image {
		width: 55rpx;
		height: 55rpx;
		border-radius: 50%;
		vertical-align: middle;
	}

	.apply-item .apply-title {
		font-family: PingFang-SC-Medium;
		font-size: 30rpx;
		line-height: 72rpx;
		letter-spacing: -2rpx;
		color: #3d3d3d;
		margin-left: 15rpx;
		margin-right: 20rpx;
		display: -webkit-box;
		overflow: hidden;
		text-overflow: ellipsis;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
		flex: 1;
	}

	.apply-item .apply-status {
		font-family: PingFang-SC-Medium;
		font-size: 26rpx;
		line-height: 72rpx;
		letter-spacing: -2rpx;
		color: #2c6fd9;
	}

	.apply-item .apply-time {
		font-family: PingFang-SC-Regular;
		font-size: 24rpx;
		letter-spacing: 0rpx;
		color: #ababab;

	}

	.apply-item .apply-content {
		flex: 1;
		font-size: 28rpx;
		letter-spacing: -2rpx;
		margin-left: 15rpx;
		color: #5b5b5b;
		display: -webkit-box;
		overflow: hidden;
		text-overflow: ellipsis;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
	}
</style>
