import React, { useState, useRef } from 'react';
import { PlusOutlined, TagsOutlined, UploadOutlined } from '@ant-design/icons';
import { Button, message, Modal, Col, Row, Space, Upload, Popconfirm } from 'antd';
import { PageContainer, FooterToolbar } from '@ant-design/pro-layout';
import type { ProColumns, ActionType } from '@ant-design/pro-table';
import ProTable from '@ant-design/pro-table';
import { BetaSchemaForm, ModalForm, ProFormInstance } from '@ant-design/pro-form';
import type { ProDescriptionsItemProps } from '@ant-design/pro-descriptions';
import ProDescriptions from '@ant-design/pro-descriptions';
import type { FormValueType } from './components/UpdateForm';

import { queryTagList, saveCourse, removeCourse, queryCourseList,viewCourse } from './service';
import type { TableListItem, TableListPagination } from './data';
import Tags from './components/Tags';
import type { DataItem } from '@antv/data-set/lib/transform/tag-cloud';
import { VideoJS } from './components/VideoJS';
import { getInfo } from 'react-mediainfo';

import { v4 as uuidv4 } from 'uuid';

const uuid = uuidv4();



/**
 * 删除课程(接口不支持批量)
 * 参数为记录数组
 * @param selectedRows
 */
const handleRemove = async (selectedRows: TableListItem[]) => {
  const hide = message.loading('正在删除');
  if (!selectedRows) return true;
  try {
    const {code, msg} = await removeCourse({
      key: selectedRows.map((row) => row.key),
    });
    hide();
    if(code === 2000 ){
      message.success('删除成功，即将刷新');
    }else{
      message.warning(msg);
    }
    return true;
  } catch (error) {
    hide();
    message.error('删除失败，请重试');
    return false;
  }
};

const CourseList: React.FC = () => {

  /** 新建窗口的弹窗 */
  const [tagsModalVisible, handleTagsModalVisible] = useState<boolean>(false);
  /** 更新窗口的弹窗 */
  const [createModalVisible, handleCreateModalVisible] = useState<boolean>(false);
  const [detailModalVisible, handleDetailModalVisible] = useState<boolean>(false);
  const [updateModalVisible, handleUpdateModalVisible] = useState<boolean>(false);

  const actionRef = useRef<ActionType>();
  const playerRef = React.useRef<any>(null); // 播放器引用
  const [currentRow, setCurrentRow] = useState<TableListItem>();
  const [selectedRowsState, setSelectedRows] = useState<TableListItem[]>([]);

  const [uploadFileName, SetUploadFileName] = useState<string>();
  const [uploadFileExt, SetUploadFileExt] = useState<string>();

  const createFormRef = useRef<
          ProFormInstance<{
            date: string;
          }>
        >();
  const updateFormRef = useRef<
          ProFormInstance<{
            date: string;
          }>
        >();

  /** 列表项定义 */
  const columns: ProColumns<TableListItem>[] = [
    {
      title: '序号',
      key: 'index',
      valueType: 'indexBorder',
      render: (text: React.ReactNode, _: any, index: number) => {
        if (actionRef && actionRef?.current && actionRef?.current?.pageInfo) {
          return `${(actionRef?.current?.pageInfo?.current - 1) * actionRef.current.pageInfo?.pageSize + (index + 1)
            }`;
        } else {
          return '';
        }
      },
      width: 48,
    },
    {
      title: '课程名称',
      dataIndex: 'course_name',
      valueType: 'text',
      hideInTable: false,
      hideInDescriptions: false,
      hideInForm: false,
      hideInSearch: true,
      formItemProps: {
        // 参照 https://ant.design/components/form-cn/#Rule
        rules: [
          {
            required: true,
            message: '此项为必填项',
          },
          {
            max: 50,
            message: '最大长度为50字符',
          }
        ],
      }, // 传递给 Form.Item 的配置
    },
    {
      title: '主讲教师',
      dataIndex: 'lecture_teacher',
      valueType: 'text',
      sorter: false,
      hideInTable: false,
      hideInForm: false,
      hideInSearch: true,
      width: 100,
      renderText: (val: string) => `${val}`,
      formItemProps: {
        // 参照 https://ant.design/components/form-cn/#Rule
        rules: [
          {
            required: true,
            message: '此项为必填项',
          },
          {
            max: 20,
            message: '最大长度为20字符',
          }
        ],
      }, // 传递给 Form.Item 的配置
    },
    {
      title: '课时',
      dataIndex: 'course_minutes',
      valueType: 'digit',
      sorter: false,
      hideInTable: true,
      hideInForm: false,
      hideInSearch: true,
      render: (text: React.ReactNode, _: any, index: number) => {
        return(
          <div>{text}分钟</div>
        )
      },
      // renderText: (val: string) => `${val} 分钟`,
      formItemProps: {
        // 参照 https://ant.design/components/form-cn/#Rule
        rules: [
          {
            required: true,
            message: '此项为必填项',
          },

          /*{
            max: 4,
            message: '最大长度为4字符',
          }*/
        ],
      }, // 传递给 Form.Item 的配置
    },
    {
      title: '课程描述',
      valueType: 'textarea',
      dataIndex: 'course_describe',
      sorter: false,
      hideInTable: false,
      hideInForm: false,
      hideInSearch: true,
      renderText: (val: string) => `${val}`,
      formItemProps: {
        // 参照 https://ant.design/components/form-cn/#Rule
        rules: [
          {
            required: true,
            message: '此项为必填项',
          },
          {
            max: 150,
            message: '最大长度为150字符',
          }
        ],
      }, // 传递给 Form.Item 的配置
    },
    {
      title: '标签',
      dataIndex: 'tag_id',
      sorter: false,
      valueType: 'select',
      hideInForm: false,
      request: async () => {
        const { data: Items } = await queryTagList({});
        const tags = []
        for (let i = 0; i < Items.length; i++) {
          tags.push({ label: Items[i].tag_name, value: Items[i].tag_id })
        }
        return tags;
      },
      formItemProps: {
        // 参照 https://ant.design/components/form-cn/#Rule
        rules: [
          {
            required: true,
            message: '此项为必填项',
          },
        ],
      }, // 传递给 Form.Item 的配置
    },
    {
      title: '视频',
      dataIndex: 'attachment_json',
      sorter: false,
      hideInTable: true,
      hideInForm: false,
      hideInSearch: true,
      hideInDescriptions: true,
      renderFormItem: (item, { defaultRender, ...rest }, form) => (
        console.log('item.initialValue',item.initialValue),
        console.log('dfeededed',item.initialValue ?item.initialValue.length===undefined? [item.initialValue].map(i=>({...i, url:'/dsideal_yy/html/' + i.url})):item.initialValue.map(i=>({...i, url:'/dsideal_yy/html/' + i.url})) : []),

        // item.initialValue.length===undefined?
        <Upload
          accept='.mp4'
          action='/dsideal_yy/res/plupload/'
          defaultFileList={item.initialValue ?item.initialValue.length===undefined? [item.initialValue].map(i=>({...i, url:'/dsideal_yy/html/' + i.url})):item.initialValue.map(i=>({...i, url:'/dsideal_yy/html/' + i.url})) : []}
          beforeUpload={async (file) => {
            /** 获取视频文件信息 */
            const {media: {track:[General, Video, Audio]}} = await getInfo(file)
            console.log('media',General,Video,Audio)
            if(Video.Format !== 'AVC' || Audio.Format !== 'AAC'){
              message.error('视频编码格式不正确（视频采用AVC，音频采用AAC）')
              return false;
            }
            console.log('filename', file?.name)
            // 获取文件名
            SetUploadFileName(file?.name);
            // 获取最后一个.的位置
            const index = file?.name.lastIndexOf(".");
            // 获取后缀
            SetUploadFileExt(file?.name.substr(index + 1));
          }}
          onRemove={()=>{
            //createFormRef?.current?.setFieldsValue({attachment_json: ""})
          }}
            // this.setState({ fileList });
            // console.log(999,fileList)
          // }}
          data={{
            name: uploadFileName,
            chunk: 0,
            chunks: 1,
            key: `down/Syzx/${uuid?.substr(0, 2)}/${uuid}.${uploadFileExt}`
          }}
          maxCount={1}
          multiple={false}
        >
          <Button icon={<UploadOutlined />}>上传视频</Button>
        </Upload>
      ),
      formItemProps: {
        // 参照 https://ant.design/components/form-cn/#Rule
        getValueFromEvent:(e: any)=>{
          console.log('Upload event:', e);
          if (Array.isArray(e)) {
            return e;
          }
          return e && e.fileList;
        },
        rules: [
          {
            required: true,
            message: '此项为必填项',
          },
        ],
      }, // 传递给 Form.Item 的配置
      //renderText: (val: string) => `${val}M`,
    },
    {
      title: '视频大小',
      dataIndex: 'attachment_filesize',
      sorter: false,
      hideInForm: true,
      hideInSearch: true,
      width: 100,
      renderText: (val: number) => `${(val / 1024/1024).toFixed(2)} M`,
      formItemProps: {
        // 参照 https://ant.design/components/form-cn/#Rule
        rules: [
          {
            required: true,
            message: '此项为必填项',
          },
        ],
      }, // 传递给 Form.Item 的配置
    },
    {
      title: '创建时间',
      dataIndex: 'create_time',
      valueType: 'text',
      sorter: true,
      hideInTable: true,
      hideInForm: true,
      hideInSearch: false,
      //renderText: (val: string) => `${val}`,
    },
    {
      title: '操作',
      dataIndex: 'option',
      valueType: 'option',
      width: 150,
      render: (_dom: any, record: React.SetStateAction<TableListItem | undefined>) => [
        <a
          key="detail"
          onClick={async() => {
            const info= await viewCourse({course_id:record.course_id});

            if(info.data.attachment_json.length===undefined){
              info.data.attachment_json=[info.data.attachment_json]
            }
            setCurrentRow(info.data);
            handleDetailModalVisible(true);
          }}
        >
          查看
        </a>,
        <a
          key="update"
          onClick={async() => {
            const info= await viewCourse({course_id:record.course_id});
            setCurrentRow(info.data);
            handleUpdateModalVisible(true);
          }}
        >
          编辑
        </a>,
        <Popconfirm key="popconfirm" title={`确认删除当前项吗?`} okText="是" cancelText="否"
          onConfirm={async () => {
            const success = await handleRemove([{ key: record?.course_id }]); // 调用批量删除函数（如果接口不支持批量需要在service中处理）
            if (success) {
              // handleModalVisible(false);
              if (actionRef.current) {
                setSelectedRows([]);
                actionRef.current?.reloadAndRest?.();
              }
            }
          }}
        >
          <a key="remove">删除</a>
        </Popconfirm>
        ,
      ],
    },
  ];

  /** 获取列数据初始值 */
  const getInitialValues = (cols: any[], vals: any) => {
    const initialValues: any[] = [];
    cols.forEach((column: { dataIndex: string }) => {
      const key: any = column?.dataIndex || '';
      initialValues.push({ ...column, initialValue: key ? vals[key] : '' });
    });
    return initialValues || [];
  };

  /**
   * 添加课程
   *
   * @param fields
   */
  const handleAdd = async (fields: TableListItem) => {
    const info=  await saveCourse({ ...fields });

    console.log('info---',info);
    if(info.code!==2000){
      message.warning(info.msg);
      return false;
    }else {
      message.success('添加成功');
      handleCreateModalVisible(false); // 隐藏创建窗口
      return true;
    }

    // try {
    //   await saveCourse({ ...fields });
    //   hide();
    //   message.success('添加成功');
    //   return true;
    // } catch (error) {
    //   hide();
    //   console.log('error',error)
    //   message.error('添加失败请重试！');
    //   return false;
    // }
  };

  /**
   * 更新课程
   *
   * @param fields
   */
  const handleUpdate = async (fields: TableListItem) => {
    const info= await saveCourse({
      ...fields,
    });
    console.log('info---',info)
    if(info.code!==2000){
      message.warning(info.msg);
      return false;
    }else {
      message.success('编辑成功');
      handleUpdateModalVisible(false); // 隐藏创建窗口

      return true;
    }


  };
  return (
    <PageContainer>
      <ProTable<TableListItem, TableListPagination>
        headerTitle={false}
        actionRef={actionRef}
        rowKey="course_id"
        options={false}
        search={{
          labelWidth: 120,
        }}
        toolBarRender={() => [
          <Button
            type="primary"
            key="primary"
            onClick={() => {
              handleTagsModalVisible(true);
            }}
          >
            <TagsOutlined /> 标签管理
          </Button>,
          <Button
            type="primary"
            key="primary"
            onClick={() => {
              handleCreateModalVisible(true);
            }}
          >
            <PlusOutlined /> 新建课程
          </Button>,
        ]}
        request={async (value) => {
          const { create_time } = value;
          if (create_time) {
            value.begin_time = create_time[0]
            value.end_time = create_time[1]
          }
          const { data } = await queryCourseList({
            ...value,
            page_number: value?.current || 1,
            page_size: value?.pageSize,
          });
          return {
            current: data?.page_number,
            data: data?.list,
            pageSize: data?.page_size,
            success: true,
            total: data?.total_row || 0,
          };
        }}
        // dataSource={list}
        columns={columns}
        rowSelection={false}
      />
      {selectedRowsState?.length > 0 && (
        <FooterToolbar
          extra={
            <div>
              已选择{' '}
              <a
                style={{
                  fontWeight: 600,
                }}
              >
                {selectedRowsState.length}
              </a>{' '}
              项 &nbsp;&nbsp;
            </div>
          }
        >
          <Button
            onClick={async () => {
              await handleRemove(selectedRowsState);
              setSelectedRows([]);
              actionRef.current?.reloadAndRest?.();
            }}
          >
            批量删除
          </Button>
        </FooterToolbar>
      )}

      <Modal
        title={currentRow?.course_name || '课程详细'}
        width="70%"
        destroyOnClose={true}
        visible={detailModalVisible}
        onCancel={() => {
          //playerRef?.current?.ended();
          playerRef?.current?.dispose();

          //videoRef.current.play()
          setCurrentRow(undefined); // 设置当前行
          handleDetailModalVisible(false);
        }}
        footer={null}
        centered
      >
        {console.log('currentRow',currentRow)}
        {currentRow?.course_id && (
          <Row>
            <Col span={14}>
              <VideoJS
                style={{width:640,height:480}}
                width='100%'
                height='480px'
                options={{
                  controls: true,
                  playbackRates: [0.7, 1.0, 1.5, 2.0], // 播放速度
                  autoplay: false, // 如果true,浏览器准备好时开始回放。
                  muted: false, // 默认情况下将会消除任何音频。
                  loop: true, // 导致视频一结束就重新开始。
                  preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
                  language: 'zh-CN',
                  aspectRatio: '4:3', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
                  fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
                  sources: [
                    {
                      src: '/dsideal_yy/html/' + currentRow?.attachment_json[0]?.url,  // 测试地址后续请删除
                      //type: 'application/x-mpegURL'
                    }
                  ],
                  poster: currentRow?.attachment_json?.img || '', // 你的封面地址
                  width: document.documentElement.clientWidth,
                  notSupportedMessage: '此视频暂无法播放，请稍后再试', // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
                  controlBar: {
                    timeDivider: true,
                    durationDisplay: true,
                    remainingTimeDisplay: true,
                    fullscreenToggle: true // 全屏按钮
                  }
                }}
                onReady={(play: any) => {
                  //console.log('play====', play);
                  playerRef.current = play
                  play.play();
                  play.on("timeupdate", function (event) {
                    //const _timeCurrent = Date.parse(new Date().toString()) / 1000; // 当前时间
                    //setTimeUpdateState(_timeCurrent); //timeUpdateState
                    // console.log('play--', play.currentTime())
                    // console.log('play-%-', parseInt(play.currentTime()) % 15)
                    if (parseInt(play.currentTime()) % 15 === 0) { // 每15秒更新进度
                      console.log()
                    }
                    //var currentTime = parseInt(this.currentTime()); //当前时间
                    //var duration = this.duration(); //视频时常
                    //var percent = (currentTime / duration * 100).toFixed(0) + "%";
                    //console.log('event',event);
                    //$("#current").text(this.currentTime());
                    //$("#duration").text(duration);
                  })
                }}
              />
            </Col>
            <Col span={10}>
              <ProDescriptions<TableListItem>
                column={1}
                /* title={currentRow?.name} */
                dataSource={currentRow}
                /*
                  request={async () => ({
                    data: currentRow || {},
                  })}*/
                params={{
                  id: currentRow?.course_id,
                }}
                columns={
                  columns.slice(0, columns.length - 1) as ProDescriptionsItemProps<TableListItem>[]
                }
                style={{ padding: '0 24px' }}
              />
            </Col>
          </Row>
        )}
      </Modal>
      <ModalForm
        title="标签管理"
        visible={tagsModalVisible}
        onVisibleChange={handleTagsModalVisible}

        onFinish={()=>{return true}}
        submitter={{
          render: (props, defaultDoms) => {
            return '';
          },
        }}
      >
        <Tags />
      </ModalForm>

      <Modal
        title="新建课程"
        //
        width="60%"
        visible={createModalVisible}
        destroyOnClose
        onCancel={() => {
          handleCreateModalVisible(false);
        }}
        footer={null}
      >
        <BetaSchemaForm<DataItem>
          formRef={createFormRef}
          layout="horizontal"
          layoutType="Form"
          labelCol={{ span: 8 }}
          wrapperCol={{ span: 12 }}
          onFinish={async (values: any) => {
            // 表单处理
            //console.log('columns:', columns);
            //return false;
            // values.attachment_json.response.file.response.url
            //console.log('currentRow', currentRow)
            //return false;
          console.log('values新增',values)
          await handleAdd({
              ...values,
              ////course_id: currentRow?.course_id,
              //attachment_json: `{"img":"", "name": "${values?.attachment_json?.file?.name}", "url": "down/Syzx/${uuid?.substr(0, 2)}/${uuid}.mp4"}`,
              //attachment_filesize: values?.attachment_json?.file?.size, // 字节

              attachment_json: `[{"img":"", "name": "${values?.attachment_json[0]?.name}", "url": "down/Syzx/${uuid?.substr(0, 2)}/${uuid}.mp4"}]`,
              attachment_filesize: values?.attachment_json[0]?.size, // 字节
            });

            actionRef.current?.reloadAndRest?.();

          }}
          submitter={{
            render: (props, doms) => (
              <Row>
                <Col span={12} offset={8}>
                  <Space>{doms}</Space>
                </Col>
              </Row>
            ),
          }}
          // action = ''
          title="新建"
          columns={columns || []}
        />
      </Modal>

      <Modal
        title="编辑"
        width="60%"
        visible={updateModalVisible}
        destroyOnClose
        onCancel={() => {
          handleUpdateModalVisible(false); // 隐藏编辑窗口
        }}
        footer={null}
      >
        {currentRow?.course_id && (
          <BetaSchemaForm<DataItem>
            formRef={updateFormRef}
            layout="horizontal"
            layoutType="Form"
            labelCol={{ span: 8 }}
            wrapperCol={{ span: 12 }}
          onFinish={async (values: any) => {
          console.log('values',values)
          console.log('currentRow',currentRow)
          await handleUpdate({
            ...values,
            attachment_json: `[{"img":"", "name": "${values?.attachment_json[0]?.name}", "url": "down/Syzx/${uuid?.substr(0, 2)}/${uuid}.mp4"}]`,
            attachment_filesize: values.attachment_json[0].size||currentRow.attachment_filesize, // 字节
            course_id: currentRow?.course_id
        });

          actionRef.current?.reloadAndRest?.();

        }}
            submitter={{
              render: (props, doms) => (
                <Row>
                  <Col span={12} offset={8}>
                    <Space>{doms}</Space>
                  </Col>
                </Row>
              ),
            }}
            // action = ''
            title="编辑"
            columns={getInitialValues(columns, currentRow)}
          />
        )}
      </Modal>
    </PageContainer>
  );
};

export default CourseList;
