<template>

	<view class="work-container" style="">

		<!-- 		<uni-nav-bar shadow right-icon="plusempty" @clickRight="rightClick" :fixed="true" :shadow="false"
			:border="false" title="工作台" /> -->
		<u-sticky>
			<!-- <view style="display: flex; width: 100vw;position: absolute;z-index: 1;"> -->
			<uni-search-bar style="width: 100%;position: absolute;top: 10px;" bgColor="#FFFFFF" placeholder="请输入搜索内容"
				ref="searchBar" cancelButton="none" @focus="goSearchClick" />
			<!-- </view> -->
		</u-sticky>
		<u-back-top :scroll-top="scrollTop" style="bottom: 100px;"></u-back-top>
		<view class="uni-flex uni-column">
			<view class="flex-item flex-item-V">
				<image :src="src" mode="aspectFill" style="width: 100%;height: 200rpx;" />
			</view>
		</view>

		<view v-for="(item, index) in datalist" :key="index">
			<u-grid v-if="shouldShowGrid(item.data)" :border="false" col="4"
				style="background-color: #fff;margin: 10px 0;border-radius: 3px;">
				<uni-title type="h3" :title="item.name" style="margin: 10px 10px;width: 100%;flex: auto;"></uni-title>
				<u-grid-item v-for="(data,dataIndex) in item.data" :key="dataIndex" @click="selectgrid(data)"
					v-if="checkPermi([data.permission])">
					<uni-icons v-if="data.icon.includes('icon')" class="uni-icons"
						:style="{'background': data.color,'-webkit-background-clip': 'text','-webkit-text-fill-color': 'transparent',}"
						custom-prefix="iconfont" :type="data.icon" color="transparent" size="30" />
					<uni-icons v-else class="uni-icons" :type="data.icon"
						:style="{'background': data.color,'-webkit-background-clip': 'text','-webkit-text-fill-color': 'transparent'}"
						color="transparent" size="30" />
					<text class="text">{{data.style.navigationBarTitleText}}</text>
				</u-grid-item>
			</u-grid>
		</view>
		<!-- 		<u-picker :show="showMenu" @close="Menuclose" @confirm="confirm" @cancel="cancel" :columns="columns"
			:closeOnClickOverlay="true"></u-picker> -->
		<u-action-sheet :actions="columns" @select="confirm" cancelText="取消" @close="cancel" title="请选择模式"
			:show="showMenu" :closeOnClickOverlay="true"></u-action-sheet>
		<u-action-sheet :actions="list" @select="selectTask" cancelText='取消' @close="close" :closeOnClickOverlay="true"
			:closeOnClickAction="true" description='请选择任务' :show="show"></u-action-sheet>
		<u-action-sheet :actions="invQuicklist" @select="selectTask" cancelText='取消' @close="invQuickclose"
			:closeOnClickOverlay="true" :closeOnClickAction="true" description='请选择盘点类型'
			:show="invQuickshow"></u-action-sheet>

		<!-- 	<view>
	    <u-sticky>
	      <u-tabs
	        :current="currentTab"
	        :list="datalist"
	        @click="handleTabClick"
	      ></u-tabs>
	    </u-sticky>
	
	    <view v-for="(item, index) in datalist" :key="index"> -->
		<!-- 锚点内容 -->
		<!-- 		  <view :id="'section'+index" class="section">
	      <view class="grid-body" style="background-color: #fff;margin: 10px 0;border-radius: 3px;">
	      	<uni-title type="h3" :title="item.name" style="margin-left: 10px;"></uni-title>
	      	<uni-grid :column="4" :showBorder="false" @change="changeGrid10" :open="true" v-for="(data,dataIndex) in item.data">
	      		<uni-grid-item :index="dataIndex+1" >
	      			<view class="grid-item-box" style="">
	      			  <uni-icons class="uni-icons" custom-prefix="iconfont" :type="data.icon" :color="data.color" size="30"></uni-icons>
	      			</view>
	      			<text class="text">{{data.style.navigationBarTitleText}}</text>
	      		</uni-grid-item>
	      	</uni-grid>
	      </view>
		  </view>
	      </view>
	    </view> -->
	</view>
</template>

<script>
	import {
		version
	} from "vue"
	import datalist from "./indexList.json"
	import {
		checkPermi,
		checkRole
	} from "@/utils/permission";
	export default {
		mounted() {
			// #ifdef APP-PLUS
			var version = plus.runtime.version;
			// #endif
		},
		components: {},
		data() {
			return {
				invQuickshow: false,
				showMenu: false,
				scrollTop: 0,
				src: '/static/images/banner/mes_banner.jpg',
				datalist: datalist,
				show: false,
				list: [{
						name: '保养任务',
						path: '/pages/tpm/maintainTask'
					},
					{
						name: '点检任务',
						path: '/pages/tpm/checkTask'
					},
					{
						name: '维修任务',
						path: '/pages/tpm/repairTask'
					}
				],
				invQuicklist: [{
						name: '快速盘点',
						path: '/pages/wms/stock/addInvQuick?key=1'
					},
					{
						name: '期初盘点',
						path: '/pages/wms/stock/addInvQuick?key=2'
					}
				],
				// 右边菜单内容
				options: [{
						value: 'update',
						text: '选修'
					},
					{
						value: 'forbit',
						text: '禁止'
					}
				],
				// columns: [
				// 	['常规功能', 'MES智能终端']
				// ],
				columns: [{
						name: '常规功能',
						path: '/pages/work/index'
					},
					{
						name: 'MES智能终端',
						path: '/pages/work/mesIT'
					},
				],
			}
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		methods: {
			shouldShowGrid(dataList) {
				for (const data of dataList) {
					if (this.checkPermi([data.permission])) {
						return true; // 如果有一个u-grid-item可以显示，则显示u-grid
					}
				}
				return false; // 如果没有一个u-grid-item可以显示，则不显示u-grid
			},
			checkPermi,
			Menuclose() {
				this.showMenu = false
			},
			confirm(e) {
				console.log(e)
				// if (e.value == '常规功能') {
				// 	this.$tab.reLaunch('/pages/work/index');
				// } else if (e.value == 'MES智能终端') {
				// 	this.$tab.reLaunch('/pages/work/mesIT');
				// }
				this.$tab.reLaunch(e.path);
			},
			cancel() {
				this.showMenu = false
			},
			onNavigationBarButtonTap(e) {
				console.log(e)
				this.showMenu = !this.showMenu;
			},
			rightClick() {
				console.log('rightClick');
			},
			selectgrid(item) {
				if (item) {
					if (item.path) {
						this.$tab.navigateTo(item.path);
					} else if (item.style.navigationBarTitleText == '任务查看') {
						this.show = true;
					} else if (item.style.navigationBarTitleText == '新增快速盘点') {
						this.invQuickshow = true;
					}
				}
			},
			goSearchClick() {
				this.$tab.navigateTo("/pages/work/searchIndex/searchIndex");
			},
			selectTask(e) {
				console.log(e);
				this.$tab.navigateTo(e.path);
			},
			close() {
				this.show = false;
			},
			invQuickclose() {
				this.invQuickshow = false;
			}
		}
	}
</script>

<style lang="scss">
	.menu {
		position: fixed;
		top: 44px;
		right: 0;
		width: 120px;
		background-color: #fff;
		border: 1px solid #ccc;
	}

	.wrap {
		height: 200vh;
	}

	.work-container {
		// background: white;
		min-height: 50vh;
	}

	.tabs {
		position: sticky;
		z-index: 970;
		top: 0px;
		background-color: #fff;
		width: 100vw;

		.tabsStyle {
			box-shadow: 0 2rpx 6rpx 0 rgba(153, 153, 153, 0.2);

			::v-deep {
				.u-tabs {
					box-shadow: 0px 4px 6px 0 rgba(153, 153, 153, 0.2);
				}
			}
		}
	}

	/* #ifndef APP-NVUE */
	page {
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		// background-color: #fff;
		min-height: 100%;
		height: auto;
	}

	view {
		// font-size: 20px;
		line-height: inherit;
	}

	/* #endif */

	.text {
		text-align: center;
		// font-size: 30rpx;
		margin-top: 10px;
		// color: #fff;
		position: relative;
		bottom: 10px;
		font-weight: bold;
	}

	.grid-item-box {
		flex: 1;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		align-items: center;
		justify-content: center;
		// padding: 15px 0;
		margin: 10px 21px;
		// background-color: #0F6C8E;
		border-radius: 7px;
	}


	.uni-margin-wrap {
		width: 690rpx;
		width: 100%;
		;
	}

	.swiper {
		height: 300rpx;
	}

	.swiper-box {
		height: 150px;
	}

	.swiper-item {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		justify-content: center;
		align-items: center;
		color: #fff;
		height: 300rpx;
		line-height: 300rpx;
	}

	@media screen and (min-width: 320px) {
		.uni-swiper-dot-box {
			width: 400px;
			/* #ifndef APP-NVUE */
			margin: 0 auto;
			/* #endif */
			margin-top: 8px;
		}

		.image {
			width: 100%;
		}
	}

	//竖屏
	@media screen and (min-width: 600px) and (orientation:portrait) {
		.grid-item-box {
			margin: 20px 40px;
		}

		.text {
			bottom: 10px;
		}

		.uni-icons {
			font-size: 50px !important;
		}
	}

	//横屏
	@media screen and (min-width: 600px) and (orientation:landscape) {
		// .uni-swiper-dot-box {
		//      width: 400px;
		//      /* #ifndef APP-NVUE */
		//      margin: 0 auto;
		//      /* #endif */
		//      margin-top: 8px;
		//    }

		.image {
			width: 100%;
		}

		.grid-item-box {
			margin: 50px 70px;
		}

		.text {
			bottom: 10px;
			font-size: 24px
		}

		.uni-icons {
			font-size: 60px !important;


		}

		::v-deep .uni-btn-icon {
			font-size: 60px !important;
		}

		::v-deep .uniui-search {
			font-size: 40px
		}

		::v-deep .uni-h3 {
			font-size: 24px;
		}

		::v-deep .uni-searchbar__box {
			height: 50px;
		}


		::v-deep.uni-searchbar__text-placeholder {
			font-size: 24px
		}

		::v-deep .u-action-sheet__header__title {
			font-size: 24px
		}


		::v-deep .u-icon__icon .uicon-close {
			font-size: 35px
		}

		::v-deep.u-action-sheet__item-wrap__item__name {
			font-size: 24px
		}

		.u-action-sheet__cancel-text {
			font-size: 24px
		}
	}
</style>