import { useState } from 'react'
import Taro from '@tarojs/taro'
import { Image, Block } from '@tarojs/components'
import { getImgURL } from '@/utils/image'
import '@/assets/css/iconfont.css'
import './index.scss'

export default function SubmitBuyHouseResult (props) {
  const { List = [], setting } = props

  const handlePhone = () => {
    if (!setting?.phone) {
      Taro.showToast({
        title: '暂不提供相关服务',
        icon: 'none',
      })
    }

    Taro.makePhoneCall({
      phoneNumber: setting.phone,
    })
  }

  return (
    <view className='components SubmitBuyHouseResult'>
      <view className='centerLabel'>
        <view>
          <view>

            <view className='Status'>
              <text className='iconfont icon-gou'></text>
              <text>提交成功</text>
            </view>

            <view className='Tips'>
              <text>已接收到您的需求我们预计将在48小时内联系您！</text>
              <text>客服工作时间为周一至周五9:00-17:00</text>
              <text>请保持电话畅通；谢谢！</text>
            </view>

            <view className='Btn flex-h'>
              <button className='flex-item' openType='contact'>一键咨询</button>
              <text className='flex-item active' onClick={handlePhone}>一键电话</text>
            </view>

            {/* 匹配楼盘 */}
            {
              !!List.length &&
              <view className='Recommend'>
                <view className='Title'>
                  <view>
                    <text>匹配楼盘</text>
                  </view>
                </view>
                {
                  List.slice(0, 1).map((item, index) => (
                    <Block key={`ListItem-${index}`}>
                      {/* <view className='PlanTitle'>“方案一”</view> */}
                      <view className='RecommendBuildingItem' onClick={() => {Taro.navigateTo({ url: `/pages/index/buildingDetail/index?id=${item.buildingId}` })}}>
                        <view>
                          <view className='Img'>
                            <Image mode='aspectFill' src={getImgURL(item.poster || item.preSalePermit)} className='centerLabel'></Image>
                          </view>
                          <view className='Title flex-h'>
                            <view className='flex-item'>
                              <text>{item.name}</text>
                            </view>
                            <view className='Price'><text>{item.price}</text></view>
                          </view>
                          <text className='Address'>{item.address}</text>
                        </view>
                      </view>
                    </Block>
                  ))
                }
              </view>
            }

          </view>
        </view>
      </view>
    </view>
  )
}