import { useEffect, useState } from 'react'
import withLayout from '@/layout'
import { ScrollView, Image, Swiper, SwiperItem } from '@tarojs/components'
// import Taro from '@tarojs/taro'
import { getImgURL } from '@/utils/image'
import { API_COURSE_DETAIL } from '@/constants/api'
import { fetch } from '@/utils/request'
import useFavor from "@/utils/hooks/useFavor";
import useParams from "@/utils/hooks/useParams";
import useShare from "@/utils/hooks/useShare";
import '@/assets/css/iconfont.css'
import './index.scss'

const TYPE_RICH = 0
const TYPE_VIDEO = 1

export default withLayout((props) => {
  const { router, shareContent, trackData, person, page } = props
  const { id } = router.params

  const [detail, setDetail] = useState({})
  // 本页面分享或者海报参数
  const paramsRef = useParams({
    id,
    person,
    from: `${page.type}_share`,
  });
  useShare(
    {
      title: shareContent.shareContentTitle || detail?.title,
      path: `${router.path}?${paramsRef.current}`,
      image: shareContent.shareContentImg || getImgURL(detail?.curriculumImg),
    },
    trackData
  );
  const [isSaved, handleFavor] = useFavor(detail?.isSaved, { id, ...trackData });

  useEffect(() => {
    if (id) {
      fetch({ url: `${API_COURSE_DETAIL}/${id}`, spin: true }).then((res) => {
        setDetail(res || {})
      })
    }
  }, [id])

  return (
    <view className='Page courseDetail'>
      <ScrollView scroll-y>
        <view className='Content'>

          {/* 轮播图 or 主图 */}
          <view className='Banner'>
            <view>
              {/* <Swiper autoplay interval={2000} indicator-dots>
                {
                  List.map((item, index) => (
                    <SwiperItem key={`Banner-${index}`}>
                      <view className='swiper-item'>
                        <Image mode='aspectFill' className='centerLabel' src={getImgURL(item.image)} />
                      </view>
                    </SwiperItem>
                  ))
                }
              </Swiper> */}
              <Image mode='aspectFill' className='centerLabel' src={getImgURL(detail.curriculumImg)} />
            </view>
          </view>

          {/* 楼盘信息 */}
          <view className='BuildingInfo'>

            <view className='flex-h Title'>
              <view className='flex-item'>
                <text className='Name'>{detail.name}</text>
                <view className='Address flex-h'>
                  <view className='flex-item'>
                    <text>{detail.remark}</text>
                  </view>
                </view>
                <text className='Time'>{`${detail.lookNum||0}人阅读`}</text>
              </view>
              <view className='Option'>
                <button openType='share'>
                  <text className='iconfont icon-fenxiang1'></text>
                  <text>分享</text>
                </button>
                <view onClick={handleFavor}>
                  <text className='iconfont icon-shoucang' style={isSaved ? { color: 'red' } : undefined}></text>
                  <text>{isSaved ? '已收藏' : '收藏'}</text>
                </view>
              </view>
            </view>

          </view>

          {/* 详情介绍 */}
          <view className='Desc'>
            <view className='Title'>
              <text>课程详情</text>
            </view>
            <view className='DescContent'>
              {
                detail.type === TYPE_VIDEO ?
                <video src={detail.curriculumUrl} style={{width: '100%'}} /> :
                <rich-text nodes={detail.content} />
              }
            </view>
          </view>
        </view>
      </ScrollView>
    </view>
  )
})
