<template>
	<view>
		<follow :redirectUrl="'sfp/pages/childEdu/childEdu'" @getFollowData="getFollowData"
		v-show="isNeedOfficialAccountQrcode"></follow>
		<view class="wrapper" v-show="!isNeedOfficialAccountQrcode">
			<view class="banner">
				<!--头部技术支持组件-->
				<commonHead></commonHead>
				<img src="../../static/images/childEduBanner.jpg" alt="banner" srcset="">
			</view>	
			<scroll-view scroll-y="true" class="formInfoContainer" id="formInfoContainer">
				<view class="title"><view>小孩信息</view></view>
				<view class="listContent">
					<ul>
						<li>
							<div>昵称:</div>
							<div><input class="uni-input" maxlength="10" placeholder="昵称长度不超过10" /></div>
						</li>
						<li>
							<div>年龄：</div>
							<div><input class="uni-input" type="number" maxlength="3" placeholder="请输入周岁年龄" /></div>
						</li>
						<li class="multiline">
							<div class="multilineItem">
								<div>是否已上学：</div>
								<div class="selectBtnContent">
									<text class="actived">是</text>
									<text>否</text>
								</div>
							</div>
							<div class="multilineItem">
								<div>最高学历：</div>
								<div>
									<uni-data-picker placeholder="请选择最高学历" popup-title="请选择最高学历" :localdata="dataTree" v-model="classes"
										@change="onchange" @nodeclick="onnodeclick" @popupopened="onpopupopened" @popupclosed="onpopupclosed">
									</uni-data-picker>
								</div>
							</div>
						</li>
						<li class="planGradeRange">
							<div>规划阶段</div>
							<div>
								<uni-data-picker placeholder="请选择最高学历" popup-title="请选择最高学历" :localdata="dataTree" v-model="classes"
									@change="onchange" @nodeclick="onnodeclick" @popupopened="onpopupopened" @popupclosed="onpopupclosed">
								</uni-data-picker>
								<text></text>
								<uni-data-picker placeholder="请选择最高学历" popup-title="请选择最高学历" :localdata="dataTree" v-model="classes"
									@change="onchange" @nodeclick="onnodeclick" @popupopened="onpopupopened" @popupclosed="onpopupclosed">
								</uni-data-picker>
							</div>
						</li>
					</ul>
				</view>
				<view class="title"><view>资源信息</view></view>
				<view class="listContent">
					<ul>
						<li>
							<div>已备教育资金总额：</div>
							<div>万元</div>
						</li>
						<li>
							<div>每年预备投入教育资金总额：</div>
							<div>万元</div>
						</li>
					</ul>
				</view>
				<view class="title"><view>参数</view></view>
				<view class="listContent">
					<ul>
						<li>
							<div>学费增长率：</div>
							<div>%</div>
						</li>
						<li>
							<div>资产投资回报率：</div>
							<div>%</div>
						</li>
					</ul>
				</view>
				<!-- 学费设定 -->
				<view class="schoolingContent">
					<ul>
						<li>
							<div>学历</div>
							<div>学制（年）</div>
							<div>首年预估学费</div>
							<div></div>
						</li>
						<li>
							<div>幼儿园</div>
							<div><input class="uni-input" maxlength="1" type="number" placeholder="最高不超过10" /></div>
							<div><input class="uni-input" maxlength="10" type="digit" placeholder="" /></div>
							<div><view class="settingButton">逐年设定</view></div>
						</li>
					</ul>
				</view>
				<!-- 测算结果及建议 -->
				<view class="title"><view>测算结果及建议</view></view>
				<!-- 图表 -->
				<!-- 为 ECharts 准备一个定义了宽高的 DOM -->
				<div id="main" style="width: 600px;height:400px;"></div>
				<view class="summaryContent">
					<view class="successInfo">
						<strong>恭喜您！</strong>
						<text>经过测算，您的资金可以负担XXX宝贝从XXX到XXX的学费。</text>
					</view>
					<view class="failInfo">
						<strong>很遗憾！</strong>
						<text>经过测算，您的资金不可以负担XXX宝贝从XXX到XXX的学费。</text>
					</view>
					<view class="suggestionInfo">
						<view>您可以这样做来实现：</view>
						<view>
							1.提高教育储蓄到XXX元
						</view>
					</view>
				</view>
				<!-- 操作 -->
				<view class="optionContent">
					<button type="default" plain="true" form-type="reset"
					@click="resetData()" >全部清空</button>
					<button type="default" plain="true"
					class="btn" @click="startCount()">开始计算</button>
				</view>
			
			</scroll-view>
		</view>
		<!--底部技术支持组件-->
		<foot></foot>
	</view>
</template>

<script>
	import {ref} from "vue";
	import commonHead from '../header/header.vue';
	import follow from '../follow/follow.vue';
	import foot from "../footer/footer.vue";
	import {eduGradeLists} from "../../util/mock-data";
	import * as echarts from 'echarts';
	
	export default {
		data() {
			return {
				isNeedOfficialAccountQrcode:true,
				classes:'1-1',
				dataTree: eduGradeLists
			}
		},
		methods: {
			getFollowData(e){
				this.isNeedOfficialAccountQrcode= ref(e);
			},
			onnodeclick(e) {
				console.log(e);
			},
			onpopupopened(e) {
				console.log('popupopened');
			},
			onpopupclosed(e) {
				console.log('popupclosed');
			},
			onchange(e) {
				console.log('onchange:', e);
			},
			drawLine(){
				  // 基于准备好的dom，初始化echarts实例
				      var myChart = echarts.init(document.getElementById('main'));
				      // 指定图表的配置项和数据
				      var option = {
						  xAxis: {
							  type: 'category',
							  boundaryGap:true,
							  axisLabel:{
								  interval:0
							  },
							  data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
							},
							yAxis: {
							  type: 'value'
							},
							series: [
							  {
								data: [820, 932, 901, 934, 1290, 1330, 1320],
								type: 'line',
								areaStyle: {}
							  }
							]
				      };
				
				      // 使用刚指定的配置项和数据显示图表。
				      myChart.setOption(option);
			}
		},
		mounted() {
			this.drawLine();
		},
		components:{
			follow,
			commonHead,
			foot
		}
	}
</script>

<style>
	@import url("childEdu.css");
</style>
