import { DingdingOutlined, UploadOutlined } from '@ant-design/icons';
import { Button, Card, Steps, Result, Descriptions, Modal, Input, Upload, Popconfirm } from 'antd';
import { Fragment, useRef, useState } from 'react';
import { GridContent } from '@ant-design/pro-layout';

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';

const { Step } = Steps;


export default () => {
  const uuid = uuidv4()
  console.log('uuid', uuidv4());
  
  const [modalVisible, handleModalVisible] = useState<boolean>(false);
  const saveInputRef = 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"},
    {}
  ];
  return(
  <>
  <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>
  </>
  )
};