<template>
	<view class="warp">
		<uni-nav-bar dark :fixed="true" shadow background-color="#007AFF" status-bar title="计算工具" />
		<view>
			<!-- 流量计算 -->
			<view class="section-box">
				<text class="decoration"></text>
				<text class="section-text">{{ $t('llJs.grid') }}</text>
			</view>

			<view class="Grid">
				<view class="Grid-Item" v-for="(item, index) in llJsgridList" :key="index">
					<navigator :url="item.url">
						<view class="GSimg">
							<image class="Image" :src="getStaticFilePath('mianicon/' + item.icon)" mode="aspectFit"></image>
						</view>
						<view class="GStitle">{{ item.type }}</view>
					</navigator>
				</view>
			</view>

			<!-- 参数计算 -->
			<view class="section-box">
				<text class="decoration"></text>
				<text class="section-text">{{ $t('wxcsJs.grid') }}</text>
			</view>
			<view class="Grid">
				<view class="Grid-Item" v-for="(item, index) in wxcsJsgridList" :key="index">
					<navigator :url="item.url">
						<view class="GSimg">
							<image class="Image" :src="getStaticFilePath('mianicon/' + item.icon)" mode="aspectFit"></image>
						</view>
						<view class="GStitle">{{ item.type }}</view>
					</navigator>
				</view>
			</view>

			<!-- CNG计算 -->
			<view class="section-box">
				<text class="decoration"></text>
				<text class="section-text">{{ $t('CNGJs.grid') }}</text>
			</view>
			<view class="Grid">
				<view class="Grid-Item" v-for="(item, index) in CNGJsgridList" :key="index">
					<navigator :url="item.url">
						<view class="GSimg">
							<image class="Image" :src="getStaticFilePath('mianicon/' + item.icon)" mode="aspectFill"></image>
						</view>
						<view class="GStitle">{{ item.type }}</view>
					</navigator>
				</view>
			</view>

			<!-- <!-- CNG计算 -->
			<view class="section-box">
				<text class="decoration"></text>
				<text class="section-text">{{ $t('QtJs.grid') }}</text>
			</view>
			<view class="Grid">
				<view class="Grid-Item" v-for="(item, index) in QtJsgridList" :key="index">
					<navigator :url="item.url">
						<view class="GSimg">
							<image class="Image" :src="getStaticFilePath('mianicon/' + item.icon)" mode="aspectFill"></image>
						</view>
						<view class="GStitle">{{ item.type }}</view>
					</navigator>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
// import {
// 	getJsonTree,
// 	groupBy
// } from "@/js_sdk/util/jsonData";
import deviceinfo from '@/js_sdk/dc-deviceinfo/deviceinfo.js';
import { saveDepartStore, saveDictItemStore } from '@/js_sdk/util/dictTools';

// #ifdef APP-PLUS
import statusBar from '@/uni_modules/uni-nav-bar/components/uni-nav-bar/uni-status-bar';
// #endif
const db = uniCloud.database();

export default {
	// #ifdef APP-PLUS
	components: {
		statusBar
	},
	// #endif
	data() {
		return {
			llJsgridList: [],
			wxcsJsgridList: [],
			CNGJsgridList: [],
			QtJsgridList: [],
			current: 0,
			hasLogin: false,
			CPUNo: [],
			msgList: []
		};
	},
	onShow() {
		this.hasLogin = uniCloud.getCurrentUserInfo().tokenExpired > Date.now();
	},
	mounted() {
		//#ifdef APP

		plus.device.getInfo({
			success: function (e) {
				console.log('getDeviceInfo success: ' + JSON.stringify(e));
			},
			fail: function (e) {
				console.log('getDeviceInfo failed: ' + JSON.stringify(e));
			}
		});
		// this.CPUNo=JSON.stringify(plus.device.getInfo())
		//#endif

		let that = this;
		uni.getSystemInfo({
			success: function (res) {
				// console.log(res)
			}
		});
	},
	onLoad() {
		this.getGrid();
		saveDictItemStore();
		saveDepartStore();
	},
	methods: {
		getGrid() {
			let gridList = [];
			gridList.push({
				type: this.$t('llJs.cysllJs.title'),
				url: this.$t('llJs.cysllJs.url'),
				icon: this.$t('llJs.cysllJs.icon')
			});
			gridList.push({
				type: this.$t('llJs.sdsllJs.title'),
				url: this.$t('llJs.sdsllJs.url'),
				icon: this.$t('llJs.sdsllJs.icon')
			});
			gridList.push({
				type: this.$t('llJs.ljlllJs.title'),
				url: this.$t('llJs.ljlllJs.url'),
				icon: this.$t('llJs.ljlllJs.icon')
			});

			this.llJsgridList = gridList;
			gridList = [];
			gridList.push({
				type: this.$t('wxcsJs.ysyzJs.title'),
				url: this.$t('wxcsJs.ysyzJs.url'),
				icon: this.$t('wxcsJs.ysyzJs.icon')
			});
			gridList.push({
				type: this.$t('wxcsJs.rzJs.title'),
				url: this.$t('wxcsJs.rzJs.url'),
				icon: this.$t('wxcsJs.rzJs.icon')
			});
			gridList.push({
				type: this.$t('wxcsJs.qtJs.title'),
				url: this.$t('wxcsJs.qtJs.url'),
				icon: this.$t('wxcsJs.qtJs.icon')
			});
			this.wxcsJsgridList = gridList;

			gridList = [];

			gridList.push({
				type: this.$t('CNGJs.srjJs.title'),
				url: this.$t('CNGJs.srjJs.url'),
				icon: this.$t('CNGJs.srjJs.icon')
			});
			gridList.push({
				type: this.$t('CNGJs.zxcJs.title'),
				url: this.$t('CNGJs.zxcJs.url'),
				icon: this.$t('CNGJs.zxcJs.icon')
			});
			gridList.push({
				type: this.$t('CNGJs.LNGQhJs.title'),
				url: this.$t('CNGJs.LNGQhJs.url'),
				icon: this.$t('CNGJs.LNGQhJs.icon')
			});
			this.CNGJsgridList = gridList;
			gridList = [];

			gridList.push({
				type: this.$t('QtJs.ZBGJs.title'),
				url: this.$t('QtJs.ZBGJs.url'),
				icon: this.$t('QtJs.ZBGJs.icon')
			});
			gridList.push({
				type: this.$t('QtJs.srjBGJs.title'),
				url: this.$t('QtJs.srjBGJs.url'),
				icon: this.$t('QtJs.srjBGJs.icon')
			});
			// gridList.push({
			// 	"type": this.$t('QtJs.SqgyJs.title'),
			// 	"url": this.$t('QtJs.SqgyJs.url')
			// })
			this.QtJsgridList = gridList;
		},

		/**
		 * banner加载后触发的回调
		 */
		onqueryload(data) {
			// console.log(JSON.stringify(data))
		},
		changeSwiper(e) {
			this.current = e.detail.current;
		},
		/**
		 * 点击banner的处理
		 */
		clickBannerItem(item) {
			// 有外部链接-跳转url
			if (item.open_url) {
				uni.navigateTo({
					url: '/uni_modules/uni-id-pages/pages/common/webview/webview?url=' + item.open_url + '&title=' + item.title,
					success: (res) => {},
					fail: () => {},
					complete: () => {}
				});
			}
			// 其余业务处理
		}
	}
};
</script>

<style lang="scss">
/* #ifndef APP-NVUE */
page {
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	background-color: #fff;
	min-height: 100%;
	height: auto;
}

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

/* #endif */

.section-box {
	display: flex;
	flex-direction: row;
	align-items: left;
	padding-left: calc(10vw / 2);
	padding-top: 10px;
	padding-bottom: 10px;
}

.decoration {
	width: 4px;
	height: 12px;
	border-radius: 10px;
	background-color: #2979ff;
	// margin-left: 30rpx;
}

.section-text {
	color: blue;
	margin-left: 10rpx;
	font-size: 16px;
}

/* #ifdef APP-NVUE */
.warp {
	background-color: #fff;
}

/* #endif */

.Grid {
	width: 90vw;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-content: space-between;
	padding-left: calc(10vw / 2);
	column-gap: calc(25% / 3);
	row-gap: 5rpx;
	box-sizing: content-box;

	.Grid-Item {
		width: 25%;
		height: 150rpx;
		text-align: center;
		border: 0rpx solid #ccc;
		box-sizing: content-box;
		background: #ffffff;
		background-image: '@/static/uni-center/headers.png';

		.GSimg {
			width: 100%;
			height: 10rpx;
			text-align: center;

			.Image {
				width: 100rpx;
				height: 100rpx;
			}
		}

		.GStitle {
			width: 100%;
			height: 34rpx;
			line-height: 34rpx;
			color: orangered;
			font-size: 26rpx;
			padding-top: 15px;
			margin-top: 80rpx;
		}
	}
}

.banner-image {
	width: 750rpx;
	height: 400rpx;
}

.swiper-box {
	height: 400rpx;
}

.search-icons {
	padding: 16rpx;
}

.search-container-bar {
	/* #ifndef APP-NVUE */
	display: flex;
	/* #endif */
	flex-direction: row;
	justify-content: center;
	align-items: center;
	position: fixed;
	left: 0;
	right: 0;
	z-index: 10;
	background-color: #fff;
}

/* #ifndef APP-NVUE || VUE3*/
::v-deep

	/* #endif */
	.uni-searchbar__box {
	border-width: 0;
}

/* #ifndef APP-NVUE || VUE3 */
::v-deep

	/* #endif */
	.uni-input-placeholder {
	font-size: 28rpx;
}
</style>
