<template>

	<view class="zhuye">
		<meta name="viewport"
		content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
		<LoadingPage :loading="loading"></LoadingPage>

	<!-- //导航栏 -->
	<u-navbar bgColor="#ffffff" :placeholder="true" titleStyle="font-weight:600" title="首页" :autoBack="true">
	
	</u-navbar>

		<view v-show="!loading">
			<view class="swiper">
				<!-- <u-swiper height="346rpx" width="100%" radius="5" :list="list1" indicator></u-swiper> -->
				<image src="../static/images/zhuye/bg.png" alt=""></image>
				<view class="welcome">下午好，{{ name }}</view>
			</view>
			<view class="box">
				<!-- 常用服务菜单模块 -->
				<view class="grid-body" style="margin-top: 30rpx;">
					<u-grid col="4" @click="changeGrid">
						<u-grid-item v-for="(item, index) in indexQuanXian" :key="index" :name="item.path">
							<view class="grid-item-box1">
								<image :src="`${item.pic}`" style="width: 70rpx; height: 70rpx;" />
								<text style=" font-size: 26rpx;font-family: Noto Sans S Chinese;font-weight: 400;color: #212121;margin-top: 10rpx;">{{ item.menuName }}</text>
							</view>
						</u-grid-item>
					</u-grid>
				</view>
			</view>
			<view class="box">
				<view class="notice-body" style="margin-top: 15rpx;" @click="goToPage(3)">
					<view class="notice"><image src="../static/images/zhuye/notice.png" alt=""></image></view>
					<u-notice-bar color="#212121" bgColor="#FFFFFFF" icon=" " :text="gonggao"></u-notice-bar>
					<u-icon name="arrow-right" color="#2979ff" size="20"></u-icon>
				</view>
			</view>
			<view class="new box">
				<view class="newleft" @click="goToPage(1)">
					<view>厂区应急车辆</view>
					<view style="margin-top: 18rpx;">共 {{ cardata.carNum }} 辆</view>
				</view>
				<view class="newright" @click="goToPage(2)">
					<view>值班电话</view>
					<view style="margin-top: 18rpx;">{{ phoCall }}</view>
				</view>
			</view>
			<swiper v-if="showYj >= 0 && !list1.length == '0'" style="height: 210rpx;" class="new box" :autoplay="true" :interval="3000" :circular="true">
				<swiper-item v-for="(item, index) in list1" :key="index" @click="goToPage(4, item)">
					<view style="background-color: #fff;width: 100%;">
						<!-- 头部 -->
						<view class="sortHead">
							<image src="../static/images/Yjplan/sort.png" style="width: 36rpx;height: 36rpx;margin-right: 22rpx;"></image>
							<span class="sortTitle">{{ index + 1 }}.{{ item.houseName }}</span>
						</view>
						<!-- 卡片 -->
						<view class="sortCard">
							<view class="zonghe" v-if="!item.kcnum == '0'">
								<view class="title">库存预警(个)</view>
								<view class="count">{{ item.kcnum }}</view>
							</view>
							<view class="zhuanxiang" v-if="!item.gqNum == '0'">
								<view class="title">到期时间预警(个)</view>
								<view class="count">{{ item.gqNum }}</view>
							</view>
						</view>
					</view>
				</swiper-item>
			</swiper>
			<view class="new box">
				<view style="background-color: #fff;width: 100%;">
					<!-- 头部 -->
					<view class="sortHead">
						<image src="../static/images/Yjplan/sort.png" style="width: 36rpx;height: 36rpx;margin-right: 22rpx;"></image>
						<span class="sortTitle">最近一次演练计划</span>
					</view>
					<!-- 卡片 -->
					<view class="sortCard">
						<view>
							<view class="unfinishlist">
								<view class="content" style="border-left: 13rpx #FFD777 solid;margin-left: 4rpx; ">
									<view class="name">{{ backlog.drillName }}</view>
									<view class="address" style="display: flex;align-items: center;">
										<image src="../static/images/drill/adress.png" style="width: 24rpx;height: 24rpx;margin-right: 5rpx;" />
										{{ backlog.drillAddress }}
									</view>
								</view>
								<view class="content">
									<view class="name" style="color: #df4d63;font-weight: 600;">{{ backlog.text4 }}</view>
									<view class="address" style="display: flex;align-items: center;">{{ backlog.drillDate }}</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>

			<!-- <view class="box">
				<view class="boxGood">
					<view class="title">
						<view class="titlebg">
							<image src="../static/images/zhuye/goodsTitle.png" alt="">
						</view>
						<view class="address">
							采气管理一区
							<u-icon name="list" color="#2979ff" size="20"></u-icon>
						</view>
					</view>
					<view class="goods">
						
						<u-tabs :list="list1" @change="clicktabs" :current="tabIndex" :scrollable="false" lineWidth="30"
							gutter="25" :activeStyle="{
									color: '#303133',
									fontWeight: 'bold',
									transform: 'scale(1.05)'
								}" :inactiveStyle="{
									color: '#606266',
									transform: 'scale(1)'
								}" itemStyle=" height: 70rpx;width:200rpx"
							style="background-color: #fff;white-space: nowrap !important;"></u-tabs>
						<swiper :current="tabIndex" @change="tabChange" style="height: 500rpx;">
							<swiper-item>
								<scroll-view scroll-y="true" enableBackToTop="true" @scrolltolower="loadMore()"
									style="height: 500rpx;">
									<view></view>
									<view class="goodsContent" v-for="(index,item) in 4">
										<view class="goodsPic">
											<image src="../static/images/zhuye/cap.png" alt="">
										</view>
										<view class="goodsNew">
											<view class="name">安全帽</view>
											<view class="type">
												物资类型:个体防护
											</view>
											<view class="count">
												<view class="basicCount">
													<image src="../static/images/zhuye/basic.png" alt="">
														标准数量：224
												</view>
												<view class="currentCount">
													
													<image src="../static/images/zhuye/current.png" alt="">
														当前数量:200
												</view>
											</view>
											<view class="status">
												待补充
											</view>
										</view>
									</view>
								</scroll-view>
							</swiper-item>
							<swiper-item>
								<scroll-view scroll-y="true" style="height: 1000rpx;" enableBackToTop="true"
									@scrolltolower="loadMore()">
									222</scroll-view>
							</swiper-item>
							<swiper-item>
								<scroll-view scroll-y="true" style="height: 1000rpx;" enableBackToTop="true"
									@scrolltolower="loadMore()">
									33</scroll-view>
							</swiper-item>
						</swiper>
					</view>
				</view>
			</view> -->
			<!-- app更新模块 -->
			<!-- <update @showF="ShowON" :show="$store.state.updateApp.isTrue" :versionNum="$store.state.updateApp.newVesion"
				:downloadUrl="$store.state.updateApp.url" :versionContent="$store.state.updateApp.MiaoShu"></update> -->
		</view>
		<Tabbar :value="'首页'"></Tabbar>
	</view>
</template>
<script>
import { backlog } from '@/api/indexpage/YJDrill/index.js';
//权限控制
import auth from '@/plugins/auth.js';
//车辆预警
import { getUserProfile, listCountByAll, listNotice, getConfigKey, getLessNum } from '@/api/indexpage/user.js';
import { appMenuShowInfo, sendList } from '@/api/menu.js';
// import { getFzTask, getNoReadMessage } from '@/api/indexpage/mine.js';
import Tabbar from '@/components/tabbar/tabbar.vue';
import update from '@/components/update/update.vue';
import { dateFormat } from '@/minix/timeCommon.js';
export default {
	name: 'index',
	components: {
		Tabbar,
		update
	},
	data() {
		return {
			backlog: [
				
			],
			showYj: '',
			text1: '',
			gonggao: '欢迎使用应急资源管理App',
			daubanData: 0,
			tabIndex: 0,
			news: 0,
			loading: false,
			fullHeight: '', //轮播图自适应高
			// showOverPop: this.$store.state.overlaypop.showOverPop, //暂且先改为flase,等联合后台后再来显示
			name: this.$store.state.user.name,
			isTF: this.$store.state.updateApp.isTrue,
			current: 0,
			renwuList: null,
			//取到菜单权限
			indexQuanXian: [],
			// list1: ["全部", "个体防护", "应急救援设备", "消防设备设施"],
			list1: [],
			cardata: {},
			phoCall: '',
			quanxianzhifu: true,
			activityNum: 0, //非常规作业数量
			name: this.$store.state.user.name
		};
	},

	onLoad() {
		this.text1 = getApp().globalData.config.appInfo.version;
		//隐常自带tabber
		uni.hideTabBar();
		this.news = this.$store.state.mine.xiaoxi;
		this.getquanxian();
		//权限按钮
		this.quanxianzhifu = auth.hasPermi('specialwork:workActivity:add');
		//获取消息条数
		this.$store.dispatch('getNewsListOne');
		this.getYanLian();
		this.getYj();
		this.getCar();
		this.getGongGao();
		this.getConfigKeyData();
	},
	methods: {
		getYanLian() {
			backlog().then(res => {
				this.backlog = res[0];
				if(this.backlog==null){
				
				}
			});
		},
		getYj() {
			getLessNum().then(res => {
				this.list1 = res.data;
			});
		},
		goToPage(bs, item) {
			if (bs === 1) {
				//仓库库存
				this.$tab.navigateTo(`/pages/indexpage/Yjcar/Yjcar`);
			} else if (bs === 2) {
				this.$tab.navigateTo(`/pages/makePhoneCall/makePhoneCall`);
			} else if (bs === 3) {
				//D:/公司代码/公司代码20230829/华北石油局/
				this.$tab.navigateTo(`/pages/GongGao/GongGao`);
			} else if (bs === 4) {
				this.$tab.navigateTo(`/pages/indexpage/YJgoods/wzYvJing/wzYvJing?ckId=${item.houseId}&ckName=${item.houseName}`);
			}
		},
		getGongGao() {
			listNotice().then(res => {
				this.gonggao = res.rows
					.map(item => {
						return item.noticeContent;
					})
					.join(' ');
			});
		},
		getCar() {
			listCountByAll().then(res => {
				this.cardata = res.data;
			});
		},
		getConfigKeyData() {
			getConfigKey('emergency_phone').then(res => {
				this.phoCall = res.msg;
			});
		},
		// tabs点击切换
		clicktabs(e) {
			this.switchTab(e.index);
		},
		// 轮播图切换
		tabChange(e) {
			let index = e.target.current || e.detail.current; // 获取到当前移动到第几个
			this.switchTab(index);
		},
		//优化---当index相同时，不执行代码
		switchTab(index) {
			if (this.tabIndex == index) {
				return;
			} else {
				this.tabIndex = index;
			}
		},
		ShowON(e) {
			this.show = e;
			//通知vuex改变变量
			this.$store.commit('setisFalse');
		},
		showOverPop() {
			//通知vuex改变变量
			this.$store.commit('setshowOverPop', false);
		},
		getquanxian() {
			this.$store.state.user.saveMenu.map(item => {
				if (item.menuName === '首页') {
					//过滤不显示的按钮
					item.children.map(item1 => {
						if (item1.status === '0') {
							if (item.path === '/pages/indexpage/YJgoods/YJgoods') {
								this.showYj = 2;
							}
							this.indexQuanXian.push(item1);
						}
					});
				}
			});
		},
		changeGrid(path) {
			// console.log(path);
			// this.$modal.showToast('模块建设中~');
			this.$tab.navigateTo(path);
		}
	}
};
</script>
<style lang="scss" scoped>
.u-nav-slot {
	width: 100vw;
	padding: 0 30rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;

	.city {
		display: flex;
		align-items: center;
		font-size: 38rpx;
		font-family: Noto Sans S Chinese;
		font-weight: 400;
		color: #333333;
	}

	.weather {
		display: flex;
		font-size: 30rpx;
		font-family: Noto Sans S Chinese;
		font-weight: 400;
		color: #333333;
	}
}

page {
	background-color: #f6f7fb;
	box-sizing: border-box !important;
	// background: linear-gradient(0deg, #E1E5FD, #F6F7FB) !important;
}

.sortHead {
	background-color: #fff;
	display: flex;
	font-weight: 600;
	align-items: center;
	padding: 12rpx 20rpx;

	.sortTitle {
		font-family: Noto Sans S Chinese;

		font-size: 32rpx;
		color: #333333;
		line-height: 40rpx;
	}
}

.sortCard {
	padding: 0 10rpx;
	padding-bottom: 10rpx;
	display: flex;
	justify-content: space-between;
	// flex-wrap: wrap;
	margin-bottom: 10rpx;
	width: 100%;

	.unfinishlist {
		width: 672rpx;
		height: 120rpx;
		margin-top: 10rpx;
		background: #ffffff;
		box-shadow: 0rpx 6rpx 8rpx 0rpx rgba(190, 207, 228, 0.4);
		display: flex;
		justify-content: space-between;
		padding: 0rpx 4rpx;
		// align-items: flex-start;

		.content {
			display: flex;
			flex-direction: column;
			justify-content: space-evenly;
			// margin-left: 20rpx;

			.name {
				font-weight: 400;
				font-size: 30rpx;
				color: #333333;
				margin-left: 10rpx;
			}

			.address {
				font-family: Noto Sans S Chinese;
				font-weight: normal;
				font-size: 24rpx;
				color: #999999;
				margin-left: 10rpx;
			}
		}
	}

	.zonghe {
		width: 320rpx;
		height: 140rpx;
		background: url('../static/images/Yjplan/zonghe.png') no-repeat;
		background-size: 100% 100%;
		// margin-right: 19rpx;
	}

	.zhuanxiang {
		width: 320rpx;
		height: 140rpx;
		background: url('../static/images/Yjplan/qita.png') no-repeat;
		background-size: 100% 100%;
	}

	.title {
		font-family: Noto Sans S Chinese;

		font-size: 30rpx;
		color: #4d4d4d;
		line-height: 40rpx;
		padding: 18rpx 30rpx;
	}

	.count {
		font-family: DINPro;
		font-weight: 500;
		font-size: 40rpx;
		color: #353535;
		line-height: 40rpx;
		padding: 0 40rpx;
	}
}

.box1 .u-badge--not-dot {
	padding: 5px 8px;
}

.zhuye {
	width: 100%;

	.swiper {
		height: 427rpx;
		width: 100vw;
		position: relative;

		.welcome {
			position: absolute;
			bottom: 50rpx;
			right: 60rpx;
			font-size: 40rpx;
			font-family: PangMenZhengDao;
			font-weight: 400;
			color: #fff;
			text-shadow: 2px 0px 6px rgba(62, 62, 62, 0.2);
		}

		image {
			width: 100%;
			height: 100%;
		}
	}

	.box {
		padding: 0 34rpx;
		position: relative;
		top: -50rpx;
		// z-index: 999;
	}

	.notice-body {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 10rpx;

		.notice {
			width: 55rpx;
			height: 53rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}
	}

	// 菜单模块
	.grid-body,
	.notice-body {
		width: 100%;
		// height: 450rpx;
		background-color: #fff;
		border-radius: 20rpx;
		color: #212121;
		font-size: 26rpx;
		font-weight: Regular;

		.text {
			font-size: 28rpx;
			font-family: Noto Sans S Chinese;
			font-weight: 400;
			color: #666666;
		}

		// 常用服务
		.serve {
			display: flex;
			padding: 20rpx;
			align-items: center;
			border-bottom: 1rpx #eeeeee solid;
		}

		.grid-item-box1 {
			height: 160rpx !important;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
		}
	}

	// 车辆
	.new {
		// padding: 0 34rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		// width: 100%;
		border-radius: 20rpx;
		margin: 20rpx 0;

		.newleft {
			width: 334rpx;
			height: 148rpx;
			background-image: url('../static/images/zhuye/car.png');
			background-size: 100%;
			margin-right: 15rpx;
			font-size: 28rpx;
			font-family: Alibaba PuHuiTi;
			font-weight: 600;
			color: #3d6aa6;
			padding: 0 26rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;
		}

		.newright {
			width: 334rpx;
			height: 148rpx;
			background-image: url('../static/images/zhuye/phone.png');
			background-size: 100%;
			font-size: 28rpx;
			font-family: Alibaba PuHuiTi;
			font-weight: 600;
			color: #1e7555;
			padding: 0 26rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;
		}
	}

	.boxGood {
		background-color: #fff;
		border-radius: 20rpx;
		// height: 1000rpx;

		.title {
			display: flex;
			justify-content: space-between;
			width: 100%;

			.titlebg {
				width: 305rpx;
				height: 71rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.address {
				display: flex;
				justify-content: center;
				align-items: center;
				margin-right: 20rpx;
			}
		}
	}

	// 物资
	.goodsContent {
		height: 200rpx;
		width: 100%;
		padding: 30rpx 20rpx;
		display: flex;
		align-items: center;
		justify-content: space-evenly;
		border-bottom: 1px solid #eeeeee;

		.goodsPic {
			width: 180rpx;
			height: 180rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.goodsNew {
			display: flex;
			flex-direction: column;
			justify-content: space-evenly;
			// align-items: center;
		}

		.name {
			// width: 87rpx;
			height: 29rpx;
			font-size: 30rpx;
			font-family: Noto Sans S Chinese;
			font-weight: 600;
			color: #333333;
		}

		.type {
			margin: 15rpx 0 10rpx 0;
			font-size: 26rpx;
			font-family: Noto Sans S Chinese;
			font-weight: normal;
			color: #999999;
		}

		.count {
			display: flex;
			font-size: 26rpx;
			font-family: Noto Sans S Chinese;
			font-weight: normal;
			color: #999999;
		}

		.basicCount {
			font-size: 22rpx;
			font-family: Noto Sans S Chinese;
			font-weight: normal;
			color: #0098df;
			width: 212rpx;
			// height: 40rpx;
			background: #e8f8ff;
			border: 1px solid #0098df;
			border-radius: 4rpx;
			margin-right: 10rpx;
			padding: 10rpx;
			display: flex;
			align-items: center;

			image {
				height: 22rpx;
				width: 20rpx;
			}
		}

		.currentCount {
			font-size: 22rpx;
			font-family: Noto Sans S Chinese;
			font-weight: normal;
			color: #ffa132;
			width: 210rpx;
			// height: 40rpx;
			background: #fff9f1;
			border: 1px solid #ffa132;
			border-radius: 4rpx;
			padding: 10rpx;
			display: flex;
			align-items: center;

			image {
				height: 22rpx;
				width: 20rpx;
			}
		}

		.status {
			font-size: 28rpx;
			font-family: Noto Sans S Chinese;
			font-weight: 500;
			color: #ffa132;
			// margin: 10rpx 0;
		}
	}
}
</style>
