import Taro from '@tarojs/taro'
import { ScrollView, Image } from '@tarojs/components'
import AuthRole from '@/components/Auth/AuthRole'
import { ROLE_CODE } from '@/constants/user'
import classNames from 'classnames'
import useFavor from '@/utils/hooks/useFavor'
import { formatDate } from '@/utils/chatDate'
import '@/assets/css/iconfont.css'
import './index.scss'


export default function BasicInfo (props) {
  const { Info = {}, trackData } = props
  const { buildingId, isSave } = Info

  const [isSaved, handleFavor] = useFavor(isSave, { id: buildingId, buildingId, ...trackData })

  const goto = (url) => Taro.navigateTo({ url })

  const handleSubscribeMessage = () => {
    Taro.showToast({
      title: '该功能即将上线！',
      icon: 'none',
    })
  }

  return (
    <view className='components BasicInfo'>

      {/* 标题名称 */}
      <view className='Title flex-h'>
        <view className='flex-item'>
          <text>{Info.buildingName}</text>
        </view>
        <view className='Collect' onClick={handleFavor}>
          <text className={classNames(['iconfont icon-shoucang'], { active: isSaved })}></text>
          <text>{isSaved ? '取消收藏' : '收藏'}</text>
        </view>
      </view>

      {/* 标签 */}
      <view className='Tags'>
        {
          (Info.buildingTag || []).map((item, index) => (
            <text key={`TagItem-${index}`}>{item.tagName}</text>
          ))
        }
      </view>

      {/* 项目列表 */}
      {
        (Info.buildingProjectType || []).length > 0 &&
        <view className='ProjectList'>
          <ScrollView scroll-x show-scrollbar={false}>
            {
              (Info.buildingProjectType || []).map((item, index) => {
                const priceUnit = item.priceType === 'average' ? '元/㎡' : '万元/套'
                let price = item.startPrice === item.endPrice ? item.startPrice : `${item.startPrice}-${item.endPrice}`
                if (!item.startPrice && !item.endPrice) {
                  price = '暂无'
                } else {
                  price = `约${price}${priceUnit}`
                }
                
                return (
                  <view className='ListItem' key={`List-${index}`}>
                    <Image mode='heightFix' src={require('@/assets/buildingDetail-icon4.jpg')} />
                    <view>
                      <view>
                        <text>项目类型：</text>
                        <text className='active black'>{item.buildingTypeName}</text>
                      </view>
                      <view>
                        <text>房屋产权：</text>
                        <text className='active'>{item.rightsYear}年</text>
                        <text>装修标准：</text>
                        <text className='active'>{item.decoration || '暂无'}</text>
                      </view>
                      <view>
                        <text>项目参考价格：</text>
                        <text className='active'>{price}</text>
                      </view>
                      <text className='SaleStatus active'>{item.marketStatus}</text>
                    </view>
                  </view>
                )
              })
            }
          </ScrollView>
        </view>
      }

      {/* 隔断 */}
      <view className='CutLine'></view>

      {/* 更多信息 */}
      <view className='MoreInfo'>
        <view className='flex-h'>
          <view style='width: 60px;'>
            <text>楼盘地址</text>
          </view>
          <text>：</text>
          <view className='flex-item3'>
            <text className='active'>{Info.address}</text>
          </view>
        </view>
        <view className='flex-h'>
          <view style='width: 60px;'>
            <text>开盘时间</text>
          </view>
          <text>：</text>
          <view className='flex-item3'>
            <text className='active'>{formatDate(Info.openingDate, 'yyyy-MM-dd' ) || '待定'}</text>
          </view>
        </view>
        <view className='flex-h'>
          <view style='width: 60px;'>
            <text>容积率</text>
          </view>
          <text>：</text>
          <view className='flex-item'>
            <text className='active'>{Info.volumeRate || '暂无'}</text>
          </view>
          <view style='width: 60px;'>
            <text>车位数量</text>
          </view>
          <text>：</text>
          <view className='flex-item'>
            <text className='active'>{Info.parkingRate || '暂无'}</text>
          </view>
        </view>
        <view className='flex-h'>
          <view style='width: 60px;'>
            <text>绿化率</text>
          </view>
          <text>：</text>
          <view className='flex-item'>
            <text className='active'>{Info.greeningRate || '暂无'}</text>
          </view>
          <view style='width: 60px;'>
            <text>物业费</text>
          </view>
          <text>：</text>
          <view className='flex-item'>
            <text className='active'>{Info.serviceFee || '暂无'}</text>
          </view>
        </view>
        <view className='flex-h'>
          <view style='width: 60px;'>
            <text>规划户数</text>
          </view>
          <text>：</text>
          <view className='flex-item'>
            <text className='active'>{Info.familyNum || '暂无'}</text>
          </view>
          <view style='width: 60px;'>
            <text>物业</text>
          </view>
          <text>：</text>
          <view className='flex-item'>
            <text className='active'>{Info.serviceCompany || '暂无'}</text>
          </view>
        </view>
      </view>

      {/* 围观 */}
      <view className='Views flex-h'>
        <text>{Info.pvNum || 0}人围观</text>
        <view className='flex-item'>
          {
            (Info?.uvList?.records || []).slice(0, 8).map((item, index) => (
              <view key={`ViewsItem-${index}`}>
                <Image mode='aspectFill' className='centerLabel' src={item.photoOravatar} />
              </view>
            ))
          }
          {
            (Info?.uvList?.records || []).length > 8 &&
            <text>...</text>
          }
        </view>
      </view>

      {/* 互动 */}
      <view className='Interact flex-h'>
        <text className='flex-item' onClick={() => goto(`/pages/index/buildingInfo/index?id=${buildingId}`)}>更多楼盘信息</text>
        <text className='flex-item active' onClick={handleSubscribeMessage}>订阅活动通知</text>
      </view>

      {/* 提示 */}
      <AuthRole role={ROLE_CODE.CHANNEL_AGENT}>
        <view className='Tips'>
          <text className='iconfont icon-bangzhu'></text>
          <text onClick={() => goto(`/pages/index/buildingRules/index?buildingId=${buildingId}`)}>查看报备规则？</text>
        </view>
      </AuthRole>
    </view>
  )
}