import withLayout from '@/layouts'
import React, { useState, useEffect, useRef } from 'react'
import CustomNav from '@/components/CustomNav'
import Taro from '@tarojs/taro'
import copy from '@/assets/icons/landlord/复制.png'
import { Input, Button, View, Picker, Label, Image } from '@tarojs/components'
import { getRoomOrderList } from '@/services/landlord'
import './roomOrder.less'




export default withLayout((props) => {
  const { roomId, roomName } = props.router.params
  const [detail, setDetail] = useState([])
  useEffect(() => {
    getRoomOrderList({ roomId: roomId }).then((res) => {
      setDetail(res.records || [])
    })
  }, [])
  const CopyName = (val) => {
    Taro.setClipboardData({
      data: val,
      success: e => {
        Taro.showToast({
          title: '入住人姓名已复制',
          icon: 'success',
          duration: 2000,
        })
      }
    })
  }
  const CopyPhone = (val) => {
    Taro.setClipboardData({
      data: val,
      success: e => {
        Taro.showToast({
          title: '入住人电话已复制',
          icon: 'success',
          duration: 2000,
        })
      }
    })
  }
  return (
    <View style={{ padding: '0 30px' }}>
      <CustomNav title={roomName ? roomName : '房间名'} />
      <scroll-view scroll-y="true" scroll-view='true' bindscrolltoupper="upper" bindscrolltolower="lower" bindscroll="scroll" style={{ height: 'calc(100vh - 65px)' }}>

        {
          detail.length==0?<View className='houseCard'>暂无入住人数据</View>
           :detail?.map((item) =>
            <View className='houseCard'>
              {
                item.personList?.map((item2) =>
                  <View className='operation'>
                    <View style={{display:'inline-block'}} onClick={()=>CopyName(item2.customerName)}>
                      <Label>{item2.customerName}</Label>
                      <Image src={copy} />
                    </View>
                    <View style={{display:'inline-block',marginLeft:'40rpx'}} onClick={()=>CopyPhone(item2.customerPhone)}>
                      <Label>{item2.customerPhone}</Label>
                      <Image src={copy} />
                    </View>
                  </View>

                )
              }              
              <View className='operation'>入住时间：{item.startDate}  -  {item.endDate}</View>

            </View>
          )
        }
        
      </scroll-view>
    </View>
  )
})