import {
  deleteOrderErpOrderZoNingDelete,
  getOrderErpOrderZoNingSelectAll,
} from '@/services';
import type { ProColumns } from '@ant-design/pro-components';
import { EditableProTable } from '@ant-design/pro-components';
import { Button, Popconfirm, PopconfirmProps, message } from 'antd';
import React, { useRef, useState } from 'react';
import '../index.less';
import { zoningItem, zoningShowItem } from './constant';
import Modal from './modal';

const waitTime = (time: number = 100) => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(true);
    }, time);
  });
};

function changeToShow(array: zoningItem[]) {
  console.log(JSON.parse(localStorage.getItem('userInfo')).username);
  const showArray: zoningShowItem[] = array.map((item) => {
    let orderProvinceShowList = '';
    let orderUserShowList = '';
    let orderUserNumberShowList: number[] = [];
    item.orderProvinceVoList.forEach((element, index) => {
      orderProvinceShowList += element.province;
      if (index < item.orderProvinceVoList.length - 1) {
        orderProvinceShowList += '、';
      }
    });

    item.orderUserVoList.forEach((event, index) => {
      orderUserShowList += event.userName;
      orderUserNumberShowList.push(event.uId);
      if (index < item.orderUserVoList.length - 1) {
        orderUserShowList += '、';
      }
    });

    if (orderUserShowList === '') {
      orderUserShowList = '全选';
      orderUserNumberShowList.push(0);
    }

    return {
      id: item.id,
      zoning: item.zoning,
      orderProvinceShowList,
      orderUserShowList,
      orderUserNumberShowList,
    };
  });
  return showArray;
}

export default () => {
  const [editableKeys, setEditableRowKeys] = useState<React.Key[]>([]);
  const [dataSource, setDataSource] = useState<readonly zoningItem[]>([]);
  const [position] = useState<'top' | 'bottom' | 'hidden'>('hidden');

  interface ActionType {
    reload: (resetPageIndex?: boolean) => void;
    reloadAndRest: () => void;
    reset: () => void;
    clearSelected?: () => void;
    startEditable: (rowKey: Key) => boolean;
    cancelEditable: (rowKey: Key) => boolean;
  }

  const ref = useRef<ActionType>({
    reload: () => {},
    reloadAndRest: () => {},
    reset: () => {},
    startEditable: () => {},
    cancelEditable: () => {},
  });

  function reload() {
    ref.current.reload();
  }

  const confirm: PopconfirmProps['onConfirm'] = async (id) => {
    await deleteOrderErpOrderZoNingDelete({
      data: id,
    });
    reload();
    message.success('删除成功');
  };

  const cancel: PopconfirmProps['onCancel'] = () => {
    message.error('取消删除');
  };

  const columns: ProColumns<zoningItem>[] = [
    {
      title: '区域名称',
      dataIndex: 'zoning',
      width: 200,
    },
    {
      title: '管辖省份',
      dataIndex: 'orderProvinceShowList',
      readonly: true,
      width: 600,
    },
    {
      title: '负责销售',
      key: 'state',
      dataIndex: 'orderUserShowList',
      valueType: 'select',
      ellipsis: true,
      width: 200,
    },
    {
      title: '操作',
      valueType: 'option',
      width: 200,
      render: (text, record) => [
        <>
          <Modal
            toReload={reload}
            option={'编辑'}
            needEditBody={record}
            key={record.id}
          />
          <Popconfirm
            title="删除此项"
            description="你确定你要删除此项吗?"
            onConfirm={() => {
              confirm(record.id);
            }}
            onCancel={cancel}
            okText="确定"
            cancelText="取消"
          >
            <Button>删除</Button>
          </Popconfirm>
        </>,
      ],
    },
  ];

  return (
    <EditableProTable<zoningItem>
      rowKey="id"
      className="table-index"
      deletePopconfirmMessage
      actionRef={ref}
      headerTitle={
        <Modal toReload={reload} option={'新增区域'} needEditBody={{}}></Modal>
      }
      maxLength={5}
      scroll={{
        x: 960,
      }}
      recordCreatorProps={
        position !== 'hidden'
          ? {
              position: position as 'top',
              record: () => ({ id: (Math.random() * 1000000).toFixed(0) }),
            }
          : false
      }
      loading={false}
      columns={columns}
      request={async () => {
        const res = await getOrderErpOrderZoNingSelectAll();
        if (res) {
          const initDataSource = changeToShow(res.data);
          return { data: initDataSource || [] };
        }
      }}
      value={dataSource}
      onChange={setDataSource}
      editable={{
        type: 'multiple',
        editableKeys,
        onSave: async (rowKey, data, row) => {
          console.log(rowKey, data, row);
          await waitTime(2000);
        },
        onChange: setEditableRowKeys,
      }}
    />
  );
};