import React, { useState,useEffect } from 'react';
import { Button } from 'antd';
import RangePickerFilter from '../../../components/RangePicker';
import ContentBox from '../../../themeComponents/ContentBox';
import InfoBox from '../../../themeComponents/ContentBox/InfoBox';
import Player from '../../../businessComponents/Player';
import DownloadModal from '../../../businessComponents/DownloadModal';
//import VList from '../../../components/VList';
import SelectUser from '../../../businessComponents/SelectUser';
import './index.less';
export default function DrawerTheme({getHeaderRightExtContent}) {
  const [visible, setVisible] = useState(false);
  const modelInfo = {
    uuid: '0d754d1e-f4a2-4b30-85ff-038bf2c0129b',
    dataArray: {
      downloadContent: [
        { label: '下载类型', value: '录像' },
        { label: '设备名称', value: '武汉测试全目标0824' },
        { label: '开始时间', value: '2020.10.20 17:41:44' },
        { label: '结束时间', value: '2020.10.20 18:41:44' },
      ],
      fileData: {
        id: '72057600753383122',
        deviceName: '武汉测试全目标0824',
        cid: '753383122',
        startTime: 1603186904,
        endTime: 1603190504,
        isLiving: false,
        historyList: [
          {
            beginTime: '1603186904',
            endTime: '1603188704',
            url: 'http://192.168.100.93:5460/records/m3u8_info2/1603186904_1603188704.m3u8?access_token=753383122_3356491776_1634721725_98b96a6b3bf4a158cf80c00390039785&head=1',
          },
          {
            beginTime: '1603188704',
            endTime: '1603190491',
            url: 'http://192.168.100.93:5460/records/m3u8_info2/1603188704_1603190491.m3u8?access_token=753383122_3356491776_1634721725_98b96a6b3bf4a158cf80c00390039785',
          },
        ],
      },
    },
    isApply: true,
    title: '下载申请',
  };
  const data = {
    id: '72057600753383104',
    cid: '753383104',
    isLive: true,
    file: 'http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4',
    title: '武汉测试全目标摄像机0921',
    type: '100602',
  };
  const treeData = [
    { name: '测试组织', areaName: '测试场所', id: '1', children: [{ name: '测试组织', areaName: '测试场所', id: '1-2' }] },
    { name: '测试组织', areaName: '测试场所', id: '2' },
  ];
  useEffect(()=>{
    const div = document.createElement('div');
    div.className = 'ces';
    div.innerText='插入节点'
    getHeaderRightExtContent && getHeaderRightExtContent().appendChild(div)
    return () => div.remove();
  },[getHeaderRightExtContent])

  return (
    <ContentBox>
      <InfoBox title="下载申请" contentStyle={{ padding: 20 }} className="form-info-box">
        <Button type="primary" onClick={() => setVisible(true)}>
          点击打开Modal
        </Button>
        <RangePickerFilter showTime />
      </InfoBox>
      <InfoBox title="Player示例" contentStyle={{ padding: 20 }} className="form-info-box">
        <Player
          hasHistory={false}
          hasLiveBar={false}
          isFrontEnd={true}
          hasFront={false}
          menus={{
            download: false,
            preset: false,
            hasActive: false,
          }}
          isLoop={false}
          isLive={false}
          {...data}
        />
      </InfoBox>
      <div style={{ height: '400px' }}>
        <SelectUser orgTreeData={treeData} />
      </div>
      <DownloadModal visible={visible} {...modelInfo} toSubmit={() => setVisible(false)} toCancel={() => setVisible(false)} />
    </ContentBox>
  );
}
