import React, { useEffect, useState } from 'react'
import Cell from '@/components/Cell'

export default (props) => {
  const { onChange } = props

  const [money, setMoney] = useState()
  const [year, setYear] = useState(20)
  const [LPR, setLPR] = useState(4.65)
  const [add, setAdd] = useState()
  const [rate, setRate] = useState(4.65)

  useEffect(() => {
    setRate((LPR||0) + (add||0)/100)
  }, [LPR, add])

  useEffect(() => {
    if (onChange) {
      onChange({
        money: (money||0) - 0,
        year: (year||0) - 0,
        rate: (rate||0) - 0,
      })
    }
  }, [money, year, rate, onChange])

  return (
    <view>
      <Cell header='贷款总额 : ' footer='万元'>
        <input type='digit' placeholder='请填写金额' value={money} onInput={e => setMoney(e.detail.value)} />
      </Cell>
      <Cell header='贷款年限 : ' footer='年'>
        <slider min={10} max={30} showValue activeColor='#193C83' value={year} onChange={e => setYear(e.detail.value)} />
      </Cell>
      <Cell header='LPR : ' footer='%'>
        <input type='digit' placeholder='请输入LPR' value={LPR} onInput={e => setLPR(e.detail.value)} />
      </Cell>
      <Cell header='基点 : ' footer='BP‱'>
        <input type='digit' placeholder='请输入基点' value={add} onInput={e => setAdd(e.detail.value)} />
      </Cell>
      <Cell header='贷款利率 : ' footer='%'>
        {`${LPR}% + ${add||''}BP‱ = ${rate}`}
      </Cell>
    </view>
  )
}
