<!-- 首页 -->
<template>
	<view class="page-view">
		<!-- 这是手机导航栏 -->
		<!-- <view class="status_bar">

    </view> -->
		<view class="nav">
			<view class="nav-portrait" @click="navToBar('/pages/user/user/index')">
				<image class="nav-portrait-img" src="/static/images/sxlq/loginPortrait.png" v-if="hasLogin"></image>
				<image class="nav-portrait-img" src="/static/images/sxlq/notLoginProfile.png" v-else></image>
				<text>{{ this.userinfo.nickname }}</text>
			</view>
			<image src="../../../static/images/home/saoyisao.png" mode="" class="nav-saoyisao" @tap="openSaoYiSao">
			</image>
		</view>
		<!--banner-->

		<!--banner-->

		<view class="container">
			<view class="container-banner-box">
				<image src="/static/images/sxlq/bg-img.png"></image>
			</view>
			<!--broadcast-->
			<view class="tui-rolling-news list-item">
				<tui-icon name="news" :size="22" color="#555"></tui-icon>
				<swiper :vertical="true" :autoplay="true" :circular="true" :interval="4000" class="tui-swiper">
					<swiper-item v-for="(item, index) in broadcast" :key="index" class="tui-swiper-item"
						@click="broadcastLink(item.id)">
						<view class="tui-news-item">{{item.title}}</view>
						<view class="tui-news-item-content">{{parseHTMLText(item.content ) }}</view>
					</swiper-item>
				</swiper>
			</view>
			<!--broadcast-->

			<!--classify-->
			<view class="tui-classify-box">
				<view class="container-todaySchedule-title">
					<view class="title-icon"></view>
					<view>安全巡查</view>
				</view>
				<view class="list-box">
					<view class="tui-classify-item" @click="navTo('/pages/template/projectPersonnel/projectPersonnel')">
						<image class="tui-classify-img" style="background-color: #5179ef;border-radius: 5px;" lazy-load src="/static/images/sxlq/materialData/personnel.png" />
						<view class="tui-classify-name">项目部人员</view>
					</view>
					<view class="tui-classify-item" @click="navTo('/pages/template/everyday/everyDayInspect')">
						<image class="tui-classify-img" lazy-load src="/static/images/sxlq/materialBoard.png" />
						<view class="tui-classify-name">日常巡查</view>
					</view>
					<view class="tui-classify-item" @click="navTo('/pages/template/bomb/specialInspect')">
						<image class="tui-classify-img" lazy-load src="/static/images/sxlq/materialBase.png" />
						<view class="tui-classify-name">专线巡查</view>
					</view>
					<view class="tui-classify-item" @click="navTo('/pages/template/everyday/everyBodyInspectReport')">
						<image class="tui-classify-img" lazy-load src="/static/images/sxlq/soilSign.png" />
						<view class="tui-classify-name">全员发现</view>
					</view>
				</view>
			</view>
			<view class="tui-classify-box">
				<view class="container-todaySchedule-title">
					<view class="title-icon"></view>
					<view>安全培训</view>
				</view>
				<view class="list-box">
					<!-- 			<view class="tui-classify-item"
			      @click="scanSign()">
			  <image class="tui-classify-img"
			         lazy-load
			         src="/static/images/sxlq/saoyisao.png" />
			  <view class="tui-classify-name">扫码签到</view>
			</view> -->
					<view class="tui-classify-item" @click="navTo('/pages/template/learn/videoIndex')">
						<image class="tui-classify-img" lazy-load src="/static/images/sxlq/orderForm.png" />
						<view class="tui-classify-name">安全学习</view>
					</view>
					<view class="tui-classify-item" @click="navTo('/pages/template/exam/examIndex')">
						<image class="tui-classify-img" lazy-load src="/static/images/sxlq/orderForm.png" />
						<view class="tui-classify-name">安全考试</view>
					</view>
					<view class="tui-classify-item" @click="navTo('/pages/train/teams/index')">
						<image class="tui-classify-img" lazy-load src="/static/images/sxlq/orderForm.png" />
						<view class="tui-classify-name">班组培训</view>
					</view>

					<view class="tui-classify-item" @click="navTo('/pages/train/enroll_list')">
						<image class="tui-classify-img" lazy-load src="/static/images/sxlq/materialBoard.png" />
						<view class="tui-classify-name">报名记录</view>
					</view>

				</view>
			</view>
			<view class="tui-classify-box">
				<view class="container-todaySchedule-title">
					<view class="title-icon"></view>
					<view>安全基础</view>
				</view>
				<view class="list-box">
					<view class="tui-classify-item" @click="navTo('/pages/responsibility/sign/index')">
						<image class="tui-classify-img" lazy-load src="/static/images/sxlq/orderForm.png" />
						<view class="tui-classify-name">协议签署</view>
					</view>
					
					<view class="tui-classify-item" @click="navTo('/pages/responsibility/safeconference/index')">
						<image class="tui-classify-img" lazy-load src="/static/images/sxlq/orderForm.png" />
						<view class="tui-classify-name">安全会议</view>
					</view>
				</view>
				<!-- <view class="list-box">
					
				</view> -->
			</view>
			<view>
				<!--        <yomol-upgrade :type="upgradeType"
                       :url="upgradeUrl"
                       title="发现新版本"
                       :content="upgradeContent"
                       ref="yomolUpgrade"
                       :currentVersion="version"
                       :newVersion="newVersion"></yomol-upgrade> -->
			</view>
		</view>
	</view>
</template>

<script>
	import yomolUpgrade from "@/components/yomol-upgrade/yomol-upgrade-home.vue";
	import {
		mapState,
		mapGetters,
		mapActions,
		mapMutations
	} from "vuex";
	import {
		parseHTMLText
	} from "@/utils/util.js";
	export default {
		// app升级组件
		components: {
			yomolUpgrade,
		},
		data() {
			return {
				pageSize: 10,
				broadcast: [],
				// app升级参数
				//#ifdef APP-PLUS
				newVersion: "",
				version: "",
				upgradeType: "", //pkg 整包 wgt 升级包
				upgradeContent: "", //更新内容
				upgradeUrl: "", //更新地址
				//#endif
				longitude: '',
				latitude: ''
			};
		},
		computed: {
			...mapState(["hasLogin", "userinfo"]),
		},
		onLoad() {
			// console.log("首页html 渲染中!!!");
			// app升级
			//#ifdef APP-PLUS
			const _this = this;
			plus.runtime.getProperty(plus.runtime.appid, function(wgtinfo) {
				_this.version = wgtinfo.version;
			});
			//#endif
			this.update();
			this.broadcastInfo();
			this.getUserRoleById(); //获取角色信息
			// this.getWarningList(); //获取预警列表
			this.parseOrganizationToTuiCascadeSelection();//解析组织信息
      this.readTextFile();//读取Text文件 隐患描述
		},
		methods: {
			...mapMutations(["logout", "parseOrganizationToTuiCascadeSelection","readTextFile"]),
			...mapActions(["getUserRoleById"]),

			scanSign() {
				if (!this.hasLogin) {
					uni.navigateTo({
						url: '/pages/common/login/login?href2=user/user/index'
					});
					return false;
				}
				let user_id = this.userinfo.userId
				uni.getLocation({
					type: 'wgs84',
					success: (res) => {
						this.longitude = res.longitude
						this.latitude = res.latitude
					}
				});
				uni.scanCode({
					success: res => {
						let id = res.result.split('=')[1]
						let result = getApp().globalData.request.post(
							"learn/sign/sign_done", {
								id: id,
								user_id: user_id,
								longitude: this.longitude,
								latitude: this.latitude
							}
						).then(e => {
							if (e.code == -1) {
								uni.showToast({
									title: e.msg,
									duration: 2000
								});
							} else {
								uni.showToast({
									title: '签到成功',
									duration: 2000
								});
							}
						});
					}
				});

			},
			navTo(url) {
				uni.navigateTo({
					url,
				});
			},
			navToBar(url) {
				uni.switchTab({
					url,
				});
			},
			async broadcastInfo() {
				let res = await getApp().globalData.request.post(
					"common/appinfo/articlelist"
				);
				this.broadcast = res.data.list;
				console.log(this.broadcast);
			},
			broadcastLink(id) {
				uni.navigateTo({
					url: `/pages/common/detail/broadcastDetail?id=${id}`,
				});
			},
			// app升级
			async update() {
				return;
				var platform = uni.getSystemInfoSync().platform;
				try {
					var res = await getApp().globalData.request.post(
						"common/version/version", {
							platform: platform,
						}
					);
					this.newVersion = res.data.version.versionnum;
				} catch (e) {
					this.newVersion = "1.0.0";
				}

				// console.log('platform=', platform);
				// console.log('res=', res);
				if (res.code == 0) {
					// let appVersion = (plus.runtime.version).split('.').join('');

					// console.log('appVersion=', appVersion);
					let newVersion = res.data.version.versionnum;
					console.log("newVersion=", newVersion);
					if (newVersion > this.version) {
						//后台会返回一个安装包地址（pkgurl），升级包地址（wgturl）
						//判空来判断是非是整包升级还是资源包升级
						//content是版本更新内容 \n换行
						//ios用户pkgurl是苹果市场App地址，android自定义下载地址
						if (res.data.version.pkgurl != "" && res.data.version.wgturl == "") {
							this.upgradeType = "pkg";
							this.upgradeContent = res.data.version.content;
							this.upgradeUrl = res.data.version.pkgurl;
							console.log(this.upgradeUrl);
							this.$refs.yomolUpgrade.show();
						} else {
							this.upgradeType = "wgt";
							this.upgradeContent = res.data.version.content;
							this.upgradeUrl = res.data.version.wgturl;
							this.$refs.yomolUpgrade.show();
						}
					} else {
						/* uni.showToast({
						      title: "当前已是最新版本",
						      icon: 'none'
						    }); */
					}
				} else {
					uni.showToast({
						title: res.message + "1",
						icon: "none",
					});
				}
			},
			openSaoYiSao() {
				const _this = this;
				uni.scanCode({
					success: res => {
						uni.navigateTo({
							url: res.result
						})
					}
				});
			},
			openSaoYiSaoBack() {
				const _this = this;
				uni.scanCode({
					success: function(res) {
						// console.log('条码类型：' + res.scanType);
						console.log("条码内容：" + res.result);

						function _isHas(key) {
							return res.result.indexOf(key) != -1;
						}

						if (_isHas("card:")) {
							let result = res.result.replace("card:", "");
							let rule = result.split("+");
							//时间戳 / 1000
							if (
								Number(rule[0]) + Number(rule[2]) + 12344321 ==
								Number(rule[3])
							) {
								//符合规则
								console.log("符合规则");

								if (new Date().getTime() > Number(rule[0]) + 7200000) {
									//符合规则但过期则----->失败
									console.log("符合规则但过期");
									getApp().globalData.request.post("qrcode/index", {
										userid: rule[1],
										username: rule[4],
										qrcode_createtime: Number(rule[0]) / 1000,
										qrcode_scantime: new Date().getTime() / 1000,
										scanuserid: _this.$store.state.userinfo.id ?
											_this.$store.state.userinfo.id :
											"",
										scanusername: _this.$store.state.userinfo.name ?
											_this.$store.state.userinfo.name :
											"",
										status: 0,
									});
									uni.navigateTo({
										url: `/pages/common/dealDetail/dealDetail?status=false&text=二维码已过期`,
									});
								} else {
									//符合规则且没过期则----->成功
									console.log("符合规则且没过期");
									getApp().globalData.request.post("qrcode/index", {
										userid: rule[1],
										username: rule[4],
										qrcode_createtime: Number(rule[0]) / 1000,
										qrcode_scantime: new Date().getTime() / 1000,
										scanuserid: _this.$store.state.userinfo.id ?
											_this.$store.state.userinfo.id :
											"",
										scanusername: _this.$store.state.userinfo.name ?
											_this.$store.state.userinfo.name :
											"",
										status: 1,
									});

									uni.navigateTo({
										url: `/pages/common/dealDetail/dealDetail?status=true`,
									});
								}
							} else {
								//不符合规则 则----->失败
								console.log("不符合规则");
								uni.navigateTo({
									url: `/pages/common/dealDetail/dealDetail?status=false&text=二维码错误`,
								});
							}
						}
					},
				});
			},
			//富文本
			parseHTMLText(text) {
				return parseHTMLText(text);
			},
		},
	};
</script>

<style lang="scss" scoped>
	.status_bar {
		height: var(--status-bar-height);
		width: 100%;
		background-color: #5179ef;
	}

	.page-view {
		height: 100vh;
		overflow: hidden;
	}

	.container {
		height: calc(91% - 100rpx);
		box-sizing: border-box;
		padding: 20rpx 25rpx 20rpx 25rpx;
		background: #f4f8ff;
		display: block;
	}

	.container-list-item {
		display: flex;
		position: relative;
		background: #fff;
		border-radius: 20rpx;
		padding: 30rpx 30rpx 0 0;
		box-sizing: border-box;
		margin-bottom: 20rpx;
	}

	.container-list-item-icon {
		width: 70rpx;
		height: 70rpx;
		margin-top: 10rpx;
		margin-left: -10rpx;
		margin-right: 20rpx;
	}

	.container-list-item-tip {
		width: 20rpx;
		height: 20rpx;
		background: red;
		position: absolute;
		top: 10rpx;
		right: 10rpx;
		border-radius: 50%;
	}

	.container-list-item-content {
		flex: 1;
	}

	.nav {
		// height: 7.5%;
		// height: 100rpx;
		position: sticky;
		top: 0;
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		height: 100rpx;
		color: #fff;
		background: #5179ef;
		font-weight: bold;
		z-index: 999;

		.nav-portrait {
			display: flex;
			align-items: center;

			.nav-portrait-img {
				width: 60rpx;
				height: 60rpx;
				margin-left: 20rpx;
				border-radius: 50%;
				background-color: #ccc;
			}

			text {
				font-size: 32rpx;
				color: #fff;
				margin-left: 20rpx;
			}
		}

		.nav-saoyisao {
			width: 40rpx;
			height: 40rpx;
			margin-right: 20rpx;
		}
	}

	// 物料管控
	.tui-classify-box {
		background-color: #fff;
		// margin: 0 30rpx;
		border-radius: 16rpx;
		// height: 9%;
		// width: 100%;
		// display: flex;
		// //flex-wrap: wrap;
		// align-items: center;
		// justify-content: space-around;
		// padding: 28rpx 0;
		// background-color: #fff;
		margin-bottom: 20rpx;
		// border-radius: 10rpx;
		// flex-direction:column;
		// height: 14%;
	}

	// 物料管控标题
	.container-todaySchedule-title {
		display: flex;
		padding: 30rpx;
		margin-bottom: 30rpx;
		font-size: 30rpx;
		color: #282828;
		font-weight: bold;
		border-bottom: 1rpx solid #ececec;
	}

	// 物料管控标题图标
	.title-icon {
		background: #5179ef;
		width: 10rpx;
		height: 40rpx;
		border-radius: 8rpx;
		margin-right: 20rpx;
	}

	// 物料管控列表大盒子
	.list-box {
		display: flex;
		flex-wrap: wrap;
		padding: 0;
	}

	// 物料管控列表
	.tui-classify-item {
		// text-align: center;
		position: relative;
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-direction: column;
		width: 25%;
		margin-bottom: 47rpx;
		font-size: 26rpx;
		color: #333333;
	}

	// 物料管控名称
	.tui-classify-name {
		font-size: 25rpx;
		line-height: 26rpx;
		padding-top: 8rpx;
		color: #555;
		white-space: nowrap;
	}

	.tui-classify-img {
		width: 70rpx;
		height: 70rpx;
	}

	.tui-rolling-news {
		width: 100%;
		height: 50rpx;
		// height: 5.5%;
		padding: 0 30rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-wrap: nowrap;
		background: #e9f2f9;
		font-size: 28rpx;
		margin-top: 20rpx;
		margin-bottom: 20rpx;
		border-radius: 30rpx;
	}

	.tui-swiper {
		margin-left: 8rpx;
		font-size: 28rpx;
		height: 80rpx;
		flex: 1;
	}

	.tui-swiper-item {
		display: flex;
		align-items: center;

		.tui-news-item {
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 1;
		}

		.tui-news-item-content {
			margin-left: 10rpx;
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 1;
		}
	}

	.container-banner-box {
		width: 100%;
		height: 350rpx;
		// height: 350rpx;
		// height: 30%;

		image {
			width: 100%;
			height: 100%;
		}
	}
</style>