<template>
	<view class="">
		<view class="start-page">
			<view class="view-lineHight"><image class="topImage" src="../../static/imgs/start-page/bkTop.png" mode=""></image></view>
			<view class="page-jump" @click="jumpLogin"><text>跳过</text></view>
			<view class="page1">
				<swiper
					class="swiper"
					:current="current"
					@change="currentChange"
					@transition="transition"
					:style="pageHight"
					:indicator-dots="indicatorDots"
					:autoplay="autoplay"
					:interval="interval"
					:duration="duration"
				>
					<swiper-item v-for="(swiper, swiperIndex) in pageText" :key="swiperIndex">
						<view class="swiper-item uni-bg-red">
							<view class="page-top">
								<view class="page-text">
									<text>{{ swiper.text }}</text>
								</view>
								<view class="page-title">
									<text>{{ swiper.title }}</text>
								</view>
								<view class="page-subtitle">
									<text>{{ swiper.subTitle }}</text>
								</view>
								<image class="" :src="swiper.image" mode=""></image>
							</view>
						</view>
					</swiper-item>
				</swiper>
				<view class="index-point"><view v-for="(items, index) in pageText" :class="current === index ? 'indexs-check' : 'indexs-nocheck'"></view></view>
				<view class="page-btn-class" v-if="current === pageText.length - 1"><button @click="jumpLogin" class="page-btn" type="default">立即开启</button></view>
			</view>

			<view class="view-lineHight"><image class="topImage bottom-image" src="../../static/imgs/start-page/bkBottom.png" mode=""></image></view>
		</view>
	</view>
</template>

<script>
	import { back, go2, uploadFile } from '@/utils/hook.js'
export default {
	data() {
		return {
			current: 0,
			mode: 'round',
			pageHight: 0,
			background: ['color1', 'color2', 'color3'],
			indicatorDots: false,
			autoplay: true,
			interval: 1500,
			duration: 500,
			pageText: [
				{
					text: '',
					title: '账期订单融资',
					subTitle: '给客户更便宜的价格，更大的销售额',
					image: '../../static/imgs/start-page/rz.png'
				},
				{
					text: '',
					title: '征信管理',
					subTitle: '具有客户更丰富多维的征信数据',
					image: '../../static/imgs/start-page/zx.png'
				},
				{
					text: '',
					title: '电子签约',
					subTitle: '避免交易过程可能的纠纷',
					image: '../../static/imgs/start-page/dzqy.png'
				},
				{
					text: '全新纸掌柜',
					title: '智能合同',
					subTitle: '实现合同同步的财务履约能力',
					image: '../../static/imgs/start-page/ht.png'
				}
			]
		}
	},
	methods: {
		currentChange(item) {
			this.current = item.detail.current
		},
		transition(item){
			if(this.current === this.pageText.length - 1){
				this.autoplay = false
			}
		},
		jumpLogin(){
			go2('client')
		}
	},
	onLoad() {
		// this.pageHight = 'height:' + (window.screen.height - 60) + 'px'
		this.pageHight = 'height:' + (document.documentElement.clientHeight - 60) + 'px'
	}
}
</script>

<style lang="scss">
.start-page {
	.topImage {
		width: 100%;
		height: 72rpx;
	}
	.view-lineHight {
		line-height: 0rpx;
	}
	.bottom-image {
		position: absolute;
		bottom: 0rpx;
	}
	.page1 {
		background-color: #e7eeff;
		text-align: center;
	}
	.page-title {
		font-size: 100rpx;
		color: #2143af;
		text-align: center;
		font-weight: 600;
		margin: 32rpx 0rpx;
	}
	.page-text {
		font-size: 80rpx;
		color: #2143af;
		font-weight: 400;
	}
	.page-top {
		padding-top: 20%;
	}
	.page-subtitle {
		font-size: 32rpx;
		color: #333333;
		font-weight: 400;
		margin: 32rpx 0rpx;
	}
	.page-jump {
		position: absolute;
		padding: 12rpx;
		border: 2rpx solid #979797;
		border-radius: 38rpx;
		width: 122rpx;
		text-align: center;
		right: 54rpx;
		font-size: 24rpx;
		color: #333333;
		font-weight: 400;
		z-index: 9999;
	}
	.indexs-check {
		background-image: linear-gradient(90deg, #047fff 0%, #00b4fa 100%);
		border-radius: 12rpx;
		width: 54rpx;
		height: 12rpx;
		margin-left: 10rpx;
	}
	.indexs-nocheck {
		width: 12rpx;
		height: 12rpx;
		background-color: #58c4fd;
		margin-left: 10rpx;
		border-radius: 10rpx;
	}
	.index-point {
		position: absolute;
		top: 70%;
		left: 40%;
		display: flex;
	}
	.page-btn {
		background-image: linear-gradient(90deg, #047fff 0%, #00b4fa 100%);
		border-radius: 8rpx;
		font-size: 32rpx;
		color: #FFFFFF;
		font-weight: 500;
		width: 400rpx;
	}
	.page-btn-class {
		position: absolute;
		top: 73%;
		left: 0;
		right: 0;
	}
}
</style>
