import { useState, useEffect, useRef } from "react";
import Taro, { useDidShow, useReady } from "@tarojs/taro";
import withLayout from "@/layout";
import { Image } from "@tarojs/components";
import { queryLiveDetail } from "@/services/item";
import useParams from "@/utils/hooks/useParams";
import useShare from "@/utils/hooks/useShare";
import { getImgURL } from "@/utils/image";
import { getLivingCode } from '@/services/activity'
import "@/assets/css/iconfont.css";
import "./index.scss";

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

  const [data, setData] = useState({})
  // 直播间信息
  const livingRef = useRef()

  // 本页面分享或者海报参数
  const paramsRef = useParams({
    id,
    buildingId: data?.buildingId,
    person,
    from: `${page.type}_share`,
  });
  const fullTrackData = { ...trackData, buildingId: data?.buildingId };

  useShare(
    {
      title: shareContent.shareContentTitle || data?.name,
      path: `${router.path}?${paramsRef.current}`,
      image: shareContent.shareContentImg || getImgURL(data?.vide_img),
    },
    fullTrackData
  );

  const getData = () => {
    queryLiveDetail(id).then(res => {
      setData(res||{})
      setNavigationBarTitle(res?.name)
      if (res?.liveRoomParam) {
        const { livingid } = JSON.parse(res.liveRoomParam)
        getLivingCode(livingid).then((liveInfo) => {
          livingRef.current = liveInfo
        })
      }
    })
  };

  const handleLive = () => {
    if (!livingRef.current) {
      Taro.showToast({
        title: '查询直播凭证失败, 请退出重试',
        icon: 'none',
      })
      return;
    }

    // https://work.weixin.qq.com/api/doc/90000/90135/93635
    const { livingCode, status } = livingRef.current

    //
    if (status >= 3) {
      Taro.showToast({
        title: `直播活动已${status === 3 ? '过期' : '取消'}`,
        icon: 'none',
      })
      return;
    }

    // 如果已经结束的则播放回放
    const replay = status === 2 ? '&replay=1' : ''

    // 跳转到直播
    Taro.navigateToMiniProgram({
      // 固定跳转到微信企业直播
      appId: 'wx7424030d69bde86e',
      path: `pages/watch/index?living_code=${encodeURIComponent(livingCode)}${replay}`,
    })
  }

  useEffect(() => {
    if (id) {
      getData(id);
    }
  }, [id]);
  //   
  return <view className="liveDetail">
    {data.liveActivityId && <><Image mode='aspectFill' src={getImgURL(data.detailTypeImg)} className='liveImg'></Image>
      <view className='liveDetail-menu flex-h'>
        <view className='flex-item'>
          <view onClick={() => { Taro.navigateTo({ url: `/pages/index/buildingDetail/index?id=${data.buildingId}` }) }}><text className="iconfont icon-fenxiang"></text><text>查看楼盘</text></view>
        </view>
        <view className='flex-item'>
          <view onClick={handleLive}><text className="iconfont icon-camera"></text><text>观看直播</text></view>
        </view>
        <view className='flex-item'>
          <button openType="share"><text className="iconfont icon-fenxiang"></text><text>分享好友</text></button>
        </view>
      </view></>}
  </view>;
});
