import Taro, {Component} from '@tarojs/taro';
import {calcute} from '@utils/calcute'
import ready from '@utils/ready'
import './index.scss'

export default class Index extends Component {
	config = {
		navigationBarTitleText: '房贷计算结果'
	}
	state = {
		current: 0,
		choose: true,
		lixi1:{},
		lixi2:{},
		shuju1:'',
		shuju2:'',
		allPay:0,
		bili:0
	}
	componentDidMount() {
      const shuju1=(Taro.getStorageSync('shuju1')).split(',')
      const shuju2=(Taro.getStorageSync('shuju2')).split(',')
      this.setState({
				shuju1,
				shuju2,
      	allPay:Taro.getStorageSync('allPay'),
      	bili:Taro.getStorageSync('bili')
      })
			 
   		if(shuju1[0]>0&&shuju2[0]>0){
   			var a=calcute.zuhe(1,shuju2[0],shuju1[0],shuju2[1],shuju1[1],shuju2[2],shuju1[2])
   			var b=calcute.zuhe(2,shuju2[0],shuju1[0],shuju2[1],shuju1[1],shuju2[2],shuju1[2])
   			this.setState({
   				lixi1:a,
   				lixi2:b
   			})
   			console.log(a)
   			console.log(b)
   		}else{
			if(shuju1[0]>0){
				var a=calcute.singleDk(1,shuju1[0],shuju1[1],shuju1[2])
				var b=calcute.singleDk(2,shuju1[0],shuju1[1],shuju1[2])
				this.setState({
					lixi1:a,
					lixi2:b
				})
			}else{
				var a=calcute.singleDk(1,shuju2[0],shuju2[1],shuju2[2])
				var b=calcute.singleDk(2,shuju2[0],shuju2[1],shuju2[2])
				this.setState({
					lixi1:a,
					lixi2:b
				})
			}
   			console.log(a+','+b)
   		}
  }
	
	handleClick = (index) => (e) => {
		if(index == 1) {
			this.setState({
				choose: true
			})
		} else {
			this.setState({
				choose: false
			})
		}
	}
	render() {
		return(
			<View className='page'>
					<View className='btn_box'>
							<View className='btn' onClick={this.handleClick(1)}>
								<Text className={this.state.choose?'choose1':''}>等额本息</Text>
								<Text className={this.state.choose?'choose1':''}>每月还款相同</Text>
							</View>
							<View className='btn' onClick={this.handleClick(2)}>
								<Text className={this.state.choose?'':'choose1'}>等额本金</Text>
								<Text className={this.state.choose?'':'choose1'}>还款逐月减少</Text>
							</View>
					</View>
					<View className={this.state.choose?'content show':'content hide'}>
						<Image className='bg' src={require('../../../assets/calculate/1.png')}></Image>
						<View className='numberAll'>
							<Text className='word1'>月供</Text>
							<Text className='word2'>{parseInt(this.state.lixi1.yuegong)}<Text className='word2_1'>元</Text></Text>
							<Text className='word3'>共支付利息{((this.state.lixi1.totalLixi)/10000).toFixed(2)}万元</Text>
							<View className='word4_box'>
									<View className='word4_1'>
										<Text className='word5'>房款总额</Text>
										<Text className='word6'>{this.state.allPay}万元</Text>
									</View>
									<View className='word4_1'>
										<Text className='word5'>{this.state.bili}</Text>
										<Text className='word6'>{this.state.allPay*parseInt(this.state.bili)/100}万元</Text>
									</View>
									<View className='word4_1'>
										<Text className='word5'>贷款总额</Text>
										<Text className='word6'>{this.state.allPay-this.state.allPay*parseInt(this.state.bili)/100}万元</Text>
									</View>
							</View>
						</View>
					</View>
					<View className={this.state.choose?'content hide':'content show'}>
						<Image className='bg' src={require('../../../assets/calculate/2.png')}></Image>
						<View className='numberAll'>
							<Text className='word1'>月供</Text>
							<Text className='word2'>{parseInt(this.state.lixi2.yuegong)}<Text className='word2_1'>元</Text></Text>
							<Text className='word3'>共支付利息{((this.state.lixi2.totalLixi)/10000).toFixed(2)}万元,之后每月递减{(parseFloat(this.state.lixi2.yuegongdijian)).toFixed(2)}元</Text>
							<View className='word4_box'>
									<View className='word4_1'>
										<Text className='word5'>房款总额</Text>
										<Text className='word6'>{this.state.allPay}万元</Text>
									</View>
									<View className='word4_1'>
										<Text className='word5'>{this.state.bili}</Text>
										<Text className='word6'>{this.state.allPay*parseInt(this.state.bili)/100}万元</Text>
									</View>
									<View className='word4_1'>
										<Text className='word5'>贷款总额</Text>
										<Text className='word6'>{this.state.allPay-this.state.allPay*parseInt(this.state.bili)/100}万元</Text>
									</View>
							</View>
						</View>
					</View>
					<View className='list_box2'></View>
					<View className='list_box1'>
							<View><Text className='word1'>公积金贷款</Text><Text className='word1'>{this.state.shuju1[0]}万元</Text></View>
							<View>
							<Text className='word2'>
									<Text className='word1'>贷款年限:</Text>
									<Text className='word1'>{this.state.shuju1[1]}年</Text>
							</Text>
							<Text className='word2'>
									<Text className='word1'>贷款年利率:</Text>
									<Text className='word1'>{((this.state.shuju1[2])*100).toFixed(2)}%</Text>
							</Text>
							</View>
					</View>
					<View className='list_box2'></View>
					<View className={this.state.shuju2[0]>0?'list_box1 show':'list_box1 hide'}>
							<View><Text className='word1'>商业贷款</Text><Text className='word1'>{this.state.shuju2[0]}万元</Text></View>
							<View>
							<Text className='word2'>
									<Text className='word1'>贷款年限:</Text>
									<Text className='word1'>{this.state.shuju2[1]}年</Text>
							</Text>
							<Text className='word2'>
									<Text className='word1'>贷款年利率:</Text>
									<Text className='word1'>{((this.state.shuju2[2])*100).toFixed(2)}%</Text>
							</Text>
							</View>
					</View>
			</View>
		);
	}
}