<template>
	<view class="main">
		<!-- 头部 -->
		<view class="header">
			<view class="logo">
				<image src="/static/logo.png" mode="widthFix"></image>
			</view>
			<view class="title">
				<image src="/static/count-title.png" mode="widthFix"></image>
			</view>
			<view class="position">
				<image src="/static/icon-home.png" mode="widthFix"></image>
			</view>
		</view>
		<!-- 计算器 -->
		<view class="calculator-bg">
			<view class="bg-img">
				<image src="/static/count-bg.png" mode="widthFix"></image>
			</view>
			<view class="calculator calculator-other" style="padding-top: 0;">
				<view class="contribution">
					<view class="hot">
						<image src="/static/contribution.png" mode="widthFix"></image>
					</view>
					<view class="tit">
						<image src="/static/icon-title-04.png" mode="heightFix"></image>
					</view>
					<view class="tips">购买碳汇，履行义务；足不出户，低碳植树。中国绿色碳汇基金会助你实现低碳生活！</view>
					<view class="form-bg">
						<view class="form">
							<view class="item">
								<view class="left">
									<text>购</text>
									<text>买</text>
									<text>者</text>
								</view>
								<view class="colon">:</view>
								<view class="right">
									<input class="input" type="text">
								</view>
							</view>
							<view class="item">
								<view class="left">
									<text>所</text>
									<text>在</text>
									<text>地</text>
								</view>
								<view class="colon">:</view>
								<view class="right">
									<picker mode="multiSelector" @change="changeAddress">
										<view class="addr-input">
											<view class="input-box">
												<input class="input-flex clips1" type="text" v-model="addrObj.province"
													disabled="true">
												<view class="arrow"></view>
											</view>
											<view class="input-box">
												<input class="input-flex clips1" type="text" v-model="addrObj.city"
													disabled="true">
												<view class="arrow"></view>
											</view>
										</view>
									</picker>
								</view>
							</view>
							<view class="item">
								<view class="left">
									<text>联</text>
									<text>系</text>
									<text>方</text>
									<text>式</text>
								</view>
								<view class="colon">:</view>
								<view class="right">
									<input class="input" type="text">
									<text>(手机或邮件)</text>
								</view>
							</view>
							<view class="item">
								<view class="left">
									<text>金</text>
									<text>额</text>
								</view>
								<view class="colon">:</view>
								<view class="right">
									<input class="input" type="text">
									<text>元</text>
								</view>
							</view>
							<view class="item">
								<view class="left">
									<text>获</text>
									<text>得</text>
									<text>碳</text>
									<text>汇</text>
								</view>
								<view class="colon">:</view>
								<view class="right">
									<input class="input" type="text">
								</view>
							</view>
							<view class="item">
								<view class="left">
									<text>付</text>
									<text>款</text>
									<text>方</text>
									<text>式</text>
								</view>
								<view class="colon">:</view>
								<view class="right">
									<picker @change="changePay" :value="payIndex" :range="payList">
										<view class="input-box">
											<input class="input-flex clips1" type="text" v-model="payList[payIndex]"
												disabled="true" style="letter-spacing: 0;text-indent: 0;">
											<view class="arrow"></view>
										</view>
									</picker>
								</view>
							</view>
							<view class="submit-btn">提交并打开支付宝收银台页面</view>
						</view>
					</view>
				</view>
				<view class="nav-btns nav-btns-other">
					<view class="btn" @tap="toPage('/pages/count/count')">
						<image src="/static/icon-tabbar-01.png" mode="heightFix"></image>
					</view>
					<view class="btn" @tap="toPage('/pages/assess/assess')">
						<image src="/static/icon-tabbar-02.png" mode="heightFix"></image>
					</view>
					<view class="btn active" @tap="toPage('/pages/eliminate/eliminate')">
						<image src="/static/icon-tabbar-03.png" mode="heightFix"></image>
					</view>
				</view>
			</view>
		</view>
		<!-- 轮播 -->
		<view class="banner">
			<swiper-pull></swiper-pull>
		</view>
		<!-- 底部 -->
		<view class="footer">
			<text>中国绿色碳汇基金会低碳旅游专项基金监制，北京凯来美气候技术咨询有限公司开发。</text>
		</view>
	</view>
</template>

<script>
	import swiperPull from '@/components/swiper/swiper-pull.vue';
	export default {
		components: {
			swiperPull
		},
		data() {
			return {
				statusHeight: uni.getSystemInfoSync().statusBarHeight, //状态栏高度
				member: 0, //家庭成员
				total: 0, //总计
				subTotal: [], //小计
				addrObj: {
					province: '不限',
					city: '不限'
				},
				payList: ['支付宝网上捐赠', '微信网上捐赠'], //支付方式
				payIndex: 0, //当前选择
			}
		},
		onLoad(op) {
			if (op.total) {
				this.total = op.total;
			}
			if (uni.getStorageSync('subTotal')) {
				this.subTotal = uni.getStorageSync('subTotal');
			}
		},
		methods: {
			// 选择省市
			changeAddress(e) {
				this.addrObj.province = e.detail.value[0];
				this.addrObj.city = e.detail.value[1];
			},
			changePay(e) {
				this.payIndex = e.detail.value
			},
			//跳转
			toPage(url) {
				if (url == '/pages/count/count') {
					uni.reLaunch({
						url: url
					})
				}
				if (url == '/pages/assess/assess') {
					if (uni.getStorageSync('subTotal')) {
						uni.navigateTo({
							url: `${url}?total=${this.total}`
						})
					} else {
						uni.showToast({
							title: '请先计算碳足迹',
							icon: 'none',
							duration: 2000
						})
					}
				}
				if (url == '/pages/eliminate/eliminate') {
					if (uni.getStorageSync('average')) {
						uni.navigateTo({
							url: `${url}?total=${this.total}`
						})
					} else {
						uni.showToast({
							title: '请先评估碳足迹',
							icon: 'none',
							duration: 2000
						})
					}
				}
			}
		}
	}
</script>

<style>

</style>
