import Taro, { Component } from '@tarojs/taro';
import './index.scss'
import {  savePoint, updatePoint } from '@services/common'
export default class Index extends Component {
	config = {
		navigationBarTitleText: '房贷计算器'
	}

	state = {
		selector: ['10%', '20%', '30%', '40%', '50%', '60%', '70%', '80%', '90%', '100%'],
		selectorChecked: '10%',
		firstPay: 0,
		rateList: ['基准利率(4.85%)', '基准利率7折(3.40%)', '基准利率75折(3.64%)', '基准利率8折(3.88%)', '基准利率85折(4.12%)', '基准利率9折(4.37%)', '基准利率95折(4.61%)', '基准利率1.05倍(5.09%)', '基准利率1.1倍(5.33%)', '基准利率1.2倍(5.82%)', '基准利率1.3倍(6.31%)'],
		rate: '基准利率(4.85%)',
		accumulationRateList: ['基准利率(3.25%)', '基准利率1.1倍(3.58%)', '基准利率1.2倍(3.90%)', '基准利率1.3倍(4.23%)'],
		accumulationRate: '基准利率(3.25%)',
		isChoose: false,
		accumulation: 0,
		shangPay: 0,
		allPay: '',
		time2: 30,
    time1: 30,
    recordId:null
	}
  componentWillMount() {
    savePoint({
      event: 'calculator',
      eventType: 'main',
      propertyName: '房贷计算器',
      data:'{}'
    }).then(res => {
      this.setState({
        recordId:res.recordId
      })
      console.log('房贷计算器')
    })
  }
  componentWillUnmount(){
    const { recordId } = this.state
    recordId && updatePoint(recordId)
  }
	onChange = e => {
		this.setState({
			selectorChecked: this.state.selector[e.detail.value]
		}, function () {
			this.changeNumber()
		})
	}

	onRateChange = e => {
		this.setState({
			rate: this.state.rateList[e.detail.value]
		})
	}

	onAccumulationRateChange = e => {
		this.setState({
			accumulationRate: this.state.accumulationRateList[e.detail.value]
		})
	}

	chooseHandle() {
    console.log('accumulation:'+this.state.accumulation)
		if (this.state.isChoose) {
			// if (this.state.accumulation) {
				this.setState({
					isChoose: false,
          shangPay:this.state.shangPay + Number(this.state.accumulation)
				})
			// }
		} else {
			// if (this.state.accumulation) {
				this.setState({
					isChoose: true,
					shangPay: this.state.shangPay -Number(this.state.accumulation)
				})
			// }
		}
	}

	onInputText = e => {
    console.log(e.currentTarget.dataset.id)
    var n = e.detail.value
    switch(e.currentTarget.dataset.id){
      case 'allPay':
          if (n > 10000) {
            this.Alert('请输入小于10000万的数')
            n = 0
          }
          this.setState({
            allPay: n
          }, function () {
            this.changeNumber()
          })
        break;
        case 'accumulation':
			if(n>this.state.allPay-this.state.firstPay){
				 this.Alert('请输入小于贷款总额的数')
				 n=0
			}
            this.setState({
              accumulation: n
            }, function () {
              this.changeNumber()
              console.log(n)
            })
          break;
    }
		
	}

	onChangeTime2 = e => {
		this.setState({
			time2: e.detail.value
		})
	}

	onChangeTime1 = e => {
		this.setState({
			time1: e.detail.value
		})
	}

	changeNumber() {
		var number = this.state.allPay * parseInt(this.state.selectorChecked) / 100
		// if (this.state.allPay - number < 120) {
			if (this.state.isChoose) {
				this.setState({
					firstPay: number,
					// accumulation: this.state.allPay - number,
					shangPay: this.state.allPay - number- Number(this.state.accumulation)
				})
			} else {
				this.setState({
					firstPay: number,
					accumulation:0,
					shangPay:this.state.allPay - number
				})
			}
		// } else {
		// 	if (this.state.isChoose) {
		// 		this.setState({
		// 			firstPay: number,
		// 			// accumulation: 120,
		// 			shangPay: this.state.allPay -  Number(this.state.accumulation) - number
		// 		})
		// 	} else {
		// 		this.setState({
		// 			firstPay: number,
		// 			shangPay: this.state.allPay - number
		// 		})
		// 	}
		// }
	}

	goResult = e => {
    var shuju1;
    var accumulationRate = (this.state.accumulationRate.slice(-6, -2)) / 100
		if (this.state.allPay == 0) {
			this.Alert('请输入房产总额')
			return;
    }
    if(this.state.isChoose){
      if (this.state.accumulation == '' || this.state.accumulation == 0) {
        this.Alert('请输入公积金贷款金额')
        return;
      }
      shuju1 = this.state.accumulation + ',' + this.state.time2 + ',' + accumulationRate //公积金贷款数据
      Taro.setStorageSync('shuju1', shuju1)
    }else{
      // this.setState({
      //   accumulation:0
      // },()=>{
        shuju1 = this.state.accumulation + ',' + this.state.time2 + ',' + accumulationRate //公积金贷款数据
        Taro.setStorageSync('shuju1', shuju1)
      // })
    }

    
		var rate = (((this.state.rate).match(/\((.*)\%/))[1])/100
		//			var lixi=calcute.singleDk(1,this.state.accumulation,this.state.time2,rate)

    	var shuju2 = this.state.shangPay + ',' + this.state.time1 + ',' + rate  //商贷数据

		console.log(shuju1 + '=' + shuju2)
		
		Taro.setStorageSync('shuju2', shuju2)

		Taro.setStorageSync('allPay', this.state.allPay)
		Taro.setStorageSync('bili', this.state.selectorChecked)

		console.log(Taro.getStorageSync('shuju1'))

		// App.zhuge.track('房贷计算', {
		// 	'贷款总额': this.state.allPay
		// })

		Taro.navigateTo({
			url: `/pages/toolKit/calculateResult/index`
		})
	}

	Alert(content, title) {
		title = title ? title : "温馨提示";
		content = content.toString();
		Taro.showModal({
			title: title,
			content: content,
			confirmColor: '#4f93ce',
			showCancel: false,

		})
	}

	render() {
		return (
			<View className='list_big_box'>
				<View className='list_box line'>
					<Text className='title'>房产总价</Text>
					<Input type='number' value={this.state.allPay} data-id='allPay' placeholder='请输入房产总额' onInput={this.onInputText} />
					<Text className='size'>万元</Text>
				</View>
				<View className='list_box line'>
					<Text className='title'>首付比例</Text>
					<Picker mode='selector' range={this.state.selector} onChange={this.onChange}>
						<View className='picker'>
							{this.state.selectorChecked}
						</View>
					</Picker>
					<Text className='size'>></Text>
				</View>
				<View className='list_box'>
					<Text className='title'>首付金额</Text>
					<View className='fisrt_pay'>{this.state.firstPay}</View>
					<Text className='size'>万元</Text>
				</View>

				<View className='list_box2'></View>

				<View className='list_box line'>
					<Text className='title'>商业贷款</Text>
					<View className='fisrt_pay'>{this.state.shangPay}</View>
					<Text className='size'>万元</Text>
				</View>
				<View className='list_box line'>
					<Text className='title'>贷款年限</Text>
					<Slider min={0} max={30} step={1} value={this.state.time1} showValue onChange={this.onChangeTime1} />
					<Text className='size'>年<Text style='opacity:0'>岁</Text></Text>
				</View>
				<View className='list_box'>
					<Text className='title'>商业贷款利率</Text>
					<Picker mode='selector' range={this.state.rateList} onChange={this.onRateChange}>
						<View className='picker'>
							{this.state.rate}
						</View>
					</Picker>
					<Text className='size'>></Text>
				</View>

				<View className='list_box2'></View>

				<View className='list_box line'>
					<Text className='title'>使用公积金贷款</Text>
					<Switch Color='#f76b6f' checked={this.state.isChoose} onChange={this.chooseHandle} />
				</View>
				<View className={this.state.isChoose ? 'chooseBox show' : 'chooseBox hide'}>
					<View className='list_box line'>
						<Text className='title'>公积金贷款</Text>
            {/* <View className='fisrt_pay'>{this.state.accumulation}</View> */}
            <View className='fisrt_pay'>
              <Input type='number'  data-id='accumulation' value={this.state.accumulation}  onInput={this.onInputText}></Input>
            </View>
						<Text className='size'>万元</Text>
					</View>
					<View className='list_box line'>
						<Text className='title'>公积金贷款年限</Text>
						<Slider min={0} max={30} step={1} value={this.state.time2} showValue onChange={this.onChangeTime2} />
						<Text className='size'>年<Text style='opacity:0'>岁</Text></Text>
					</View>
					<View className='list_box'>
						<Text className='title'>公积金贷款利率</Text>
						<Picker mode='selector' range={this.state.accumulationRateList} onChange={this.onAccumulationRateChange}>
							<View className='picker'>
								{this.state.accumulationRate}
							</View>
						</Picker>
						<Text className='size'>></Text>
					</View>
				</View>
				<Button type="warn" onClick={this.goResult} className='calculate'>计算</Button>
			</View>
		);
	}
}