import { useState } from 'react'
import './income.less'
import eyes from '../../../assets/icons/shopKeeper/小眼睛.png'
import ceyes from '../../../assets/icons/shopKeeper/小眼睛-闭上.png'
import sImg from '../../../assets/icons/landlord/我的收入2.png'
import cutoverUser from '@/assets/icons/UserCenter/cutoverUser.png'
import ToggleRoul from '@/components/toggleRoul/ToggleRoul'
import Picker from '@/components/Picker'

export default (props) => {
  const { hotelList, hotel, account, onHotelChange, accountlog } = props

  const handleHotelChange = (hotelId, current) => {
    onHotelChange(current)
  }

  const [isyear, setYear] = useState(true)
  const [isMomth, setMonth] = useState(false)
  const handleYear = () => {
    isyear ? setYear(false) : setYear(true)
  }
  const handleMonth = () => {
    isMomth ? setMonth(false) : setMonth(true)
  }
  const [showCutover, setShowCutover] = useState(false)
  const ShowMoldeOn = () => {
    setShowCutover(true)
  }
  const onClose = () => {
    setShowCutover(false)
  }
  return (
    <view>
      <ToggleRoul showCutover={showCutover} onClose={onClose} />
      <view style={{ padding: '30rpx', height: '100%' }}>
        <scroll-view scroll-y="true" scroll-view='true' bindscrolltoupper="upper" bindscrolltolower="lower" bindscroll="scroll" style={{ height: 'calc(100vh - 120px)' }}>
          <view className='storexx'>
            <view className='storeName'>店名：<Picker style={{ display: 'inline-block' }} placeholder="请选择民宿" value={hotel?.hotelId} kv={['hotelName', 'hotelId']} dicts={hotelList} onChange={handleHotelChange} /></view>
            <view onClick={ShowMoldeOn} className='User-info-cutover'>
              <image className='User-info-cutover-image' src={cutoverUser} />
            </view>
            <view className='money'>
              <view className='sleft'>
                <view className='lword'>全年收入（税前）</view>
                <view className='yearMoney'>
                  <text>{isyear ? account?.amounts : '******'}</text>元
                  <image className='micon' src={isyear ? eyes : ceyes} onClick={handleYear} />
                </view>
              </view>
              <view className='line' />
              <view className='sright'>
                <view className='rword'>当月收入（税前）</view>
                <view className='monthMoney'>
                  <text>{isMomth ? account?.currentCharges : '******'}</text>元
                  <image className='micon2' src={isMomth ? eyes : ceyes} onClick={handleMonth}></image>
                </view></view>
            </view>
          </view>
          
          <view className='title' >{accountlog.length!=''?'推广收入记录':'暂无推广收入'}</view>
            {
              accountlog?.map((item) => 
                <view className='spreadCard'>
                  <view className='card'>
                    <view className='spreadTime'>时&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;间：<text>{item.createDate}</text></view>
                    <view className='spreadMoney'>收入金额：<text>{parseFloat((item.amount/100).toFixed(2))}</text>元</view>
                    <image className='spreadImg' src={sImg} />
                  </view>
                </view>
              )
            }
            {accountlog.length!=''?<view className='botton'>已经到底了~</view>:''}          
        </scroll-view>
      </view>
    </view>
  )
}