import React, { useState, useEffect } from 'react'
import NavHeader from '@/components/NavHeader/index'
import Taro from '@tarojs/taro'
import request, { apis } from '@/utils/request'
import { store, useModel } from '@/store'
import '@/assets/css/reset.less'
import '@/assets/css/iconfont.less'
import './index.less'

export default function WoDe (props) {

  const { setUser } = store.getModel('user').getState()
  const { user } = useModel('user')
  const [IsPull, setIsPull] = useState(false)
  const [UserTab] = useState([
    { icon: 'iconrenzheng1', name: '业主认证', id: 1, router: '/pages/WoDe/YeZhuRenZheng/index' },
    { icon: 'iconjifenguize', name: '积分明细', id: 2, router: null },
    { icon: 'iconjiaofei', name: '物业缴费', id: 3, router: null },
    { icon: 'iconfuwu1', name: '物业服务', id: 4, router: null }
  ])
  const [MoreUserTab] = useState([
    { icon: 'iconerweima', name: '推荐二维码', id: 5, router: '/pages/WoDe/TuiJianErWeiMa/index' },
    { icon: 'iconfenxiang', name: '推荐分享', id: 6, router: '/pages/WoDe/TuiJianFenXiang/index' },
    { icon: 'iconhuodong', name: '参与活动', id: 7, router: '/pages/WoDe/WoDeHuoDong/index' }
  ])
  const [DataLock, setDataLock] = useState(false)

  useEffect(() => {
    if (user !== null) {
      request({ ...apis.getOwnerVerifyList }).then(() => {
      }).catch((res) => {
        Taro.showToast({ title: res, icon: 'none' })
      })
    }
  }, [])

  const ToSign = () => { // 签到
    if (DataLock) return
    setDataLock(true)
    request({ ...apis.userSign }).then(() => {
      Taro.showToast({ title: '签到成功', icon: 'none' })
      setUser({ ...user, isSignup: 1 })
      setDataLock(false)
    }).catch((res) => {
      Taro.showToast({ title: res, icon: 'none' })
      setDataLock(false)
    })
  }

  const OnRefresh = () => { // 页面下拉刷新
    setIsPull(true)

    const t = setTimeout(() => {
      setIsPull(false)
      clearTimeout(t)
    }, 1000)
  }

  return (
    <view className='WoDe'>
      <NavHeader BgColor='none' Title='我的' IsFixed={true}></NavHeader>
      <scroll-view scroll-y='true' style='height: 100%;' refresher-enabled={true} onrefresherrefresh={OnRefresh} refresher-triggered={IsPull} refresher-background='#F35844'>
        <view className='WoDeContent'>

          {/* 顶部背景图 */}
          <view className='TopBg'>
            <view className='ColorBg'></view>
            <view className='UserInfo flex-h'>
              <view className='Icon' onClick={() => { Taro.navigateTo({ url: '/pages/WoDe/GeRenXinXi/index' }) }}>
                <image mode='aspectFill' src={null} class='centerLabel'></image>
              </view>
              <view className='flex-item' onClick={() => { Taro.navigateTo({ url: '/pages/WoDe/GeRenXinXi/index' }) }}>
                <text>{user.nickname || '暂未授权用户信息'}</text>
                <text>{user.phone || '暂未授权手机号'}</text>
              </view>
              <text onClick={ToSign}>{user.isSignup ? '已签到' : '签到'}</text>
            </view>
          </view>

          {/* 用户选项 */}
          <view className='UserTab'>
            {
              UserTab.map((item, index) => (
                <view key={`UserTab-${index}`} className='flex-h' onClick={() => { Taro.navigateTo({ url: item.router }) }}>
                  <text className={`iconfont ${item.icon}`}></text>
                  <view className='flex-h flex-item'>
                    <text className='flex-item'>{item.name}</text>
                    <text className='iconfont iconjiantouright'></text>
                  </view>
                </view>
              ))
            }
            <view className='Line'></view>
            {
              MoreUserTab.map((item, index) => (
                <view key={`UserTab-${index}`} className='flex-h' onClick={() => { Taro.navigateTo({ url: item.router }) }}>
                  <text className={`iconfont ${item.icon}`}></text>
                  <view className='flex-h flex-item'>
                    <text className='flex-item'>{item.name}</text>
                    <text className='iconfont iconjiantouright'></text>
                  </view>
                </view>
              ))
            }
          </view>

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