import {useEffect, useState} from 'react'
import {Image, Tag} from '@nutui/nutui-react-taro'
import {useRouter} from '@tarojs/taro'
import {Divider} from '@nutui/nutui-react-taro'
import dayjs from 'dayjs'
import {CmsArticle} from "@/api/cms/cmsArticle/model"
import {Eye, Clock, PickedUp, Purse, Coupon} from '@nutui/icons-react-taro'
import AddCartBar from "@/components/AddCartBar";
// 显示html富文本
import {View, RichText} from '@tarojs/components'
import './detail.scss'
import Line from "@/components/Gap";
import {wxParse} from "@/utils/common";
import {getCmsArticle} from "@/api/cms/cmsArticle";

function Detail() {
  const {params} = useRouter();
  // 文章详情
  const [item, setItem] = useState<CmsArticle>()
  // 浏览量
  const [views, setViews] = useState<number>()
  // 报名人数
  const [bmUsers, setBmUsers] = useState<number>()

  const reload = () => {
    getCmsArticle(Number(params.id)).then(data => {
      if(data){
        data.content = wxParse(data.content)
        setItem(data)
        setViews(data.actualViews)
        setBmUsers(data.bmUsers)
      }
    })
  }

  useEffect(() => {
    reload();
  }, []);

  return (
    <div className={'bg-white'}>
      <Image src={item?.image} height={375} className={'bg-gray-50'}/>
      <div className={'p-3 font-bold text-lg'}>{item?.title}</div>
      <div className={'flex justify-between px-3'}>
        <Tag type={'success'}>{item?.categoryName}</Tag>
        <div className={'flex items-center gap-2 text-sm text-gray-400'}><Eye size={14}/>{views}</div>
      </div>
      {
        item?.model == 'pay' ? '' :
          <div className={'pt-2'}>
            {
              !item?.endTime ? '' :
                <div className={'flex px-3 py-1 items-center gap-2'}>
                  <Clock size={14}/>
                  <div
                    className={'text-sm font-bold'}>{dayjs(item?.startTime).format('YYYY-MM-DD')} 至 {dayjs(item?.endTime).format('YYYY-MM-DD')}</div>
                </div>
            }
            {
              !item?.price ? '' :
                <>
                  <div className={'flex px-3 py-1 items-center gap-2'}>
                    <Purse size={14}/>
                    <div
                      className={'text-sm font-bold'}>{item?.price == 0 ? '线下收费' : '￥' + item?.price}
                    </div>
                  </div>
                  <Divider/>
                </>
            }
            <div className={'flex px-3 items-center gap-2'}>
              <PickedUp size={14}/>
              <div
                className={'text-sm font-bold'}>已报名 {bmUsers} 人 / 仅限校友报名
              </div>
            </div>
          </div>
      }

      <Divider/>
      <div className={'flex px-3 items-center gap-2'}>
        <Coupon size={14}/>
        <div
          className={'text-sm font-bold bg-white'}>活动详情
        </div>
      </div>
      <View className={'content text-gray-700 text-sm'}>
        <RichText nodes={item?.content}/>
      </View>
      <Line height={44}/>
      <AddCartBar />
    </div>
  )
}

export default Detail
