import { useState, useEffect } from "react";
import withLayout from "@/layout";
import { ScrollView } from "@tarojs/components";
import { fetch } from "@/utils/request";
import { API_VIDEO_DETAIL } from "@/constants/api";
import { formatDate } from "@/utils/chatDate";
import { getImgURL } from '@/utils/image'
import useParams from "@/utils/hooks/useParams";
import useShare from "@/utils/hooks/useShare";
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 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 = () => {
    fetch({ url: `${API_VIDEO_DETAIL}/${id}` }).then(res=>{
      setData(res||{})
      setNavigationBarTitle(res?.name)
    });
  };

  useEffect(() => {
    if (id) {
      getData();
    }
  }, [id]);

  return (
    <view className="Page videoDetail">
      <ScrollView scroll-y>
        <view className="Content">
          {/* 视频 */}
          <view className="VideoContainer">
            <video
              id="myVideo"
              src={data.videoUrl}
              // binderror="videoErrorCallback"
              // danmu-list="{{danmuList}}"
              // enable-danmu
              // danmu-btn
              // show-center-play-btn='{{false}}'
              // show-play-btn="{{true}}"
              // controls
              // picture-in-picture-mode="{{['push', 'pop']}}"
              // bindenterpictureinpicture='bindVideoEnterPictureInPicture'
              // bindleavepictureinpicture='bindVideoLeavePictureInPicture'
            ></video>
          </view>

          {/* 视频信息 */}
          <view className="Info">
            <text className="Name">{data.name}</text>
            <text className="Time">
              {`时间：${formatDate(data.createdTime, 'yyyy年M月d日')}`}
            </text>
          </view>

          {/* 详情 */}
          <view className="Detail">
            <view className="Title">
              <text>视频详情</text>
            </view>
            <view className="Node"></view>
            {data.remark}
            <button className="Share" openType="share">
              <text>分享好友</text>
            </button>
          </view>
        </view>
      </ScrollView>
    </view>
  );
});
