<template>
	<view class="container">
		<view class="banner">
			<swiper class="carousel" autoplay="true" duration="400" interval="5000" @change="swiperChange">
				<swiper-item v-for="(item, index) in carouselList" :key="index" class="carousel-item"><image src="../../static/img/banner.png" /></swiper-item>
			</swiper>
			<view class="swiper-dots"><view class="swiper-dots-item" :class="{ current: swiperCurrent + 1 === index }" v-for="(item, index) in swiperLength"></view></view>
		</view>
		<view class="swiper-btm flex">
			<view class="btm-item flex">
				<image class="image1" src="../../static/icon/index1.png" mode=""></image>
				<view class="">实名认证</view>
			</view>
			<view class="btm-item flex">
				<image class="image2" src="../../static/icon/index2.png" mode=""></image>
				<view class="">专业培训</view>
			</view>
			<view class="btm-item flex">
				<image class="image3" src="../../static/icon/index3.png" mode=""></image>
				<view class="">代办问诊</view>
			</view>
		</view>
		<view class="main flex">
			<view class="main-item">
				<view class="main-image"><image src="../../static/icon/index4.png" mode=""></image></view>
				<view class="main-font">半天陪诊</view>
			</view>
			<view class="main-item">
				<view class="main-image"><image src="../../static/icon/index5.png" mode=""></image></view>
				<view class="main-font">全天陪诊</view>
			</view>
			<view class="main-item">
				<view class="main-image"><image src="../../static/icon/index6.png" mode=""></image></view>
				<view class="main-font">夜间陪诊</view>
			</view>
		</view>
		<view class="title">
			<view class="xian"></view>
			<view class="title-font">代办服务</view>
		</view>
		<view class="dbfw flex">
			<view class="dbfw-item">
				<view class="dbfw-left"><image src="../../static/icon/index7.png" mode=""></image></view>
				<view class="dbfw-right">
					<view class="dbfw-title">病案代办</view>
					<view class="dbfw-tip">为您的健康保驾护航</view>
				</view>
			</view>
			<view class="dbfw-item">
				<view class="dbfw-left"><image src="../../static/icon/index8.png" mode=""></image></view>
				<view class="dbfw-right">
					<view class="dbfw-title">出入院代办</view>
					<view class="dbfw-tip">星级服务平价收费</view>
				</view>
			</view>
			<view class="dbfw-item">
				<view class="dbfw-left"><image src="../../static/icon/index9.png" mode=""></image></view>
				<view class="dbfw-right">
					<view class="dbfw-title">代办送取报告</view>
					<view class="dbfw-tip">服务至上严谨求精</view>
				</view>
			</view>
			<view class="dbfw-item">
				<view class="dbfw-left"><image src="../../static/icon/index10.png" mode=""></image></view>
				<view class="dbfw-right">
					<view class="dbfw-title">代办生育险津贴</view>
					<view class="dbfw-tip">用心做最好</view>
				</view>
			</view>
		</view>
		<view class="card"><image src="../../static/img/index11.png" mode=""></image></view>
		<view class="title">
			<view class="xian"></view>
			<view class="title-font">新闻资讯</view>
		</view>
		<scroll-view scroll-y="true" class="listBox" :style="{ height: height }">
			<view v-for="(item, index) in dataList" :key="index" class="list" @click="navto(item)">
				<!-- <view class="img"><image :src="item.image_input[0]" mode=""></image></view>
				<view class="right">
					<view class="r-title">{{ item.title }}</view>
					<view class="time">{{ item.add_time }}</view>
				</view> -->
				<view class="img"><image src="../../static/img/img05.png" mode=""></image></view>
				<view class="right"><view class="r-title clamp2">1111111111111111111111111111111111111111111111111111111</view></view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
import seckill from '../../components/seckill/seckill.vue';
import { loadIndexs } from '@/api/index.js';
import { getUserInfo } from '@/api/user.js';
import { setCoupons } from '@/api/functionalUnit.js';
import { interceptor } from '@/utils/loginUtils';
import { mapState } from 'vuex';

export default {
	data() {
		return {
			carouselList: [''], //轮播图列表
			height: '',
			swiperCurrent: 0, //当前几张图
			swiperLength: 2, //轮播图总数
			dataList: [] //文章列表
		};
	},
	onReady(res) {
		var _this = this;
		uni.getSystemInfo({
			success: resu => {
				const query = uni.createSelectorQuery();
				query.select('.listBox').boundingClientRect();
				query.exec(function(res) {
					_this.height = resu.windowHeight - res[0].top + 'px';
					console.log('打印页面的剩余高度', _this.height);
				});
			},
			fail: res => {}
		});
	},
	computed: {
		...mapState(['loginInterceptor']),
		...mapState('user', ['hasLogin', 'userInfo'])
	},
	onLoad: function(option) {
		// #ifndef MP
		if (option.spread) {
			// 存储其他邀请人
			uni.setStorageSync('spread', option.spread);
		}
		// #endif
		// #ifdef MP
		if (option.scene) {
			// 存储小程序邀请人
			uni.setStorage({
				key: 'spread_code',
				data: option.scene
			});
		}
		// #endif
	},
	onShow: function() {
		// 判断是否强制登录
		if (this.loginInterceptor && !this.hasLogin) {
			// 登录拦截
			interceptor();
		}
	},
	//下拉刷新
	onPullDownRefresh() {
		this.loadData();
	},
	methods: {
		// 请求载入数据
		async loadData() {
			loadIndexs({})
				.then(({ data }) => {
					let goods = data.info;
					this.carouselList = data.banner;
					this.swiperLength = this.carouselList.length;
					this.menusList = data.menus;
					this.goodsList = goods.firstList; //最新商品
					this.bastList = goods.bastList; //精品推荐
					this.bastBanner = data.benefit; //促销单品
					this.$set(this, 'couponArray', data.couponList); //保存卡包券

					uni.stopPullDownRefresh();
				})
				.catch(e => {
					uni.stopPullDownRefresh();
				});
		},
		//轮播图切换修改背景色
		swiperChange(e) {
			const index = e.detail.current;
			this.swiperCurrent = index;
		}
	}
};
</script>

<style lang="scss">
page,
.container {
	min-height: 100%;
	height: auto;
	background: #ffffff;
}
image {
	width: 100%;
	height: 100%;
}
.banner {
	width: 750rpx;
	height: 375rpx;
	position: relative;
	.carousel {
		width: 750rpx;
		height: 375rpx;
		.carousel-item {
			width: 100%;
			height: 100%;
		}
	}
	.swiper-dots {
		position: absolute;
		bottom: 16rpx;
		left: 0;
		right: 0;
		display: flex;
		justify-content: center;
		.swiper-dots-item {
			margin: 0 5rpx;
			width: 10rpx;
			height: 10rpx;
			background: #ffffff;
			border-radius: 50%;
		}
		.current {
			opacity: 0.71;
		}
	}
}
.swiper-btm {
	height: 60rpx;
	width: 750rpx;
	background-color: #ebf7f5;
	margin-bottom: 20rpx;
	font-size: 21rpx;
	font-weight: 500;
	color: #7c8584;
	.btm-item {
		flex-grow: 1;
		justify-content: center;
		.image1 {
			width: 28rpx;
			height: 24rpx;
			margin-right: 14rpx;
		}
		.image2 {
			width: 24rpx;
			height: 24rpx;
			margin-right: 14rpx;
		}
		.image3 {
			width: 28rpx;
			height: 24rpx;
			margin-right: 14rpx;
		}
	}
}
.main {
	margin: 30rpx auto 0;
	width: 702rpx;
	background: #ffffff;
	box-shadow: 0px 0px 20rpx 0px rgba(50, 50, 52, 0.06);
	border-radius: 10rpx;
	padding: 30rpx 0 33rpx;
	.main-item {
		width: 33%;
		display: flex;
		flex-direction: column;
		align-items: center;
		.main-image {
			width: 82rpx;
			height: 82rpx;
		}
		.main-font {
			margin-top: 8rpx;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #262626;
		}
	}
}
.title {
	margin: 40rpx 0 0 24rpx;
	display: flex;
	align-items: center;
	.xian {
		width: 9rpx;
		height: 30rpx;
		background: #45bc9a;
		border-radius: 5rpx;
	}
	.title-font {
		margin-left: 20rpx;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #262626;
	}
}
.dbfw {
	margin-top: 34rpx;
	flex-wrap: wrap;
	justify-content: space-around;
	.dbfw-item {
		margin-top: 28rpx;
		width: 340rpx;
		height: 116rpx;
		background: #ffffff;
		box-shadow: 0px 0px 20rpx 0px rgba(50, 50, 52, 0.06);
		border-radius: 15rpx;
		padding: 20rpx 18rpx;
		display: flex;
		align-items: center;
		.dbfw-left {
			width: 76rpx;
			height: 76rpx;
		}
		.dbfw-right {
			margin-left: 18rpx;
			line-height: 1;
			.dbfw-title {
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #000000;
			}
			.dbfw-tip {
				margin-top: 10rpx;
				font-size: 22rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #999999;
			}
		}
	}
}
.card {
	margin: 18rpx auto 0;
	width: 750rpx;
	height: 210rpx;
}
.listBox {
	margin-top: 28rpx;
}
.list {
	margin-bottom: 50rpx;
	padding-left: 34rpx;
	padding-right: 40rpx;
	display: flex;
	.img {
		background-color: #ffffff;
		width: 200rpx;
		height: 160rpx;
		flex-shrink: 0;
		image {
			width: 100%;
			height: 100%;
		}
	}
	.right {
		text-align: left;
		width: 476rpx;
		padding-left: 20rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		.r-title {
			font-size: 32rpx;
			font-weight: 400;
			color: #333333;
		}
		.time {
			font-size: 26rpx;
			font-weight: 400;
			color: #999999;
		}
	}
}
</style>
