import { useState, useEffect } from 'react'
import withLayout from '@/layout'
import { ScrollView } from '@tarojs/components'
import Disclaimer from '@/components/Disclaimer'
import { fetch } from '@/utils/request'
import { API_ITEMS_DETAIL } from '@/constants/api'

import './index.scss'

const formateDate = dt => dt ? dt.substring(0, 10) : undefined

export default withLayout((props) => {
  const { router } = props
  const { id } = router.params

  const [Info, setInfo] = useState({})

  const InfoList = [
    [
      { name: '项目名称', value: Info.buildingName, key: '' },
      { name: '开发商', value: Info.brandName || Info.serviceCompany || '暂无', key: '' },
      { name: '均价', value: Info.price || '待定', key: '' },
      { name: '销售状态', value: Info.marketStatus || '待定', key: '' },
      { name: '开盘日期', value: formateDate(Info.openingDate) || '待定', key: '' },
      { name: '交房时间', value: formateDate(Info.receivedDate) || '待定', key: '' },
      { name: '楼盘地址', value: Info.address || '暂无', key: '' },
    ],
    [
      { name: '装修标准', value: Info.decoration || '暂无', key: '' },
      { name: '物业公司', value: Info.propertyDeveloper || '暂无', key: '' },
      { name: '物业费', value: Info.serviceFee || '暂无', key: '' },
    ],
    [
      { name: '容积率', value: Info.volumeRate || '暂无', key: '' },
      { name: '供水', value: Info.waterSupply || '暂无', key: '' },
      { name: '供电', value: Info.powerSupply || '暂无', key: '' },
      { name: '供暖方式', value: Info.heatingSupply || '暂无', key: '' },
      { name: '车位数量', value: Info.parkingRate || '待定', key: '' },
      { name: '规划户数', value: Info.familyNum || '待定', key: '' },
      { name: '楼栋总数', value: Info.buildingNum || '待定', key: '' },
      { name: '绿化率', value: Info.greeningRate || '待定', key: '' },
      // { name: '项目说明', value: Info.dynamic || '暂无', key: '' },
      { name: '销售许可', value: Info.preSalePermit || '待定', key: '' },
      { name: '备案名', value: Info.recordName || '暂无', key: '' },
    ]
  ]

  useEffect(() => {
    // 获取楼盘信息
    fetch({ url: `${API_ITEMS_DETAIL}/${id}`, spin: true }).then((res) => {
      setInfo(res || {})
    }).catch((err) => {
      console.error(err)
    })
  }, [id])

  return (
    <view className='Page buildingInfo'>
      <ScrollView scrollY>
        <view className='List'>
          {
            InfoList.map((item, index) => (
              <view key={`ListItem-${index}`}>
                {
                  item.map((subItem, subIndex) => (
                    <view className='flex-h' key={`SubListItem-${subIndex}`}>
                      <text>{subItem.name}</text>
                      <view className='flex-item'>
                        <text>{subItem.value}</text>
                      </view>
                    </view>
                  ))
                }
              </view>
            ))
          }
        </view>

        <Disclaimer />
      </ScrollView>
    </view>
  )
})
