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

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

  // const [ShowSorry, setShowSorry] = useState(false)

  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 > 0 && ShowResult &&
              <view className='Recommend'>
                <view className='Title'>
                  <view>
                    <text>匹配楼盘</text>
                  </view>
                </view>
                <view className={List.length === 1 ? 'ScrollViewX active' : 'ScrollViewX'}>
                  <ScrollView scrollX>
                    <view className='ListContainer'>
                      {
                        List.map((item, index) => (
                          <view className='RecommendBuildingItem' key={`item-${index}`} onClick={() => { Taro.navigateTo({ url: `/pages/index/buildingDetail/index?id=${item.buildingId}` }) }}>
                            <view>
                              <view className='Img'>
                                {
                                  (item.buildingListImg || []).length > 0 &&
                                  <Image mode='aspectFill' src={getImgURL(item.buildingListImg[0].url)} 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>
                        ))
                      }
                    </view>
                  </ScrollView>
                </view>
              </view>
            }

            {
              List.length === 0 &&
              <view className='Recommend Sorry'>
                <view className='Title'>
                  <view>
                    <text>温馨提示</text>
                  </view>
                </view>
                <view className='Tips'>
                  <text>非常抱歉！</text>
                  <text>根据您的需求，目前尚无可推荐的楼盘</text>
                  <text>您可以返回首页浏览更多内容！</text>
                </view>
              </view> 
            }

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