<template>
	<view class="container">
		<view class="swiper">
			<view class="swiper-box">
				<swiper circular="true" autoplay="true" @change="swiperChange">
					<swiper-item v-for="swiper in banner" :key="swiper"><image :src="baseURL + swiper"></image></swiper-item>
				</swiper>
				<view class="indicator"><view class="dots" v-for="(swiper, index) in banner" :class="[swiperCurrent >= index ? 'on' : '']" :key="index"></view></view>
			</view>
		</view>
		
		<view class="info-item">
			<view class="flex_item">
				<view class="list-tip">{{list.cname}}</view>
				<view class="info-title clamp">{{list.title}}</view>
			</view>
			<view class="info-tip">{{list.info}}</view>
			<view class="info-number">
				<view>资金：{{ list.amount || 0 }}</view>
				<view>帮扶人：{{ '' }}</view>
			</view>
		</view>
		<view class="introduce-item">
			<view class="introduce-title ellipsis">项目介绍</view>
			<view class="introduce-info">
				<rich-text :nodes="list.content"></rich-text>
			</view>
		</view>
		
		<view class="introduce-item" v-if="list.arr">
			<view class="introduce-title ellipsis">帮扶详情</view>
			<view class="introduce-info">
				<view>{{ list.arr.info1.remark }}</view>
				<view class="img-box">
					<image class="img-info" v-for="item in imgList" :src="item" mode="widthFix"></image>
				</view>
			</view>
		</view>
		
		
	</view>
</template>

<script>
	import uniPopup from '@/components/uni-popup/uni-popup.vue';
	import { one_detail, enroll } from '@/api/applyHelp.js';
	import { timeComputed } from '@/utils/rocessor.js';
	import { getHelpDetail } from '@/api/help.js'
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import uniCountdown from '@/components/uni-countdown/uni-countdown.vue';
	export default {
		components: {
			uniPopup,
			uniCountdown
		},
		data() {
			return {
				id:'',
				list: {},
				description:'',
				swiperCurrent: 0, //轮播图
				swiperHeight: 300,
				banner:[],//轮播图
				
				startday:0,
				starthour:0,//距离今天开始时间
				startminute:0,
				startsecond:0,
				
				endTime:'',//结束时间
				starting: false, //判断活动是否结束
				imgList: [],	// 图片
			};
		},
		onLoad(option) {
			this.id = option.id;
			this.loadData();
		},
		computed: {
			...mapState(['baseURL'])
		},
		methods: {
			loadData(){
				let obj = this;
				getHelpDetail({
					// id: obj.id
				},obj.id).then(data => {
						obj.list = data.data;
						console.log(data.data)
						
						// if (data.data.arr.info1.img) {
						// 	obj.imgList = data.data.arr.info1.img.split(';');	// 上传资料图片
						// }
							
						obj.banner =  data.data.userimages.split(',');
						// if (obj.list.description) {
						// 	obj.description = obj.list.description.replace(/\<img/gi, '<img class="rich-img"');
						// } //小程序商品详情图超出屏幕问题
						// let time = data.data.endActivityTime;
						// this.endTime = time*1000;
						// obj.StartDate();
					})
			},
			StartDate() {
				let obj = this;
				// 获取当前时间
				let now = new Date();
				let year = now.getFullYear(); //得到年份
				let month = now.getMonth(); //得到月份
				let date = now.getDate(); //得到日期
				let hour = now.getHours(); //得到小时
				let minu = now.getMinutes(); //得到分钟
				let sec = now.getSeconds(); //得到秒
				//获取现在时间的时间戳
				let time = new Date(year, month, date, hour, minu, sec);
				let nowTime = time.getTime();
				if (nowTime < obj.endTime) {
					console.log(nowTime,obj.endTime)
					console.log('现在时间小于活动时间，活动进行中');
					obj.starting = true;
					let starTime = obj.endTime - nowTime;
					console.log(starTime,'starTime')
					let day =  Math.floor(starTime / 1000 / 60 / 60 / 24); //获取剩余天数
					let hours = Math.floor((starTime / 1000 / 60 / 60) % 24); //获取剩余小时数
					let minutes = Math.floor((starTime / 1000 / 60) % 60); //获取分钟
					let seconds = Math.floor((starTime / 1000) % 60); //获取秒数
					obj.startday = day;
					obj.starthour = hours;
					obj.startminute = minutes;
					obj.startsecond = seconds;
					console.log('时间差是: '+ obj.startday + '天, ' + obj.starthour + '小时, ' + obj.startminute + '分钟, ' + obj.startsecond + '秒', '距离活动结束还剩多少时间');
				}else{
					obj.starting = false;
				}
			},
			//轮播图
			swiperChange(e) {
				const index = e.detail.current;
				this.swiperCurrent = index;
			},
			// 申请援助
			shenqing() {
				this.$refs.popup.open()
			},
			// 关闭弹窗
			close() {
				this.$refs.popup.close()
			},
			// 确认
			corfim() {
				enroll({
					hid: this.id,
				}).then(res => {
					this.close();
					this.$api.msg('申请成功');
					this.loadData();
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #F5F5F5;
		.container{
			height: 100%;
			padding-bottom: 180rpx;
		}
	}
	.rich-img {
		width: 100% !important;
		height: auto;
	}
	//轮播图
	.swiper {
		width: 100%;
		display: flex;
		justify-content: center;
		.swiper-box {
			width: 100%;
			height:650rpx;
			overflow: hidden;
			// box-shadow: 0upx 8upx 25upx rgba(0, 0, 0, 0.2);
			//兼容ios，微信小程序
			position: relative;
			z-index: 1;
			swiper {
				width: 100%;
				height: 100%;
				swiper-item {
					image {
						width: 100%;
						height: 100%;
					}
				}
			}
			.indicator {
				position: absolute;
				bottom: 20upx;
				left: 20upx;
				background-color: rgba(255, 255, 255, 0.4);
				width: 150upx;
				height: 5upx;
				border-radius: 3upx;
				overflow: hidden;
				display: flex;
				.dots {
					width: 0upx;
					background-color: rgba(255, 255, 255, 1);
					transition: all 0.3s ease-out;
					&.on {
						width: (100%/3);
					}
				}
			}
		}
	}
	.info-item{
		background-color: #FFFFFF;
		padding: 45rpx 25rpx;
		.list-tip{
			background-color: $motif-color;
			color: #FFFFFF;
			border-radius:8rpx;
			padding: 5rpx 12rpx;
			padding-bottom: 8rpx !important;
			margin-right: 15rpx;
			text-align: center;
			font-size: 24rpx;
		}
		.info-title{
			max-width: 75%;
			font-size:36rpx;
			font-weight:500;
			color:rgba(34,34,34,1);
		}
		.info-tip{
			font-weight:400;
			color:rgba(102,102,102,1);
			font-size: 28rpx;
			padding: 15rpx 0rpx;
		}
		.info-number{
			padding-top: 25rpx;
			color: #EF3D28;
			font-size: 24rpx;
			font-weight: normal;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.name-text{
				color: #666666;
			}
			.starting{
				font-size: 32rpx;
				font-weight: bold;
			}
		}
	}
	.introduce-item{
		background-color: #FFFFFF;
		padding: 45rpx 25rpx;
		margin-top: 25rpx;
		.introduce-title{
			padding-bottom: 40rpx;
			font-size: 36rpx;
			font-family: PingFang;
			font-weight: 500;
			color: #222222;

		}
		.introduce-info{
			font-size: 28rpx;
			font-weight: 500;
			color: #222222;
		}
		.img-box {
			width: 100%;
		}
		.img-info {
			width: 100%;
			display: block;
			margin-top: 30rpx;
		}
	}
	.static{
		padding: 0rpx !important;
		width: 70%;
		padding-left:25rpx !important;
	}
	.submit{
		position:fixed;
		bottom: 0rpx;
		width: 100%;
		color: #FFFFFF;
		text-align: center;
		background-color: #FFFFFF;
		padding: 50rpx 0rpx;
		font-size: $font-lg;
		text{
			padding: 25rpx 180rpx;
			// background:rgba(223,36,18,1);
			background: $motif-color;
			border-radius:50rpx;
		}
	}
	.yijieshu {
		text{
			background: #999999;
		}
	}
	.red{
		text{
			padding: 25rpx 180rpx;
			background:rgba(223,36,18,0.6);
			border-radius:50rpx;
		}
	}
	.pop-box {
		.pop-img {
			width: 542rpx;
			height: 280rpx;
			display: block;
		}
		.pop-frame {
			margin: 0 16rpx;
			padding: 35rpx 40rpx;
			background: #FFFFFF;
			box-shadow: 0px 5rpx 20rpx 0px rgba(0, 0, 0, 0.1);
			border-radius: 0 0 10rpx 10rpx;
			.pop-text {
				margin-top: 30rpx;
				font-size: 36rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #333C4C;
				line-height: 40rpx;
				text-align: center;
			}
			.pop-btnBox {
				margin-top: 78rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				.pop-btn {
					width: 199rpx;
					height: 78rpx;
					border: 1px solid #FF727E;
					border-radius: 10rpx;
					font-size: 32rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #FF727E;
					display: flex;
					align-items: center;
					justify-content: center;
				}
				.queren {
					background: #FF727E;
					color: #FFFFFF;
				}
			}
		}
	}
</style>