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

export default function HuoDongDetail () {

  const { user } = useModel('user')
  const [DataLock, setDataLock] = useState(false)
  const [HasJoin, setHasJoin] = useState(null)
  const [CurrnetHuoDongId] = useState(Current.router.params.id) // 当前活动id
  const [ActivityDetail, setActivityDetail] = useState(null) // 活动详情

  useEffect(() => {
    GetActivityDetail()
  }, [CurrnetHuoDongId])

  const GetActivityDetail = () => { // 获取活动详情
    request({ ...apis.getActivityDetail, args: { id: CurrnetHuoDongId } }).then((res) => {
      setActivityDetail(res)
      CheckActivityJoin()
    })
  }

  const CheckActivityJoin = () => { // 查询活动参加详情
    request({ ...apis.checkActivityJoin, args: { id: CurrnetHuoDongId } }).then((res) => {
      setHasJoin(!!res.dynamic.isSign)
    })
  }

  const ToJoin = () => { // 去报名
    if (DataLock || ActivityDetail === null || HasJoin) return
    setDataLock(true)
    const { personId, phone, nickname, orgId } = user
    const { dynamicId } = ActivityDetail
    if (!phone) { // 未授权手机号，唤起授权手机号弹窗
      setShowGetUserPhoneLayer(true)
      setDataLock(false)
      return false
    }
    let Data = {
      phone,
      personId,
      dynamicId,
      name: nickname,
      orgId,
      attendNum: 1,
      sharePerson: null,
      sharePersonName: null,
      sharePersonType: null
    }
    request({ ...apis.JoinActivity, data: { ...Data } }).then(() => {
      setHasJoin(true)
      setDataLock(false)
    }).catch((res) => {
      Taro.showToast({ title: res, icon: 'none' })
      setDataLock(false)
    })
  }

  return (
    <view className='HuoDongDetail'>

      <view className='BannerLayer'></view>
      {
        ActivityDetail !== null &&
        <view className='Banner'>
          <image mode='aspectFill' src={ActivityDetail.bannerListImg} className='centerLabel'></image>
        </view>
      }
      {
        ActivityDetail !== null &&
        <view className='Info'>
          <view className='MainInfo'>
            <text className='Name'>{ActivityDetail.title}</text>
            <text className='Tips'>{ActivityDetail.enlisted}人已报名</text>
            <view className='flex-h'>
              <text>活动时间：</text>
              <view className='flex-item'>{toolclass.FormatDate(ActivityDetail.startDate)}<text>限{ActivityDetail.enlistNum}人</text></view>
            </view>
            <view className='flex-h'>
              <text>活动地址：</text>
              <view className='flex-item'>{ActivityDetail.address}</view>
            </view>
            <view className='flex-h'>
              <text>报名截止：</text>
              <view className='flex-item'>{toolclass.FormatDate(ActivityDetail.enlistEnd)}</view>
            </view>
          </view>

          <view className='Desc'>
            <text>活动介绍</text>
            <RichText nodes={ActivityDetail.desc}></RichText>
          </view>

          {
            HasJoin !== null &&
            <text className={HasJoin ? 'BottomBtn' : 'active BottomBtn'} onClick={ToJoin}>{HasJoin ? '已报名' : '立即参加'}</text>
          }

        </view>
      }
    </view>
  )
}
