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

export default function JiFenMingXi (props) {

  const [PageList, setPageList] = useState(['', '', '', '', '', '', ''])
  const [IsPull, setIsPull] = useState(false)
  const [CurrentNavId, setCurrentNavId] = useState(1)
  const [NavList] = useState([{ name: '全部', id: 1 }, { name: '积分收入', id: 2 }, { name: '积分支出', id: 3 }])

  const CutNav = (target) => {
    return () => {
      setCurrentNavId(target.id)
    }
  }

  const OnRefresh = () => {
    setIsPull(true)
    window.setTimeout(() => {
      setIsPull(false)
    }, 1000)
  }

  return (
    <view className='JiFenMingXi flex-v'>
      <CustomHeader IsFixed={true} BgColor='none' Title='积分明细'></CustomHeader>
      <view className='TopContainer'>
        <view className='centerLabel'>
          <view className='flex-h'>
            <view className='flex-item'>
              <text>当前积分</text>
              <text>300</text>
            </view>
            <text onClick={() => { Taro.navigateTo({ url: `/pages/FuLi/JiFenGuiZe/index` }) }}>积分规则</text>
            <text className='iconfont iconjiantouright'></text>
          </view>
        </view>
      </view>
      <view className='NavList flex-h'>
        {
          NavList.map((item, index) => (
            <view key={`Nav-${index}`} className='flex-item' onClick={CutNav(item)}>
              <text className={CurrentNavId - 0 === item.id - 0 ? 'active' : ''}>{item.name}</text>
            </view>
          ))
        }
      </view>
      <view className='flex-item'>
        <view>
          <scroll-view scroll-y='true' style='height: 100%;' refresher-enabled={true} onrefresherrefresh={OnRefresh} refresher-triggered={IsPull} refresher-background='none'>
            <view className='List'>

              {/* 全部 */}
              {
                CurrentNavId - 0 === 1 &&
                PageList.map((item, index) => (
                  <view className='flex-h' key={`List-${index}`}>
                    <view className='flex-item'>
                      <text>每日签到</text>
                      <text>2018-01-01  18:00</text>
                    </view>
                    <text>+10</text>
                  </view>
                ))
              }

              {/* 积分收入 */}
              {
                CurrentNavId - 0 === 2 &&
                PageList.map((item, index) => (
                  <view className='flex-h' key={`List-${index}`}>
                    <view className='flex-item'>
                      <text>每日签到</text>
                      <text>2018-01-01  18:00</text>
                    </view>
                    <text>+10</text>
                  </view>
                ))
              }

              {/* 积分支出 */}
              {
                CurrentNavId - 0 === 3 &&
                PageList.map((item, index) => (
                  <view className='flex-h' key={`List-${index}`}>
                    <view className='flex-item'>
                      <text>每日签到</text>
                      <text>2018-01-01  18:00</text>
                    </view>
                    <text className='active'>-10</text>
                  </view>
                ))
              }

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