import React, { useEffect, useRef, useState } from 'react';
import { history, useParams, useRequest } from 'umi';
import type { ProFormInstance } from '@ant-design/pro-form';
import { BetaSchemaForm, ProFormRadio, ProFormUploadButton } from '@ant-design/pro-form';
import ProForm, {
  StepsForm,
  ProFormText,
  ProFormDatePicker,
  ProFormSelect,
  ProFormTextArea,
  ProFormCheckbox,
  ProFormDateRangePicker,
} from '@ant-design/pro-form';
import ProCard from '@ant-design/pro-card';
import { Button, Checkbox, Col, Divider, List, Menu, message, Modal, Radio, Result, Row, Space, Typography } from 'antd';
import { PageContainer } from '@ant-design/pro-layout';
import ProDescriptions from '@ant-design/pro-descriptions';
import styles from './index.less'
import { MailOutlined, AppstoreOutlined, PlusOutlined, TagsOutlined } from '@ant-design/icons';
import ReactQuill from 'react-quill';
import 'react-quill/dist/quill.snow.css'
import ProFormRichEdit from '../components/ProFormRichEdit';
import type { ActionType, ProColumns } from '@ant-design/pro-table';
import ProTable from '@ant-design/pro-table';
import type { TableListItem, TableListPagination } from '../../option/data';
import { queryCourseList, queryCourseListByTag, queryTagList, removeCourse, saveSubject } from '../../option/service';
import { commitSubject, getSubjectInfo, queryListChapterBySubject, saveChapter, deleteChapter } from '../service';
import { v4 as uuidv4 } from 'uuid';
import type { DataItem } from "@antv/data-set/lib/transform/tag-cloud";
import { removeTrain } from "@/pages/training/option/service";
import { listMyLearningChapterCourse } from "../../../../../../web/src/pages/course/list/service";
import course from "../../../../../../web/mock/course";

const { confirm } = Modal;


//编辑章节 handleUpdateChapter

const handleUpdateChapter = async (fields: TableListItem) => {
  try {
    const { course_ids } = fields;
    const { tag_ids } = fields;
    const { code, msg } = await saveChapter({ ...fields, course_ids: course_ids.toString(), tag_ids: tag_ids.toString() });
    if (code === 2000) {
      message.success('编辑成功');
      return true;
    } else {
      message.warn(msg);
      return false;
    }
  } catch (error) {
    message.error('编辑失败请重试！');
    return false;
  }
};

/**
 * 添加章节
 *
 * @param fields
 */
const handleAddChapter = async (fields: TableListItem) => {
  const hide = message.loading('正在添加');
  try {
    const { course_ids } = fields;
    const { tag_ids } = fields;
    const { code, msg } = await saveChapter({ ...fields, course_ids: course_ids.toString(), tag_ids: tag_ids.toString() });
    if (code === 2000) {
      hide();
      message.success('添加成功');
      return true;
    } else {
      hide();
      message.warn(msg);
      return false;
    }
  } catch (error) {
    hide();
    message.error('添加失败请重试！');
    return false;
  }
};

export default () => {
  const uuid = uuidv4();

  const formRef = useRef<ProFormInstance>();
  const actionRef = useRef<ActionType>();

  /** 更新窗口的弹窗 */
  const [createModalVisible, handleCreateModalVisible] = useState<boolean>(false);
  const [detailModalVisible, handleDetailModalVisible] = useState<boolean>(false);
  const [updateModalVisible, handleUpdateModalVisible] = useState<boolean>(false);
  const [selectedRowsState, setSelectedRows] = useState<TableListItem[]>([]);
  const [uploadFileName, SetUploadFileName] = useState<string>();
  const [uploadFileExt, SetUploadFileExt] = useState<string>();

  const [subjectIntro, setSubjectIntro] = useState({});
  const [subjectId, setSubjectId] = useState({});
  const [currentRow, setCurrentRow] = useState<TableListItem>();
  const formMapRef = useRef<React.MutableRefObject<ProFormInstance<any> | undefined>[]>([]);

  /** 列表项定义 */
  const columns: ProColumns<TableListItem>[] = [
    {
      title: '序号',
      key: 'index',
      valueType: 'indexBorder',
      width: 48,
      align: 'center'
    },
    {
      title: '章节名称',
      dataIndex: 'chapter_name',
      valueType: 'text',
      hideInTable: false,
      hideInDescriptions: false,
      hideInForm: false,
      hideInSearch: true,
      formItemProps: {
        rules: [
          {
            required: true,
            message: '请填写章节名称',
          },
        ]
      },
      align: 'center'
    },
    {
      title: '简介',
      dataIndex: 'chapter_describe',
      valueType: 'textarea',
      sorter: false,
      hideInTable: false,
      hideInForm: false,
      hideInSearch: true,
      formItemProps: {
        rules: [
          {
            required: true,
            message: '请填写章节简介',
          },
        ]
      },
      renderText: (val: string) => (<div dangerouslySetInnerHTML={{ __html: val }} />),
      renderFormItem: (item, { defaultRender, ...rest }, form) => (
        <ProFormRichEdit
          name="chapter_describe"
          label=""
          width="xl"
          // tooltip="最长为 6 位汉字，需要与考生身份证一致"
          placeholder="请输入介绍"
          // rules={[{ required: true }]}
          value=""
        // disabled

        />
      ),
      align: 'center'
    },
    {
      title: '标签',
      valueType: 'select',
      dataIndex: 'tag_ids',
      sorter: false,
      hideInTable: true,
      hideInForm: false,
      hideInSearch: true,
      fieldProps: {
        mode: "multiple"
      },
      formItemProps: {
        rules: [
          {
            required: true,
            message: '请填选择标签',
          },
        ]
      },
      renderText: (val: string) => `${val}`,
      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;
      },
      align: 'center'
    },
    {
      title: '课程',
      valueType: 'select',
      dataIndex: 'course_ids',
      sorter: false,
      hideInTable: false,
      hideInForm: false,
      hideInSearch: true,
      fieldProps: {
        mode: "multiple"
      },
      formItemProps: {
        rules: [
          {
            required: true,
            message: '请填选择课程',
          },
        ]
      },
      render: (_dom: any, record: React.SetStateAction<TableListItem | undefined>) => [
        <div>
          {
            record.course_names.length !== 0 ? record.course_names.map((i, index) => {
              if (index + 1 === record.course_names.length) {
                return i
              } else {
                return i + '，'
              }

            }) : '--'
          }
        </div>
      ],

      // renderText: (val: string) => `${val}`,
      dependencies: ['tag_ids'],
      request: async (arr) => {
        // console.log('arr',arr)
        // const {tags} = arr;
        const { data: Items } = await queryCourseListByTag({ tag_ids: arr?.tag_ids?.toString() });
        const courses = []
        for (let i = 0; i < Items?.length; i++) {
          courses.push({ label: Items[i]?.course_name, value: Items[i]?.course_id })
        }
        return courses;
      },
      align: 'center'
    },
    {
      title: '学时',
      dataIndex: 'course_minutes',
      valueType: 'text',
      sorter: false,
      hideInTable: false,
      hideInForm: true,
      hideInSearch: true,
      renderText: (val: string) => `${val}`,
      align: 'center'
    },

    {
      title: '操作',
      dataIndex: 'option',
      valueType: 'option',
      width: 200,
      align: 'center',
      render: (_dom: any, record: React.SetStateAction<TableListItem | undefined>) => [
        <a
          key="update"
          style={{ marginRight: '1rem' }}
          onClick={() => {
            setCurrentRow(record);
            handleUpdateModalVisible(true);
          }}
        >
          编辑
        </a>,
        <a key="remove" onClick={() => {
          showConfirm(record)

        }}>
          删除
        </a>,
      ],
    },
  ];

  const params = useParams();

  const { data: subjectInfo } = useRequest(() => {
    return getSubjectInfo({ subject_id: params?.id });
  });


  const showConfirm = async (record) => {
    confirm({
      title: '确认删除章节吗?',
      centered: true,
      onOk() {
        handleRemove([record]);
        setSelectedRows([]);
        actionRef.current?.reloadAndRest?.();
      },
      onCancel() {
      },
    });
  };

  const handleRemove = async (selectedRows: TableListItem[]) => {
    const hide = message.loading('正在删除');
    if (!selectedRows) return true;
    try {
      const { code, msg } = await deleteChapter({
        key: selectedRows,
      });
      hide();
      if (code === 2000) {
        message.success('删除成功，即将刷新');
      } else {
        message.warning(msg);
      }
      return true;
    } catch (error) {
      hide();
      message.error('删除失败，请重试');
      return false;
    }
  };

  useEffect(() => {
    setSubjectId(params?.id)

  }, [])
  useEffect(() => {
    // 编辑场景下需要使用formMapRef循环设置formData
    formMapRef.current.forEach((formInstanceRef) => {
      let fieldsValue;
      const subjectValue = {
        subject_name: subjectInfo?.subject_name,
        subject_describe: subjectInfo?.subject_describe,
      }
      if (params?.id && subjectInfo?.attachment_json?.url) {
        fieldsValue = {
          ...subjectValue,
          upload: [
            {
              name: subjectInfo?.attachment_json?.name,
              status: 'done',
              url: `/dsideal_yy/html/${subjectInfo?.attachment_json?.url}`
            }
          ]
        }
      } else {
        // 无附件
        fieldsValue = subjectValue;
      }
      formInstanceRef.current?.setFieldsValue(fieldsValue);
    });

  }, [subjectInfo]);

  /** 获取列数据初始值 */
  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 || [];
  };

  return (
    <PageContainer content={''} extraContent={''}>
      <ProCard className={styles.examinationrules}>
        <StepsForm<{
          name: string;
        }>
          formMapRef={formMapRef}
          formRef={formRef}
          onFinish={async (values) => {
            message.success('提交成功');
          }}
          formProps={{
            layout: "horizontal",
            labelCol: { span: 8 },
            wrapperCol: { span: 12 },
            validateMessages: {
              required: '此项为必填项',
            },
          }}
        >
          <StepsForm.StepForm<{
            name: string;
          }>
            name="base"
            title="主题基本信息"
            stepProps={{
              description: false,
            }}
            /*
            request={async () => {
              const data = await getSubjectInfo(5);

              // return { data: bean }


            }}*/
            onFinish={async (value: any) => {
              console.log(value, 'subjectId')

              const url = value?.upload[0]?.url?.replace('/dsideal_yy/html/', '') || value?.upload[0]?.response?.url;
              const info = await saveSubject({
                ...value,
                subject_id: subjectId,
                attachment_json: `{ "url": "${url}"}`
              });

              if (info.code !== 2000) {
                message.warning(info.msg);
                return false;
              } else {
                setSubjectId(info?.data.subject_id)
                setSubjectIntro({ subject_id: info?.data.subject_id, subject_name: value?.subject_name, subject_describe: value?.subject_describe });
                return true;
              }

            }}
          >
            <Row gutter={24}>
              <Col lg={24} md={24} sm={24}>
                <ProFormText
                  name="subject_name"
                  label="主题名称"
                  width="xl"
                  // tooltip="最长为 6 位汉字，需要与考生身份证一致"
                  placeholder="请输入名称"
                  rules={[{ required: true }]}
                // value="锦书"
                // disabled
                />
                <ProFormRichEdit
                  name="subject_describe"
                  label="主题介绍"
                  width="xl"
                  // tooltip="最长为 6 位汉字，需要与考生身份证一致"
                  placeholder="请输入介绍"
                // rules={[{ required: true }]}
                // value="锦书"
                // disabled

                />
                <ProFormUploadButton
                  name="upload"
                  label="主题图片"
                  max={2}
                  fieldProps={{
                    accept: '.jpg,.jpeg,.git,.png',
                    name: 'file',
                    listType: 'picture-card',
                    maxCount: 1,
                    beforeUpload: (file) => {
                      //限制图片 格式、size、分辨率
                      const isJPG = file.type === 'image/jpeg';
                      const isJPEG = file.type === 'image/jpeg';
                      const isGIF = file.type === 'image/gif';
                      const isPNG = file.type === 'image/png';
                      if (!(isJPG || isJPEG || isGIF || isPNG)) {
                        message.error('只能上传JPG 、JPEG 、GIF、 PNG格式的图片~');
                        return false;
                      }
                      const isLt2M = file.size / 1024 / 1024 < 2;
                      if (!isLt2M) {
                        message.error('超过2M限制，不允许上传~');
                        return false;
                      }

                      // 获取文件名
                      SetUploadFileName(file?.name);
                      // 获取最后一个.的位置
                      const index = file?.name.lastIndexOf(".");
                      // 获取后缀
                      SetUploadFileExt(file?.name.substr(index + 1));
                    },
                    data: {
                      name: uploadFileName,
                      chunk: 0,
                      chunks: 1,
                      key: `down/Syzx/${uuid?.substr(0, 2)}/${uuid}.${uploadFileExt}`
                    }
                  }}
                  rules={[{ required: true }]}
                  action="/dsideal_yy/res/plupload/"
                  extra=""
                />
              </Col>
            </Row>

          </StepsForm.StepForm>

          <StepsForm.StepForm<{
            checkbox: string;
          }>
            name="object"
            title="章节信息"
            stepProps={{
              description: false,
            }}
            onFinish={async (fileds) => {
              /*
              if (params.id) {
                fileds = { ...fileds, id: params.id }
              }
              console.log(fileds, 'fileds', params);
              // return false
              await saveRules({
                ...fileds,
                b_use: 0,
                rules_type: 1,
                start_time: fileds.dateRange[0],
                end_time: fileds.dateRange[1]
              });

              // await waitTime(2000);
              */
              return true;

            }}
          >
            <div style={{ margin: '0' }}>
              <ProDescriptions
                layout='horizontal'
                column={1}
                //actionRef={actionRef}
                title="主题信息"
                /*
                request={async () => {
                  // console.log('step2 主题信息')
                  return Promise.resolve({
                    success: true,
                    data: { id: '这是一段文本', object: '', date: '2020-07-30 08:00', duration: '', grade: 100, through: '>60', learn: '>20 min', times: 2 },
                  });
                }}*/
                extra={false}
              >
                <ProDescriptions.Item dataIndex="subject_id" hideInDescriptions />
                <ProDescriptions.Item dataIndex="subject_name" label="主题名称" valueType="text">{subjectIntro?.subject_name}</ProDescriptions.Item>
                <ProDescriptions.Item dataIndex="subject_describe" label="主题介绍" valueType="text">
                  <div dangerouslySetInnerHTML={{ __html: subjectIntro?.subject_describe }} />
                </ProDescriptions.Item>
              </ProDescriptions>

              <ProTable<TableListItem, TableListPagination>
                headerTitle={false}
                actionRef={actionRef}
                rowKey="chapter_id"
                options={false}
                search={false}
                params={subjectIntro}
                toolBarRender={() => [
                  <Button
                    type="primary"
                    key="primary"
                    onClick={() => {
                      handleCreateModalVisible(true);
                    }}
                  >
                    <PlusOutlined /> 添加章节
                  </Button>,
                ]}
                request={async (value) => {

                  const { data } = await queryListChapterBySubject({
                    subject_id: subjectIntro.subject_id,
                    page_number: value?.current || 1,
                    page_size: value?.pageSize,
                  });
                  if (data.list.length !== 0) {
                    data.list.forEach((i) => {
                      i.course_ids = i.course_ids.split(',')
                      i.course_names = i.course_names.split(',')
                      i.tag_ids = i.tag_ids.split(',')
                      i.tag_names = i.tag_names.split(',')
                    })

                  }
                  if (data.list.length !== 0) {
                    data.list.forEach((item) => {
                      item.tag_ids = item.tag_ids.map(i => i * 1);
                      item.course_ids = item.course_ids.map(a => a * 1);
                    })
                  }
                  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}
              />
              <Modal
                title="新建章节"
                //
                width="60%"
                visible={createModalVisible}
                destroyOnClose
                onCancel={() => {
                  handleCreateModalVisible(false);
                }}
                footer={null}
              >
                <BetaSchemaForm<DataItem>
                  layout="horizontal"
                  layoutType="Form"
                  labelCol={{ span: 8 }}
                  wrapperCol={{ span: 12 }}
                  onFinish={async (values: any) => {
                    // 表单处理
                    // console.log('columns:', columns);
                    // console.log('values:新建', values);
                    const success = await handleAddChapter({
                      ...values,
                      subject_id: params?.id || 0,
                    });
                    if (success) {
                      handleCreateModalVisible(false);
                      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?.chapter_id && (
                  <BetaSchemaForm<DataItem>
                    layout="horizontal"
                    layoutType="Form"
                    labelCol={{ span: 8 }}
                    wrapperCol={{ span: 12 }}
                    onFinish={async (values) => {
                      // console.log('values编辑', values)
                      // console.log('currentRow', currentRow)
                      const success = await handleUpdateChapter({
                        ...values,
                        subject_id: params?.id || 0,
                        chapter_id: currentRow.chapter_id
                      });
                      if (success) {
                        handleUpdateModalVisible(false);
                        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>
            </div>
          </StepsForm.StepForm>

          <StepsForm.StepForm
            name="time"
            title="完成"
            stepProps={{
              description: false,
            }}
            onFinish={async (values) => {
              await commitSubject({ subject_id: subjectIntro?.subject_id });
              // 跳转到指定路由
              history.push('/course/subject');
              return true;
            }}
          >

            <Row gutter={24}>
              <Col lg={12} md={12} sm={12} offset={6}>
                <Result
                  className={styles.registerResult}
                  status="success"
                  title={
                    <div className={styles.title}>
                      主题 <span style={{ color: '#1890ff' }}>{subjectIntro?.subject_name} </span>创建/修改成功
                    </div>
                  }
                  subTitle="点击提交将设置为发布状态。"
                //extra={actions}
                />
              </Col>
            </Row>
          </StepsForm.StepForm>
        </StepsForm>
      </ProCard>
    </PageContainer >

  );
};