import React, { useState } from 'react'
import Taro, { Current } from '@tarojs/taro'
import SlidePopup from '@/components/SlidePopup/index'
import '@/assets/css/reset.less'
import '@/assets/css/iconfont.less'
import './index.less'

export default function JiaoFeiDetail () {

  const [ShowPopup, setShowPopup] = useState(false)

  const [PopupType, setPopupType] = useState(0)

  const CurrnetJiaoFeiId = Current.router.params.id

  return (
    <view className='JiaoFeiDetail'>
      <view className='DetailContainer'>
        <view className='Info'>
          <view className='flex-h'>
            <text className='flex-item'>物业费</text>
            <text>2020/06/08  0:00截止</text>
          </view>
          <view className='Detail'>
            <view className='Title flex-h'>
              <text className='flex-item'>缴费金额</text>
              <text className='Num'>300</text>
              <text>元</text>
            </view>
            <text>2020年5月物业管理费</text>
            <view className='Line flex-h'>
              <text>垃圾费：</text>
              <text className='flex-item'>100元</text>
            </view>
            <view className='Line flex-h'>
              <text>绿地维护费：</text>
              <text className='flex-item'>100元</text>
            </view>
            <view className='Line flex-h'>
              <text>公摊电费：</text>
              <text className='flex-item'>100元</text>
            </view>
          </view>
        </view>
        <view className='InfoBottom'></view>
      </view>
      <view className='BottomContainer'>
        <text onClick={() => { setPopupType(2); setShowPopup(true) }}>对费用有疑问？</text>
        <text onClick={() => { setPopupType(1); setShowPopup(true) }}>立即缴费</text>
      </view>

      {/* 弹窗 */}
      <SlidePopup Close={() => { setShowPopup(false); setPopupType(0) }} Show={ShowPopup}>
        {
          PopupType - 0 === 1 &&
          <view className='JiaoFeiPopup'>
            <view className='Price'>立即支付<text>150</text>元</view>
            <view className='flex-h'>
              <text className='iconfont iconweixinzhifu'></text>
              <text className='flex-item'>微信支付</text>
              <text className='iconfont icongou'></text>
            </view>
            <view className='Btn'>
              <text>去付款</text>
            </view>
          </view>
        }
        {
          PopupType - 0 === 2 &&
          <view className='LianXiPopup'>
            <text>联系物业</text>
            <text>对此费用有疑问</text>
            <view className='flex-h'>
              <text className='flex-item'>物业电话</text>
              <text>17826982167</text>
              <text className='iconfont icondianhua'></text>
            </view>
            <view className='flex-h'>
              <text className='flex-item'>门卫电话</text>
              <text>17826982167</text>
              <text className='iconfont icondianhua'></text>
            </view>
            <view className='flex-h'>
              <text className='flex-item'>物业领导</text>
              <text>17826982167</text>
              <text className='iconfont icondianhua'></text>
            </view>
          </view>
        }
      </SlidePopup>
    </view>
  )
}
