<template>
	<view class="page">
		<view style="position: absolute; top: 0; width: 100%;">
			<image src="../../static/bg.png" style="height: 200px;" class="top-img" mode="aspectFill"></image>
		</view>
		<view class="head" style="padding-top: 35px;display: flex;flex-direction: column;align-items: flex-start;"
			:style="'background-color: rgba(71,126,255,'+(scrollTop/50)+');'">
			<view class="logo-title" >
				<image style="height: 60px;" :src="baseurl + logo.url" mode=""></image>
			</view>
			<view class="" style="padding: 16px;width: 100%;padding-top: 0px;display: flex;">
				<u-search height="36" :showAction="false" shape="square" placeholder="设备故障查询" v-model="keyword" @search="cx" @confirm="cx"></u-search>
				<view class="" style="margin-left: 20rpx;" @click="cx">
					<button style="background-color: #3B9CFF;color: #fff;height: 36px;display: flex;align-items: center;justify-content: center;padding: 0 20px;">查询</button>
				</view>
			</view>
		</view>

		<view class="main" style="padding-top: 100px;">
			<!-- <view class="realtime">
				<view class="realtime-title" style="margin-bottom: 10px;">机具设备现场数字可视化支持系统</view>
				<view class="realtime-text">机具设备，专业知识库！</view>
				<view class="realtime-text">
					<span style="color: #fff;">1</span>
				</view>
				<view class="realtime-img">
					<image src="../../static/home2.png" mode="widthFix"></image>
				</view>
			</view> -->
			<!-- <view class="notice-content">
				<view class="notice-left">
					<view>
						<image src="../../static/home1.png"></image>
					</view>
				</view>
				<view class="notice-line"></view>
				<view class="notice-right" style="z-index: 999;margin-top: 20rpx;">
					<view class="notice-right-content" v-for="(item,index) in ggtzlblist" :key="index" @click="notice">
						<view class="notice-icon">{{item.type}}</view>
						<view class="notice-text">{{item.content}}</view>
					</view>
				</view>
			</view> -->
			<view class="contractdetail">
				<view class="contractdetail-list" @click="gzpc">
					<view class="contractdetail-img">
						<span class="f1">故障排查</span>
						<span class="f2">故障排查</span>
						<image src="../../static/icon6.png" mode="widthFix"></image>
					</view>
				</view>
				<view class="contractdetail-list" @click="zsk">
					<view class="contractdetail-img">
						<span class="f1">知识库</span>
						<span class="f2">知识库</span>
						<image src="../../static/icon3.png" mode="widthFix"></image>
					</view>
				</view>
				<view class="contractdetail-list" @click="goMyDevice">
					<view class="contractdetail-img">
						<span class="f1">我的设备</span>
						<span class="f2">我的设备</span>
						<image src="../../static/icon1.png" mode="widthFix"></image>
					</view>
				</view>
				<view class="contractdetail-list" @click="zlgl">
					<view class="contractdetail-img">
						<span class="f1">资料管理</span>
						<span class="f2">资料管理</span>
						<image src="../../static/icon1.png" mode="widthFix"></image>
					</view>
				</view>
				<view class="contractdetail-list" @click="bjzc">
					<view class="contractdetail-img">
						<span class="f1">备件支持</span>
						<span class="f2">备件支持</span>
						<image src="../../static/icon5.png" mode="widthFix"></image>
					</view>
				</view>
				
				<view class="contractdetail-list" @click="pxzs">
					<view class="contractdetail-img">
						<span class="f1">培训展示</span>
						<span class="f2">培训展示</span>
						<image src="../../static/icon4.png" mode="widthFix"></image>
					</view>
				</view>
				
				
				<view class="contractdetail-list" style="position: relative;" @click="xxts">
					<view v-if="xxtsvalue > 0" class="" style="position: absolute;right: 0;top: 0;z-index: 999;">
						<u-badge :type="xxtstype" max="99" :value="xxtsvalue"></u-badge>
					</view>
					<view class="contractdetail-img">
						<span class="f1">信息推送</span>
						<span class="f2">信息推送</span>
						<image src="../../static/icon2.png" mode="widthFix"></image>
					</view>
				</view>
				<view class="contractdetail-list" style="position: relative;" @click="yhfk">
					<view v-if="yhfkvalue > 0" class="" style="position: absolute;right: 0;top: 0;z-index: 999;">
						<u-badge :type="xxtstype" max="99" :value="yhfkvalue"></u-badge>
					</view>
					<view class="contractdetail-img">
						<span class="f1">用户反馈</span>
						<span class="f2">用户反馈</span>
						<image src="../../static/icon7.jpg" mode="widthFix"></image>
					</view>
				</view>
				
			</view>
			<view class="article-data">
				<view class="article-title-row">
					<view class="article-title">产品新闻</view>
					<view class="article-more" @click="goToCpxwList">更多</view>
				</view>
				<view class="article-list">
					<view class="list" v-for="(item,index) in xclist" :key="item.id" @click="InformationDisclosure(item)">
						<view class="thumb" v-if="getCoverUrl(item)">
							<image :src="'https://hhjj.antissoft.com' + getCoverUrl(item)" mode="aspectFill"></image>
						</view>
						<view class="item">
							<view class="title">
								<text class="two-omit">【{{getXwflName(item.xwfl)}}】{{item.sbmc}}</text>
							</view>
							<view class="summary" v-if="item.xwgy">
								<text class="two-omit">{{item.xwgy}}</text>
							</view>
							<view class="find-collect">
								<view class="find">
									<text>{{item.fbsj == null ? '' : timestampToTime(item.fbsj)}}</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- tabbar -->
		<tabbar :tabBarShow="0"></tabbar>
	</view>
</template>

<script>
	import tabbar from '../../components/TabBar/TabBar.vue';
	export default {
		components: {
			tabbar
		},
		data() {
			return {
				baseurl:'https://hhjj.antissoft.com',
				xxtstype:"error",
				xxtsvalue: 0,
				yhfkvalue: 0,
				scrollTop: 0,
				ggtzlblist: [],
				form: {
					page: 1
				},
				lastPage: 0,
				list: [],
				keyword: "",
				xclist:[],
				logo:{},
			}
		},
		onLoad() {
			uni.hideTabBar();
			this.hqlogo();
		},
		onShow() {
			this.hqxccplist();
			this.hquserxx();
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		onReachBottom() {
			if (this.form.page < this.lastPage) {
				this.form.page += 1;
				this.hqxxgs();
			}
		},
		methods: {
			// 获取logo
			hqlogo(){
				this.API.hqlogo().then(res=>{
					if(res.data.list.length > 0){
						this.logo = JSON.parse(res.data.list[0].logourl)[0]
					}
					console.log("logo",this.logo);
				})
			},
			// 获取消息未读数量
			hqxxwdsl(){
				var user = uni.getStorageSync('userinfo') || {};
				var userId = user.userId || user.id || '';
				if (!userId) return;
				var info = { userId };
				this.API.hqxxwdsl(info).then(res=>{
					console.log("消息未读",res);
					const n = res.data?.unreadCount;
					this.xxtsvalue = (n === undefined || n === null) ? 0 : (parseInt(n, 10) || 0);
				})
			},
			fetchXxtsList(){
				var info = {
					currentPage: 1,
					pageSize: 20,
					sort: 'desc',
					sidx: '',
					jsr:"",
					sfyd:"否"
				}
				info.jsr = uni.getStorageSync('userinfo').userId;
				this.API.xxtsjl(info).then(res=>{
					console.log("消息",res);
					
					
				})
			},
			hquserxx(){
				this.API.hqdqdlrxx().then(res=>{
					console.log("用户信息",res);
					uni.setStorageSync('userinfo',res.data.userInfo)
					this.hqxxwdsl();
					this.hqxtwdnumber();
				})
			},
			// 获取系统未读数量
			hqxtwdnumber(){
				var user = uni.getStorageSync('userinfo') || {};
				var id = user.userId || user.id || '';
				if (!id) return;
				var info = { id };
				var num = 0
				this.API.hqxtwdnumber(info).then(res=>{
					console.log("获取系统未读数量",res);
					num = num + (res.data?.unreadCount || 0);
					this.API.hqsbwtwdnumber(info).then(res1=>{
						console.log("获取设备问题未读数量",res1);
						num = num + (res1.data?.unreadCount || 0);
						this.yhfkvalue = num;
					})
				})
			},
			goMyDevice() {
				uni.navigateTo({
					url: '/pages/myDevice/myDevice'
				})
			},
			timestampToTime(timestamp) {
				const date = new Date(timestamp); //时间戳为10位需*1000，13位不需乘
				const Y = date.getFullYear() + '-';
				const M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
				const D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + ' ';
				const h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
				const m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':';
				const s = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds();
			
				return Y + M + D + h + m + s;
			},
			// 获取宣传产品
			hqxccplist() {
				// var info = {
				// 	currentPage: 1,
				// 	json: "",
				// 	menuId: "657078217114387717",
				// 	pageSize: 100,
				// 	sidx: "F_SortCode",
				// 	sort: "desc",
				// }
				// info = JSON.stringify(info)
				var info = {
					currentPage: 1,
					pageSize: 100,
					sidx: "fbsj",
					sort: "desc",
				}
				this.API.hqxccplist(info).then(res => {
					this.xclist = res.data.list || []
					if (this.xclist.length > 0) {
						for (let i = 0; i < this.xclist.length; i++) {
							if (this.xclist[i].xgtp && this.xclist[i].xgtp !== '' && this.xclist[i].xgtp !== null) {
								try {
									const arr = JSON.parse(this.xclist[i].xgtp)
									if (Array.isArray(arr) && arr.length > 0) {
										this.xclist[i].xgtp = arr[0].url || arr[0]
									}
								} catch (e) {}
							}
							if (this.xclist[i].fmtp && this.xclist[i].fmtp !== '' && this.xclist[i].fmtp !== null) {
								try {
									const arr = JSON.parse(this.xclist[i].fmtp)
									if (Array.isArray(arr) && arr.length > 0) {
										this.xclist[i].fmtp = arr[0].url || arr[0]
									}
								} catch (e) {}
							}
						}
					}
					console.log("获取宣传产品列表", this.xclist)
				})
			},
			cx() {
				uni.setStorageSync("sycx", '1')
				uni.setStorageSync("keyword", this.keyword)
				uni.navigateTo({
					url: "/pages/new/gzpc/gzpc"
				})
			},
			// 
			gzpc() {
				uni.navigateTo({
					url: '/pages/new/gzpc/gzpc'
				})
			},
			zsk() {
				uni.navigateTo({
					url: '/pages/new/zsk/zsk'
				})
			},
			zlgl() {
				uni.navigateTo({
					url: '/pages/new/zlgl/zlgl'
				})
			},
			xxts() {
				uni.navigateTo({
					url: '/pages/new/xxts/xxts'
				})
			},
			pxzs() {
				uni.navigateTo({
					url: '/pages/new/pxzs/pxzs'
				})
			},
			bjzc() {
				uni.navigateTo({
					url: '/pages/new/bjzc/bjzc'
				})
			},
			yhfk() {
				uni.navigateTo({
					url: '/pages/new/yhfk/yhfk'
				})
			},
			// 
			tz(item) {
				uni.setStorageSync('gginfo', item)
				uni.navigateTo({
					url: '/pages/noticeDetail/noticeDetail'
				})
			},
			ggtzlb() {
				var info = {
					page: 1
				}
				this.ggtzlblist = []
				this.API.ggtzlb(info).then(res => {
					console.log("公告通知", res);
					this.ggtzlblist = res.data.data
				})
			},
			// 获取信息公示
			hqxxgs() {
				this.API.hqxxgs().then(res => {
					console.log("信息公示", res);
					if (res.data.data.length > 0) {
						for (let i = 0; i < res.data.data.length; i++) {
							res.data.data[i].createtime = this.getTime(res.data.data[i].createtime)
							this.list.push(res.data.data[i])
						}
					}
					this.lastPage = res.data.last_page
				})
			},
			getTime(data, type) { //data时间戳，type返回的类型默认Y,可传参Y和H
				let time = new Date(data * 1000);
				let Y = time.getFullYear();
				let Mon = time.getMonth() + 1;
				let Day = time.getDate();
				let H = time.getHours();
				let Min = time.getMinutes();
				let S = time.getSeconds();
				//自定义选择想要返回的类型
				if (type === "Y") { //返回年月日2020-10-10
					return `${Y}-${Mon}-${Day}`
				} else if (type === "H") { //返回时分秒20：10：10
					return `${H}:${Min}:${S}`
				} else { //返回年月日时分秒2020-10-10 10:26:38
					return `${Y}-${Mon}-${Day} ${H}:${Min}:${S}`
				}
			},
			// 是否填写个人信息
			sfscgrxx() {
				this.API.sfscgrxx().then(res => {
					console.log("是否填写个人信息", res);
					if (res.msg != '信息已上传') {
						uni.reLaunch({
							url: "/pages/myInformation/myInformation"
						})
					}
				})
			},
			biddingdetail() {
				uni.navigateTo({
					url: '/pages/biddingdetail/biddingdetail'
				})
			},
			InformationDisclosure(data) {
				uni.setStorageSync('xccpinfo', data ? JSON.stringify(data) : '')
				uni.navigateTo({
					url: '/pages/new/cpxw/cpxw'
				})
			},
			// 新闻分类码转中文
			getXwflName(code) {
				const map = { 'xcp': '新产品', 'cpsj': '产品升级', 'xtsj': '系统升级', 'zlgx': '资料更新', 'scdt': '市场动态' };
				return (code && map[code]) ? map[code] : '新闻';
			},
			getCoverUrl(item) {
				if (item.fmtp && item.fmtp !== '') return item.fmtp;
				if (item.xgtp && item.xgtp !== '') return item.xgtp;
				return '';
			},
			goToCpxwList() {
				uni.navigateTo({
					url: '/pages/new/cpxw/list'
				})
			},
			notice() {
				uni.navigateTo({
					url: '/pages/notice/notice'
				})
			},
			notice1() {
				uni.navigateTo({
					url: '/pages/notice/notice1'
				})
			},
			notice2() {
				uni.navigateTo({
					url: '/pages/notice/notice2'
				})
			},
			projectIntroduction() {
				uni.navigateTo({
					url: '/pages/projectIntroduction/projectIntroduction'
				})
			},
			cooperation() {
				uni.navigateTo({
					url: '/pages/cooperation/cooperation'
				})
			},
			InsuranceClaims() {
				uni.navigateTo({
					url: '/pages/InsuranceClaims/InsuranceClaims'
				})
			},
			contactUs() {
				uni.navigateTo({
					url: '/pages/contactUs/contactUs'
				})
			},
			cooperationDetail() {
				uni.navigateTo({
					url: '/pages/cooperationDetail/cooperationDetail'
				})
			},
		}
	};
</script>

<style scoped lang="scss">
	@import 'home.scss';
</style>