<template>
	<div class="choicepart-container">
		<navbar />
		<div class="choicepart-wrapper">
			<div
				class="choicepart-box"
				id="choicepartBox"
				:style="'transform:scale(' + scale + ')'"
				style="width: 1710px; height: 538px"
				v-show="showItem">
				<div class="choicepart-line1">
					<div
						v-for="(item, index) in menuArr1"
						:key="index"
						class="choicepart-item"
						@click="handelClick(item, item.choicepart)"
						:style="{
							opacity: item.visible ? 1 : 0.4,
							pointerEvents: item.visible ? 'auto' : 'none',
						}">
						<div>
							<img
								:src="
									require(`../../assets/images/choicepart/${item.name}.png`)
								"
								alt="" />
						</div>
						<div class="choicepart-item-title">{{ item.meta.title }}</div>
					</div>
				</div>
				<div class="choicepart-line2">
					<div
						v-for="(item, index) in menuArr2"
						:key="index"
						class="choicepart-item"
						@click="handelClick(item, item.choicepart)"
						:style="{
							opacity: item.visible ? 1 : 0.4,
							pointerEvents: item.visible ? 'auto' : 'none',
						}">
						<div>
							<img
								:src="
									require(`../../assets/images/choicepart/${item.name}.png`)
								"
								alt="" />
						</div>
						<div class="choicepart-item-title">{{ item.meta.title }}</div>
					</div>
				</div>
			</div>
		</div>
		<div class="choicepart-footer">&copy; 中建材智能自动化研究院有限公司</div>
	</div>
</template>
<script>
import Navbar from './components/Navbar';
import { debounce } from '@/utils/debounce';
export default {
	components: { Navbar },
	name: 'choicePart',
	data() {
		return {
			scale: 1,
			menuArr1: [
				{
					name: 'Core',
					title: '基础核心',
					visible: false,
					meta: {
						title: '',
					},
				},
				{
					name: 'Order',
					title: '订单管理',
					visible: false,
					meta: {
						title: '',
					},
				},
				{
					name: 'Equipment',
					title: '设备管理',
					visible: false,
					meta: {
						title: '',
					},
				},
				{
					name: 'Group',
					title: '班组管理',
					visible: false,
					meta: {
						title: '',
					},
				},
				{
					name: 'Quality',
					title: '质量管理',
					visible: false,
					meta: {
						title: '',
					},
				},
				{
					name: 'Warehouse',
					title: '仓库管理',
					visible: false,
					meta: {
						title: '',
					},
				},
				{
					name: 'Energy',
					title: '能源管理',
					visible: false,
					meta: {
						title: '',
					},
				},
				{
					name: 'Packaging',
					title: '包装管理',
					visible: false,
					meta: {
						title: '',
					},
				},
			],
			menuArr2: [
				{
					name: 'Material',
					title: '物料管理',
					visible: false,
					meta: {
						title: '',
					},
				},
				{
					name: 'Extend',
					title: '工艺管理',
					visible: false,
					meta: {
						title: '',
					},
				},
				// {
				//   name: 'Delivery',
				//   title: '成品发货',
				//   visible: false,
				//   meta: {
				//     title: ''
				//   }
				// },
				{
					name: 'Report',
					title: '报表管理',
					visible: false,
					meta: {
						title: '',
					},
				},
				{
					name: 'Cost',
					title: '成本管理',
					visible: false,
					meta: {
						title: '',
					},
				},
				{
					name: 'SafetyEnvironmental',
					title: '安环管理',
					visible: false,
					meta: {
						title: '',
					},
				},
				{
					name: 'Databoard',
					title: '数据驾驶舱',
					visible: false,
					meta: {
						title: '',
					},
				},
				{
					name: 'System',
					title: '系统管理',
					visible: false,
					meta: {
						title: '',
					},
				},
			],
			showItem: false,
		};
	},
	// computed:{
	//   ...mapGetters(['sidebarRouters'])
	// },
	mounted() {
		this.getMsg();
		this.boxReset();
		window.addEventListener('resize', this.boxReset);
	},
	destroyed() {
		window.removeEventListener('resize', this.boxReset);
	},
	methods: {
		boxReset() {
			debounce(() => {
				this.resetSize();
			}, 300)();
		},
		getMsg() {
			let menuList = this.$store.state.permission.sidebarRouters;
			console.log(menuList);
			if (menuList.length > 0) {
				for (let i = 0; i < menuList.length; i++) {
					for (let k = 0; k < 8; k++) {
						if (menuList[i].name === this.menuArr1[k].name) {
							this.menuArr1[k].visible = true;
							this.menuArr1[k].id = menuList[i].id;
							this.menuArr1[k].choicepart = i;
							this.menuArr1[k].children = menuList[i].children;
							this.menuArr1[k].meta = menuList[i].meta;
						}
					}
					for (let j = 0; j < 7; j++) {
						if (menuList[i].name === this.menuArr2[j].name) {
							this.menuArr2[j].visible = true;
							this.menuArr2[j].id = menuList[i].id;
							this.menuArr2[j].choicepart = i;
							this.menuArr2[j].children = menuList[i].children;
							this.menuArr2[j].meta = menuList[i].meta;
						}
					}
				}
			}
			console.log(this.menuArr1);
			console.log(this.menuArr2);
		},
		handelClick(item, index) {
			// this.$router.push({name: 'SystemUser'})
			this.$store.dispatch('app/setChoicepart', index);
			this.toRouter(item);
			// if (item.meta.unuse) {
			//   this.$message.warning(this.$t('暂无数据'))
			// } else {
			//   this.toRouter(item)
			// }
		},
		toRouter(item) {
			console.log(item);
			if (item.children) {
				this.toRouter(item.children[0]);
			} else {
				this.$router.push({ name: item.name });
			}
		},
		resetSize() {
			let _this = this;
			_this.showItem = false;
			_this.loading = true;
			let choicepartBox = document.querySelector('#choicepartBox');
			let rw = parseFloat(window.innerWidth);
			let rh = parseFloat(window.innerHeight);
			let bw = parseFloat(choicepartBox.style.width);
			let bh = parseFloat(choicepartBox.style.height);
			let wx = 0.82 / (bw / rw);
			let hx = 0.56 / (bh / rh);
			_this.scale = wx > hx ? hx : wx;
			setTimeout(_this.showItemFun, 700);
		},
		showItemFun() {
			this.loading = false;
			this.showItem = true;
		},
	},
	beforeDestroy() {
		this.showItem = false;
	},
};
</script>
<style lang='scss' scoped>
.choicepart-container {
	position: relative;
	width: 100%;
	height: 100%;
	background: url('../../assets/images/choicepart/choicepart-back.png') repeat;
	background-size: 100% 100%;
	.choicepart-wrapper {
		width: 100vw;
		height: calc(100vh - 94px);
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.choicepart-box {
		// transition: all 0.3s linear;
		.choicepart-line1 {
			width: 100%;
			margin-bottom: 80px;
			display: flex;
			flex-flow: row nowrap;
		}
		.choicepart-line2 {
			width: 100%;
			display: flex;
			flex-flow: row nowrap;
			justify-content: center;
		}
		.choicepart-item {
			width: 184px;
			height: 224px;
			background: url('../../assets/images/choicepart/choice-item-back.png')
				no-repeat;
			background-size: 100% 100%;
			border-radius: 5px;
			overflow: hidden;
			cursor: pointer;
			position: relative;
			margin: 0 20px;
			img {
				width: 184px;
				height: 224px;
			}
			.choicepart-item-title {
				overflow: hidden;
				padding: 0 10px;
				text-overflow: ellipsis;
				white-space: nowrap;
				position: absolute;
				bottom: 0;
				left: 2px;
				right: 2px;
				text-align: center;
				color: #fff;
				font-size: 16px;
				line-height: 40px;
				height: 40px;
				letter-spacing: 2px;
				background-color: rgba($color: #0b58ff, $alpha: 0.45);
			}
		}
		.choicepart-item:hover {
			.choicepart-item-title {
				background-color: rgba($color: #0b58ff, $alpha: 1);
			}
		}
	}
	.choicepart-footer {
		position: absolute;
		width: 100%;
		color: #c7c7c7;
		user-select: none;
		font-size: 12px;
		letter-spacing: 1px;
		height: 30px;
		display: grid;
		place-content: center;
		bottom: 0;
		opacity: 0.5;
	}
}
</style>