<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('/logomain.png')" 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('/logomain.png')" 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('/logomain.png')" 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')
				})
				gridList.push({
					"type": this.$t('wxcsJs.rzJs.title'),
					"url": this.$t('wxcsJs.rzJs.url')
				})
				gridList.push({
					"type": this.$t('wxcsJs.qtJs.title'),
					"url": this.$t('wxcsJs.qtJs.url')
				})
				this.wxcsJsgridList = gridList

				gridList = []

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

				gridList.push({
					"type": this.$t('QtJs.ZBGJs.title'),
					"url": this.$t('QtJs.ZBGJs.url')
				})
				gridList.push({
					"type": this.$t('QtJs.srjBGJs.title'),
					"url": this.$t('QtJs.srjBGJs.url')
				})
				// 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>