import SearchBox from '~/components/search-box';
import { Button, Checkbox, Form, Image, message, Modal, Table, Tooltip } from 'antd';
import {
  ArrowDownOutlined,
  ArrowUpOutlined,
  DownOutlined,
  PlusOutlined,
  RightOutlined,
} from '@ant-design/icons';
import { categoryListRespType } from '~/api/interface/categoryManage';
import { useEffect, useState } from 'react';
import { InterDataType, PaginationProps } from '~/api/interface';
import { CategoryManageAPI } from '~/api';
import EditableCell from '~/components/EditableCell';
import AddOrEditCategoryModal from './components/addOrEditCategoryModal';
import './index.scss';

type EditableTableProps = Parameters<typeof Table>[0];
type ColumnTypes = Exclude<EditableTableProps['columns'], undefined>;
//分类列表返回类型
type categoryType = InterDataType<categoryListRespType>['list'];
const CategoryList = () => {
  const [categoryTableForm] = Form.useForm<any>();
  //新增，编辑分类弹窗
  const [addOrEditCategoryModalShow, setAddOrEditCategoryModalShow] = useState<boolean>(false);
  const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);
  const [currentCategory, setCurrentCategory] = useState<categoryType[0]>();
  const [loading, setLoading] = useState<boolean>(false);
  // 编辑的行
  const [editingKey, setEditingKey] = useState<number[]>([]);
  //展开的行
  const [expandedRowKeys, setExpandedRowKeys] = useState<number[]>([]);

  const tableColumns: (ColumnTypes[number] & {
    editable?: boolean;
    dataIndex?: string;
    rules?: any;
    maxLength?: number;
    inputType?: string;
  })[] = [
    {
      title: '分类名称',
      dataIndex: 'name',
      editable: true,
      width: '20%',
      ellipsis: true,
      onHeaderCell: () => ({
        style: {
          textAlign: 'center',
        },
      }),
      rules: [{ required: true, message: '请输入分类名称' }],
      maxLength: 15,
      render: (text: string, record: any) => (
        <span
          style={{
            marginLeft: record.subDTOList && record.subDTOList.length != 0 ? '10px' : '24px',
          }}
        >
          {text}
        </span>
      ),
    },
    {
      title: '图片',
      align: 'center',
      dataIndex: 'icon',
      render: (url: string) => (url ? <Image src={url} width={40} height={40} /> : ''),
    },
    {
      title: '描述',
      align: 'center',
      dataIndex: 'description',
      editable: true,
      width: '20%',
      ellipsis: true,
      maxLength: 70,
      inputType: 'textArea',
      render: (text: string) => (
        <Tooltip placement='topLeft' title={<span>{text}</span>}>
          <span>{text}</span>
        </Tooltip>
      ),
    },
    {
      title: '创建时间',
      align: 'center',
      dataIndex: 'createTime',
    },
    {
      title: '操作',
      onHeaderCell: () => ({
        style: {
          textAlign: 'center',
        },
      }),
      onCell: () => ({
        style: {
          textAlign: 'right',
        },
      }),
      render: (_text: string, record: any) =>
        editingKey.some((id: number) => id === record.id) ? (
          <>
            <Button type='link' onClick={() => addChildCategorySubmit(record)}>
              确定
            </Button>
            <Button type='link' onClick={() => addChildCategoryCancel(record)}>
              取消
            </Button>
          </>
        ) : (
          <>
            {record.subDTOList ? (
              <Button type='link' onClick={() => addChildrenCategory(record)}>
                新增子分类
              </Button>
            ) : (
              ''
            )}
            <Button type='link' onClick={() => addOrEditCategoryModalShowClick(record)}>
              编辑
            </Button>
            <Button type='link' danger onClick={() => deleteCategory(record)}>
              删除
            </Button>
          </>
        ),
    },
  ];
  const mergedColumns = tableColumns.map((col: any) => {
    if (!col.editable) {
      return col;
    }
    return {
      ...col,
      onCell: (record: categoryType[0], index: number) => ({
        record,
        index,
        dataIndex: col.dataIndex,
        title: col.title,
        editing: editingKey.some((id: number) => id === record.id),
        rules: col.rules,
        maxLength: col.maxLength,
        inputType: col.inputType,
      }),
    };
  });
  const [tableData, setTableData] = useState<categoryType>([]);
  //分页
  const [pagination, setPagination] = useState<PaginationProps & { totalCount: number }>({
    pageNo: 1,
    pageSize: 10,
    totalCount: 0,
  });

  //获取分类列表
  const getCategoryList = () => {
    setLoading(true);
    CategoryManageAPI.getCategoryRespList({
      pageNo: pagination.pageNo,
      pageSize: pagination.pageSize,
    }).then(({ result }) => {
      setLoading(false);
      setTableData(result.list ? [...result.list] : []);
      pagination.totalCount = result.totalCount;
      setPagination(pagination);
    });
  };
  const paginationChange = (pageNo: number, pageSize: number) => {
    pagination.pageNo = pageNo;
    pagination.pageSize = pageSize;
    getCategoryList();
  };
  // 排序选择
  const onSelectChange = (record: categoryType[0]) => {
    const index: number = selectedRowKeys.findIndex((item: any) => item === record.id);
    if (index != -1) {
      selectedRowKeys.splice(index, 1);
      setSelectedRowKeys([...selectedRowKeys]);
    } else {
      setSelectedRowKeys([...selectedRowKeys, record.id]);
    }
  };
  //新增、编辑分类弹窗
  const addOrEditCategoryModalShowClick = (record?: categoryType[0] | any) => {
    if (record && !record.subDTOList) {
      setEditingKey([...editingKey, record.id]);
      const defaultFormVal = Object.getOwnPropertyNames(record).reduce((pre: any, cur: string) => {
        if (['name', 'description'].includes(cur)) {
          pre[cur + record.id] = record[cur];
        }
        return pre;
      }, {});
      categoryTableForm.setFieldsValue(defaultFormVal);
    } else {
      setAddOrEditCategoryModalShow(true);
      setCurrentCategory(record ? { ...record } : undefined);
    }
  };
  const addOrEditCategoryModalCancel = () => {
    setAddOrEditCategoryModalShow(false);
  };
  const addOrEditCategoryModalOk = () => {
    setAddOrEditCategoryModalShow(false);
    getCategoryList();
  };
  //删除分类
  const deleteCategory = (record: categoryType[0]) => {
    Modal.confirm({
      title: '分类删除',
      content: '确认删除这条分类?',
      onOk: () => {
        console.log('当前数据-->', record);
        CategoryManageAPI[record.subDTOList ? 'deletePrimaryCategory' : 'deleteSubCategory']({
          id: record.id,
        }).then(({ code }) => {
          if (code === '200') {
            message.success('删除成功');
            if (pagination.pageNo !== 1 && tableData.length === 1) {
              pagination.pageNo -= 1;
            }
            getCategoryList();
          }
        });
      },
    });
  };
  //新增子分类
  const addChildrenCategory = (record: categoryType[0]) => {
    const categoryItemIndex = tableData.findIndex((v) => v.id === record.id);
    if (categoryItemIndex !== -1) {
      const selfChildId: number = Math.random();
      tableData[categoryItemIndex].subDTOList = [
        ...tableData[categoryItemIndex].subDTOList,
        { id: selfChildId, name: '', description: '', categoryPrimaryId: record.id },
      ];
      tableData.splice(categoryItemIndex, 1, tableData[categoryItemIndex]);
      setTableData([...tableData]);
      setEditingKey([...editingKey, selfChildId]);
    }
    const isExpend: boolean = expandedRowKeys.some((key: number) => key === record.id);
    if (!isExpend) {
      setExpandedRowKeys([...expandedRowKeys, record.id]);
    }
  };
  //   展开监听
  const onExpand = (_expanded: boolean, record: categoryType[0]) => {
    const index = expandedRowKeys.findIndex((item: any) => item === record.id);
    if (index !== -1) {
      expandedRowKeys.splice(index, 1);
    } else {
      expandedRowKeys.push(record.id);
    }
    setExpandedRowKeys([...expandedRowKeys]);
  };
  //提交新增子分类
  const addChildCategorySubmit = (record: categoryType[0]['subDTOList'][0]) => {
    categoryTableForm
      .validateFields(['description' + record.id, 'name' + record.id])
      .then((values) => {
        CategoryManageAPI[record.name ? 'updateSubCategory' : 'addSubCategory']({
          categoryPrimaryId: record.categoryPrimaryId,
          name: values['name' + record.id],
          description: values['description' + record.id],
          id: record.name ? record.id : undefined,
        }).then(({ code }) => {
          if (code === '200') {
            message.success(record.name ? '编辑子分类成功' : '新增子分类成功');
            const editingKeyIndex = editingKey.findIndex((id) => id === record.id);
            if (editingKeyIndex !== -1) {
              editingKey.splice(editingKeyIndex, 1);
              setEditingKey([...editingKey]);
              getCategoryList();
            }
          }
        });
      });
  };
  //取消新增子分类
  const addChildCategoryCancel = (record: categoryType[0]['subDTOList'][0]) => {
    const tableIndex: number = tableData.findIndex((v) => v.id === record.categoryPrimaryId);
    if (tableIndex !== -1) {
      const subDTOIndex: number = tableData[tableIndex].subDTOList.findIndex(
        (v) => v.id === record.id,
      );
      if (subDTOIndex !== -1) {
        //新增下的取消
        if (!record.name) {
          tableData[tableIndex].subDTOList.splice(subDTOIndex, 1);
          tableData.splice(tableIndex, 1, tableData[tableIndex]);
          setTableData([...tableData]);
        }
        //新增、编辑下的取消
        const editKeyIndex = editingKey.findIndex((id) => id === record.id);
        editingKey.splice(editKeyIndex, 1);
        setEditingKey([...editingKey]);
        //新增下的取消
        if (tableData[tableIndex].subDTOList.length === 0 && !record.name) {
          const expandedRowKeysIndex = expandedRowKeys.findIndex(
            (id) => id === record.categoryPrimaryId,
          );
          expandedRowKeys.splice(expandedRowKeysIndex, 1);
          setExpandedRowKeys([...expandedRowKeys]);
        }
      }
    }
  };

  useEffect(() => {
    getCategoryList();
  }, []);

  return (
    <div className='category-list'>
      <SearchBox
        child={
          <>
            <Button
              icon={<PlusOutlined />}
              type='primary'
              onClick={() => addOrEditCategoryModalShowClick()}
            >
              新增分类
            </Button>
            <Button icon={<ArrowUpOutlined />} type='primary'></Button>
            <Button icon={<ArrowDownOutlined />} type='primary'></Button>
          </>
        }
      />
      <Form form={categoryTableForm} component={false}>
        <Table
          bordered
          rowSelection={{
            selectedRowKeys,
            hideSelectAll: true,
            renderCell: (_checked: boolean, record: categoryType[0]) => {
              return (
                <>{record.subDTOList ? <Checkbox onChange={() => onSelectChange(record)} /> : ''}</>
              );
            },
          }}
          loading={loading}
          rowKey='id'
          columns={mergedColumns}
          dataSource={tableData}
          rowClassName={(record: categoryType[0]) => {
            if (record.subDTOList) {
              return '';
            }
            return 'category-list-row-bg';
          }}
          pagination={{
            total: pagination.totalCount,
            pageSize: pagination.pageSize,
            current: pagination.pageNo,
            showSizeChanger: true,
            showQuickJumper: true,
            onChange: (page: number, pageSize: number) => paginationChange(page, pageSize),
            showTotal: (total, range) => `当前 ${range[0]}-${range[1]} 条记录 / 共 ${total} 条数据`,
          }}
          components={{
            body: {
              cell: EditableCell,
            },
          }}
          expandedRowKeys={expandedRowKeys}
          onExpand={(expanded: boolean, record: categoryType[0]) => onExpand(expanded, record)}
          expandable={{
            rowExpandable: (record) => {
              if (record.subDTOList && record.subDTOList.length != 0) {
                return true;
              }
              return false;
            },
            expandIcon: ({ expanded, onExpand, record }) => {
              if (expanded && record.subDTOList && record.subDTOList.length != 0) {
                return <DownOutlined onClick={(e) => onExpand(record, e)} />;
              }
              if (record.subDTOList && record.subDTOList.length != 0) {
                return <RightOutlined onClick={(e) => onExpand(record, e)} />;
              }
              return <></>;
            },
          }}
          childrenColumnName='subDTOList'
        />
      </Form>

      {/*新增，编辑分类*/}
      <AddOrEditCategoryModal
        open={addOrEditCategoryModalShow}
        onCancel={addOrEditCategoryModalCancel}
        onOK={addOrEditCategoryModalOk}
        currentCategory={currentCategory}
      />
    </div>
  );
};
export default CategoryList;
