import { useState, useEffect } from 'react'
import Taro from '@tarojs/taro'
import withLayout from '@/layout'
import { ScrollView } from '@tarojs/components'
import Tabs from '@/components/Tabs'
import GJJForm from './components/GJJForm'
import SYForm from './components/SYForm'
import Result from './components/Result'
import * as sdk from './calc'
import './index.scss'

const tabs = ['商业贷款', '公积金贷款', '组合贷款']

const showError = title => Taro.showToast({ title, icon: 'none'});

export default withLayout(() => {
  const [loading, setLoading] = useState(false)
  const [visible, setVisible] = useState(false)
  const [current, setCurrent] = useState(1)

  const [SYFormData, setSYFormData] = useState()
  const [GJJFormData, setGJJFormData] = useState()
  const [result, setResult] = useState([])

  const handleCalc = () => {
    // 校验商业贷款
    if (current !== 2) {
      if (SYFormData.year < 0 || SYFormData.year > 30) {
        showError('商业贷款年限设置不正确');
        return
      }
      // eslint-disable-next-line no-restricted-globals
      if (isNaN(SYFormData.money) || isNaN(SYFormData.rate)) {
        showError('商业贷款金额或利率设置不正确');
        return
      }
    }
    // 校验公积金贷款
    if (current !== 1) {
      if (GJJFormData.year < 0 || GJJFormData.year > 30) {
        showError('公积金贷款年限设置不正确');
        return
      }
      // eslint-disable-next-line no-restricted-globals
      if (isNaN(GJJFormData.money) || isNaN(GJJFormData.rate)) {
        showError('公积金贷款金额或利率设置不正确');
        return
      }
    }

    Taro.showLoading()

    setLoading(true)
    const syResult = {}
    const gjjResult = {}
    if (current !== 2) {
      syResult.bj = sdk.calcBJ(SYFormData.money, SYFormData.year, SYFormData.rate)
      syResult.bx = sdk.calcBX(SYFormData.money, SYFormData.year, SYFormData.rate)
    }

    if (current !== 1) {
      gjjResult.bj = sdk.calcBJ(GJJFormData.money, GJJFormData.year, GJJFormData.rate)
      gjjResult.bx = sdk.calcBX(GJJFormData.money, GJJFormData.year, GJJFormData.rate)
    }
    setLoading(false)

    Taro.hideLoading()

    const res = [undefined, undefined]
    if (current !== 2) {
      res[0] = syResult
    }
    if (current !== 1) {
      res[1] = gjjResult
    }

    setResult(res)
    setVisible(true)
  }

  return (
    <view className='Page mortgageCalc'>
      <Tabs tabs={tabs} current={current} onChange={setCurrent} />
      {/* <Cell header='还款方式 : '>
        <RadioGroup>
          <Label><Radio value='debx' /> 等额本息</Label>
          <Label style={{marginLeft: '1em'}}><Radio value='debj' /> 等额本金</Label>
        </RadioGroup>
      </Cell> */}
      <ScrollView scrollY className='page-scroll' style={current === 3 ? { height: 'calc(100vh - 100rpx)' } : {}}>
        {current === 3 && <view className='title'>商业贷款</view>}
        {
          current !== 2 && (
            <view className='container'>
              <SYForm onChange={setSYFormData} />
            </view>
          )
        }

        {current === 3 && <view className='title'>公积金贷款</view>}
        {
          current !== 1 && (
            <view className='container'>
              <GJJForm onChange={setGJJFormData} />
            </view>
          )
        }
        <view className='Btn'>
          <button loading={loading} onClick={handleCalc}>开始计算</button>
        </view>
      </ScrollView>
      <page-modal show={visible} position='bottom' onClose={() => setVisible(false)} >
        <Result dataSource={result} isMixed={current === 3} onClose={() => setVisible(false)} />
      </page-modal>
    </view>
  )
})
