content: import React from 'react'
  import {observer} from 'mobx-react'
  import {Route, Link, NavLink} from 'react-router-dom'
  import {IMAGE_DIR, TEST_IMAGE, GET_HOTEL_INFO, RESPONSE_CODE_SUCCESS} from 'macros'
  import {dateToZh} from 'utils'
  import './booking.less'
  
  export default observer(
    (props) => {
      let persons = []
      for (let i = 0; i < props.store.payNum; i++) {//props.store.checkIns
        let checkIn = i < props.store.checkIns.length? props.store.checkIns[i] : {}
        persons.push(
          <Link to={`${props.match.url}/person/${i}`} key={i}>
            <span className="label">{`入住人(房间${i + 1})`}</span>
            <span className="input certificate">
              <span  placeholder="请选择入住人">{checkIn.name || '请选择入住人'}</span>
              <i>{checkIn.paperworkNum}</i>
            </span>
  
            <i className="iconfont icon-indent_icon_show1" />
          </Link>
        )
      }
      return (
        <div className="layout-up-down">
          <div className="booking-container">
            <ul className="hotle-info">
              <li className="hotle-name">{props.store.hotelName}</li>
              <li className="hotle-type"><span>{props.store.roomType.roomType}</span><span>{props.store.roomType.price}元/晚</span></li>
            </ul>
  
            <div className="check-in-time">
              <Link className="check-in" to={`${props.match.url}/select-date`}>
                <span>入住</span>
                <p>{dateToZh(props.store.checkInDate)}</p>
              </Link>
              <Link className="check-out" to={`${props.match.url}/select-date`}>
                <span>退房</span>
                <p>{dateToZh(props.store.checkOutDate)}</p>
              </Link>
            </div>
  
            <div className="user-container">
              <Link to={`${props.match.url}/select-room-num`} className="item-info"><span className="label">房间数量</span><span className="input">{`${props.store.payNum}间`}</span><i className="iconfont icon-indent_icon_show1" /></Link>
              <div className="user-wraper">
                <div className="user-info">
                  {persons}
                </div>
                <Link to={`${props.match.url}/persons`} className="btn-add-person-input"><i className="iconfont icon-indent_icon_add_people1" /></Link>
              </div>
              <div className="item-info">
                <span className="label">联系人电话</span>
                <input className="input" placeholder="请输入联系人电话号码" value={props.store.phone} onChange={(e) => {
                    return props.store.phone = e.target.value.replace('[^\d]', '').substring(0, 11);
                }} />
                <i />
              </div>
            </div>
  
            <div className="friends">&nbsp;</div>
  
            <div className="bill">
              <div className="need-bill">
                <span className="label">发票</span>
                <div className="radio-group btn-need-invoice" data-type={0}><i className={props.store.invoiceType == 0? "iconfont icon-indent_icon_choose" : "iconfont icon-xuanze1"}/><span>不需要</span></div>
                <Link to={`${props.match.url}/type-in-invoice`} className="radio-group btn-need-invoice" data-type={1}><i className={props.store.invoiceType != 0? "iconfont icon-indent_icon_choose" : "iconfont icon-xuanze1"}/><span>需要</span></Link>
                {
                  // <div className="radio-group btn-need-invoice" data-type={1}><i className={props.store.invoiceType != 0? "iconfont icon-indent_icon_choose" : "iconfont icon-xuanze1"}/><span>需要</span></div>
                }
              </div>
              {
                props.store.invoiceType == 0? '' :
                  <div className="bill-info">
                    <span className="label">发票详情</span>
                    <p className="bill-content">{
                        props.store.invoiceInfo.address? props.store.invoiceType == 1? `电子发表：发送到${props.store.invoiceInfo.address}` : `深圳市乐易住科技有限公司纸质发票预计10个工作日送达${props.store.invoiceInfo.address}` : '请填写发票信息'}</p>
                    <Link to={`${props.match.url}/type-in-invoice`} ><i className="iconfont icon-indent_icon_show1" /></Link>
                  </div>
              }
            </div>
          </div>
          <div className="book-foot-stack">
            <div className="amount">
              <p className="actual-payment"><span>总额</span><span>{props.store.priceInfo.actualPayment || 0}</span><span>元</span></p>
              <p className="deposit-sum"><span>含押金</span><span>{props.store.priceInfo.depositSum || 0}</span><span>元</span></p>
            </div>
            <div className="price-detial">
              <NavLink to={`${props.match.url}/price-detial`}>
                <div className="describe">
                  <i className="iconfont icon-indent_icon_down1" />
                  <span>明细</span>
                </div>
              </NavLink>
              <div className="btn-close-price-panel" />
            </div>
            <div className="btn-paying"><span>立即支付</span></div>
          </div>
        </div>
      )
    }
  )
  