<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;">
				<view class="title-item" @click="goInto(0)" v-if="limitedOperation">
					<view class="title-icon">
						<image :src="require('@/static/workSpace/specialmatter.png')" mode="widthFix"></image>
					</view>
					<text class="title-text">新增作业</text>
				</view>
				<view class="title-item" @click="goInto(1)" v-if="limitedRpj">
					<view class="title-icon">
						<image :src="require('@/static/workSpace/hetong.png')" mode="widthFix"></image>
					</view>
					<text class="title-text">新增入厂</text>
				</view>
				<view class="title-item" @click="goInto(2)">
					<view class="title-icon">
						<image :src="require('@/static/workSpace/renli.png')" mode="widthFix"></image>
					</view>
					<text class="title-text">新增来访</text>
				</view>
				<view class="title-item" @click="goInto(3)">
					<view class="title-icon">
						<image :src="require('@/static/workSpace/yinzhang.png')" mode="widthFix"></image>
					</view>
					<text class="title-text">新增违章</text>
				</view>
			</view>
		</view>
		<view style="height: 22rpx;">
		</view>
		<view class="my-apply" v-if="limitedOperation">
			<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>

		<view class="my-apply" v-if="limitedRpj">
			<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>
		<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>
		<button v-if="vuex_user.type=='employee'" type="warn" class="backCard" @click="bindBtl">定位卡查看</button>
		<view id="detailWrap" v-if="detailLimited">
			<view class="workerContainer">
				<view v-if="itemDetail.employee_">
					<view class="workerInfo">
						<view class="infoTitle">姓名：</view><view>{{itemDetail.employee_.name}}</view>
					</view>
					<view class="workerInfo">
						<view class="infoTitle">手机：</view><view>{{itemDetail.employee_.number}}</view>
					</view>
					<view class="workerInfo">
						<view class="infoTitle">所属部门：</view><view>{{itemDetail.employee_.belong_dept_name}}</view>
					</view>
					<view class="workerInfo">
						<view class="infoTitle">所在岗位：</view><view>{{itemDetail.employee_.post_name}}</view>
					</view>
				</view>
				<view class="workerInfo">
					<view class="infoTitle">Mac号：</view><view v-if="itemDetail.code">{{itemDetail.code}}</view>
				</view>
				<view class="btnsWrap">
					<view class="btns cancel" @click="closeWorkerDetail">取消</view>
					<view class="btns equit" @click="tuika">退卡</view>
				</view>
			</view>
			<!-- <icon class="closeDetailIcon" type="cancel" size="36" color="#fefefe" @click="closeWorkerDetail"/> -->
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				name: "",
				username: "",
				limitedOperation:false,
				limitedRpj:false,
				limitedVisit:false,
				detailLimited:false,
				itemDetail:{},
				routerList: [{
						name: '新增作业',
						icon: 'specialmatter.png',
						path: 'index',
					},
					{
						name: '新增入厂',
						icon: 'hetong.png',
						path: 'index'
					},
					{
						name: '新增来访',
						icon: 'renli.png',
						path: 'index'
					},
				],
				form:{},
				myApplyArray: [],
				mytopimg: require("@/static/workSpace/bgimg-top.jpg"),
			}
		},
		onShow() {
			// debugger;
			console.log(this.vuex_user);
			console.log(this.vuex_perm);
			this.limitedRpj = this.vuex_perm.includes('rpj.create')||this.vuex_perm.includes('superuser');
			this.limitedOperation = this.vuex_perm.includes('operation.create')||this.vuex_perm.includes('superuser');
		},
		methods: {
			bindBtl(){
				let that = this;
				 uni.scanCode({
					 success: function (res) {
						 that.detailLimited = true;
						 let form = {};
						 form.type = 20;
						 form.code = res.result;
						 that.form = form;
						 that.$u.api.tdevice(form).then(res=>{
							 that.itemDetail = res.results[0];
						 })
					 }
				 });
			},
			tuika(){
				let that = this;
				that.$u.api.thirdBltBind(that.form).then(res=>{
					 uni.showToast({
						title: res,
						icon: "none"
					 })
					 that.detailLimited = false;
				}).catch(res=>{
					uni.showToast({
						title: res,
						icon: "none"
					})
				})
			},
			closeWorkerDetail(){
				this.detailLimited = false;
			},
			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'
					})
				}else if (index == 3) {
					uni.navigateTo({
						url: '/pages/workSpace/newWork/addViolation'
					})
				}
			},
			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;
		border-bottom: 1upx solid #eeeeee;
	}

	.line {
		width: 660rpx;
		height: 1upx;

		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;
	}
	.backCard {
		width: auto;
		height: 96rpx;
		border-radius: 25px;
		line-height: 48px;
		box-shadow: 0 0 6px 2px rgba(255, 170, 0, 0.3);
		z-index: 100;
		position: fixed;
		bottom: 80px;
		right: 20px;
	}
	
	#detailWrap{
		height: 100%;
		width: 100%;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 100;
		background: rgba(0,0,0,.6);
	}
	.workerContainer{
		position: relative;
		width: 90%;
		left: 5%;
		background: #ffffff;
		padding: 40upx 40upx 80upx 40upx;
		top: 50%;
		transform: translateY(-50%);
		max-height: 80%;
		overflow-y: scroll;
		border-radius: 20upx;
	}
	.workerInfo{
		display: flex;
		margin: 20upx 0;
	}
	.infoTitle{
		width: 170upx;
	}
	.closeDetailIcon{
		position: absolute;
		bottom: 5%;
		left: 50%;
		transform: translateX(-50%);
	}
	.btnsWrap{
		width: 100%;
		display: flex;
		position: absolute;
		bottom: 0;
		height: 80upx;
		line-height: 80upx;
	}
	.btnsWrap>.btns{
		width: 50%;
		text-align: center;
		color: #aaaaaa;
		box-sizing: border-box;
		border-top: 1upx solid #eeeeee;
	}	
	.btnsWrap>.btns.equit{
		color:#e64340 ;
		border-left: 1upx solid #eeeeee;
	}
</style>
