import React, { useEffect, useState } from "react";
import Layout from "~/components/layout";
import { Box } from "./styled";
import { Button } from "antd";
import { useRouter } from "next/router";
import { ParsedUrlQuery } from "querystring";

interface RouterDetail {
  videoUrl:string | '',
  curriculumName:string
}

export default function FlyingDetail() {
  
  const router = useRouter();
  const [detail,setDetail] =useState<ParsedUrlQuery | RouterDetail>()
  useEffect(()=>{
    setDetail(router.query)
  },[router])
  return (
    <Layout>
      <Box>
        <div className="box-top">
          <div className="left">{detail?.curriculumName}</div>
          <div className="right">
            {/* <Button
              type="primary"
              className="btn"
              onClick={() =>
                router.push(`/flyingHandService/examination/${router.query.id}`)
              }
            >
              去考试
            </Button> */}
          </div>
        </div>
        <div className="box-body">
          <video className="body-video" controls src={detail?.videoUrl as string} />
        </div>
      </Box>
    </Layout>
  );
}
