import React, { useState, useEffect, useRef } from 'react'
import Taro from '@tarojs/taro'
import { ScrollView, Image } from '@tarojs/components'
import '@/assets/css/iconfont.css'
import useTimer from './useTimer'
import './index.scss'

const toW = n => `${Number(n / 10000).toFixed(1)}`
const itFmt = it => `${it.unitType} ${Number(it.currentPrice / it.area).toFixed(0)}元/㎡`

export default function SpecialPriceHouse (props) {
  const { List } = props
  const [leftTime] = useTimer(List)

  const handleMore = () => {
    Taro.navigateTo({ url: '/pages/index/specialPriceHouse/index' })
  }

  const len = List ? List.length : 0

  return len > 0 ? (
    <view className='components SpecialPriceHouse'>
      <view className='Title flex-h'>
        <view className='flex-item'>
          <text>特价房源</text>
          <text>{`（${len}）`}</text>
        </view>
        <text onClick={handleMore}>更多</text>
        <text className='iconfont icon-jiantouright'></text>
      </view>

      <view className='List'>
        <ScrollView scrollX>
          {
            List.map((item, index) => (
              <view className='ListItem' key={`List-${index}`}>
                <text className='Tips'>省{`${toW(item.thriftPrice)}`}</text>
                <view className='Price'>
                  <text>{toW(item.currentPrice)}</text>
                  <text>万</text>
                  <text>{toW(item.originalPrice)}万</text>
                </view>
                <text className='Time'>{`距结束还有 ${leftTime[index] ? leftTime[index][1] : ''}`}</text>
                <text className='HouseType'>{itFmt(item)}</text>
                <text className='DoorNumber'>{item.roomName}</text>
              </view>
            ))
          }
        </ScrollView>
      </view>

    </view>
  ) : null
}
