import { DingdingOutlined, UploadOutlined } from '@ant-design/icons';
import { Button, Card, Steps, Result, Descriptions, Modal, Input, Upload, Popconfirm, Menu, Radio } from 'antd';
import { Fragment, useEffect, useRef, useState } from 'react';
import { GridContent } from '@ant-design/pro-layout';
import { Line } from '@ant-design/charts';
import { DualAxes } from "@ant-design/charts";
import styles from './index.less';
import ReactQuill from 'react-quill';
import 'react-quill/dist/quill.snow.css'
import ProDescriptions, { ProDescriptionsItemProps } from '@ant-design/pro-descriptions';
import { TableListItem } from '../ListTableList2';
import { v4 as uuidv4 } from 'uuid';
import { queryCourseList } from '../course/option/service';
import { useRequest } from 'umi';

const { Step } = Steps;

//  秒数转化为时分秒
const formatSeconds= (value)=>{
  //  秒
  let second = parseInt(value)
  //  分
  let minute = 0
  //  小时
  let hour = 0
  //  天
  //  let day = 0
  //  如果秒数大于60，将秒数转换成整数
  if (second > 60) {
    //  获取分钟，除以60取整数，得到整数分钟
    minute = parseInt(second / 60)
    //  获取秒数，秒数取佘，得到整数秒数
    second = parseInt(second % 60)
    //  如果分钟大于60，将分钟转换成小时
    if (minute > 60) {
      //  获取小时，获取分钟除以60，得到整数小时
      hour = parseInt(minute / 60)
      //  获取小时后取佘的分，获取分钟除以60取佘的分
      minute = parseInt(minute % 60)
      //  如果小时大于24，将小时转换成天
      //  if (hour > 23) {
      //    //  获取天数，获取小时除以24，得到整天数
      //    day = parseInt(hour / 24)
      //    //  获取天数后取余的小时，获取小时除以24取余的小时
      //    hour = parseInt(hour % 24)
      //  }
    }
  }
  
  let result = '' + parseInt(second) + ' 秒 '
  if (minute > 0) {
    result = '' + parseInt(minute) + ' 分 ' + result
  }
  if (hour > 0) {
    result = '' + parseInt(hour) + ' 小时 ' + result
  }
  //  if (day > 0) {
  //    result = '' + parseInt(day) + '天' + result
  //  }
  console.log('result：', result)
  return result
}
export default () => {
  const uuid = uuidv4()
  console.log('uuid', uuidv4());
  const data = [
    {
      year: "1991",
      value: 3,
      count: 10
    },
    {
      year: "1992",
      value: 4,
      count: 4
    },
    {
      year: "1993",
      value: 3.5,
      count: 5
    },
    {
      year: "1994",
      value: 5,
      count: 5
    },
    {
      year: "1995",
      value: 4.9,
      count: 4.9
    },
    {
      year: "1996",
      value: 6,
      count: 35
    },
    {
      year: "1997",
      value: 7,
      count: 7
    },
    {
      year: "1998",
      value: 9,
      count: 1
    },
    {
      year: "1999",
      value: 13,
      count: 20
    }
  ];
  const data2 = [
    {
      year: "1991",
      value: 30,
      count: 100
    },
    {
      year: "1992",
      value: 40,
      count: 40
    },
    {
      year: "1993",
      value: 3.5,
      count: 50
    },
    {
      year: "1994",
      value: 5,
      count: 50
    },
    {
      year: "1995",
      value: 40.9,
      count: 24.9
    },
    {
      year: "1996",
      value: 6,
      count: 395
    },
    {
      year: "1997",
      value: 7,
      count: 79
    },
    {
      year: "1998",
      value: 99,
      count: 1
    },
    {
      year: "1999",
      value: 193,
      count: 20
    }
  ];


  const [modalVisible, handleModalVisible] = useState<boolean>(false);
  const saveInputRef = useRef();
  const radioRef = useRef();
  
  //const currentRow = {course_name:'课程0001'};
  const currentRow = {course_name1:'课程0001'};
  const columns = [
    {title: "序号", key: "index", valueType: "indexBorder", width: 48},
    //{title: "课程名称", dataIndex: "course_name", valueType: "text", hideInTable: false, hideInDescriptions: false},
    {dataIndex: "course_name", hideInDescriptions: false, hideInForm: false,hideInSearch: true,hideInTable: false, title: "课程名称1", valueType: "text"},
    {}
  ];
  const [chartData, setChartData] = useState([data, data]);

  const [selectedCourse, setSelectedCourse] = useState(0);
  const [menu, setMenu] = useState();

  const [timeData, setTimeData] = useState(0);

  useEffect(() => {
    let secondValue = 3000; // 秒  截至时间 - 服务器当前时间
    setTimeData(secondValue)
    const timer = setInterval(() => {      //
      setTimeData((secondValue > 1) ? secondValue-- : 0);
    }, 1000);
    return ()=>{
      clearInterval(timer) // 清理计算器
    }
  },[])

  /** 获取课程数据 */
  const { data: listData } = useRequest(() => {
    return queryCourseList();
  });
  useEffect(() => {
    console.log('listData', listData)
    setInterval(() => {
      setChartData(Math.random() > 0.5 ? [data, data] : [data2, data2]);
    }, 1000);



    /** 生成菜单 */
    const menuItems = [];

    if(listData?.length > 0){
      console.log('push');
      listData.list.forEach((item: {code: number, name: string})=>{
        menuItems.push(<Menu.Item key={item?.course_id}>{item?.course_name}</Menu.Item>)
      })
    }
    setMenu(             
      <Menu onClick={(value)=>{
        console.log('menu11', value);
        console.log('menu11', value.key);
        //setMenu({ name: listData[Number(value?.key)]?.name, value: Number(value?.key)});
        }}
      >
        {menuItems}
      </Menu>
    );
  }, [listData, selectedCourse]);

  const config = {
    data: chartData,
    xField: "year",
    yField: ["value", "count"]
  };

  return(
  <>
  {menu}
  <Input value={123} ref={saveInputRef} />
  <a onClick={()=>{
    saveInputRef.current.focus({})
    console.log('ref', saveInputRef.current)
  }}>焦点</a> 
  <a onClick={()=>{handleModalVisible(true)}}>课程</a>
  <p>uuid: {uuidv4()}</p>
    <ReactQuill 
      theme="snow"
      value=''
      onChange={(val)=>{
      // val === 转化出来的html
      }}
    />
    <p>
    <div dangerouslySetInnerHTML={{__html: '<h3>hello</h3>'}} />
    </p>
    <p>
    /dsideal_yy/html/down/Syzx/{uuid?.substr(0,2)}/{uuid}.jpg
    /dsideal_yy/html/down/Material/BC/BCFFEA09-9660-9D40-8D11-EF7D7110F7A2.jpg
    获取文件详情（下载url，播放url） /dsideal_yy/wkds/getwkdsInfo
    </p>
    <Upload
      showUploadList={false}
      action="/dsideal_yy/res/plupload/"
      data={
        {
          name: '4.jpg',
          chunk: 0,
          chunks: 1,
          key: 'down/Material/BC/BCFFEA09-9660-9D40-8D11-EF7D7110F7A2.jpg'
        }
      }
    >
      <div className={styles.button_view}>
        <Button>
          <UploadOutlined />
          更换头像
        </Button>
      </div>
    </Upload>
    
    <Modal
      title={currentRow?.course_name || '课程详细'}
      width="60%"
      visible={modalVisible}
      onCancel={() => {
        // setCurrentRow(undefined); // 设置当前行
        handleModalVisible(false);
      }}
      footer={null}
      centered
    >

    <ProDescriptions<TableListItem>
      column={2}
      /* title={currentRow?.name} */
      dataSource={currentRow}
      /*
        request={async () => ({
          data: currentRow || {},
        })}*/
      params={{
        id: currentRow?.id,
      }}
      columns={
        columns.slice(0, columns.length - 1) as ProDescriptionsItemProps<TableListItem>[]
      }
    />    
    
    </Modal>
    <Popconfirm title="Are you sure？" okText="Yes" cancelText="No">
    <a href="#">Delete</a>
  </Popconfirm>

  <DualAxes {...config} />


    <Radio.Group  onChange={()=>{
    }}>
      <Radio value={1}>A</Radio>
      <Radio value={2}>B</Radio>
      <Radio value={3}>C</Radio>
      <Radio value={4} defaultChecked>D</Radio>
    </Radio.Group>
    <a onClick={()=>{}}>rrrrr</a>


    <div style={{padding:24,fontSize:30}}>{formatSeconds(timeData)}</div>
  </>
  )
};