import ButtonConfirm from '@/components/ButtomConfirm';
import { RESPONSE_CODE } from '@/constants/enum';
import {
  postOrderErpMessageQueryMyMessage,
  postOrderErpMessageRead,
  postOrderErpMessageReadAll,
} from '@/services';
import { formatDateTime, getUserInfo } from '@/utils';
import { UserOutlined } from '@ant-design/icons';
import {
  Avatar,
  Badge,
  Button,
  Checkbox,
  Drawer,
  Flex,
  List,
  message,
} from 'antd';
import { useEffect, useState } from 'react';

export default ({ setVisible }) => {
  const userInfo = getUserInfo();
  const [current, setCurrent] = useState<number>(1); //当前页码
  const [total, setTotal] = useState(0);
  const [messageListData, setMessageListData] = useState<any[]>([]); //列表数据
  const [loading, setLoading] = useState(false);
  const [initLoading, setInitLoading] = useState(true);
  const [onlyUnread, setOnlyUnread] = useState(false);
  const [readFlagList, setReadFlagList] = useState<any[]>([]); //消息未读标识

  /**
   * 获取消息列表
   */
  async function getMessageListData() {
    setLoading(true);
    let res = await postOrderErpMessageQueryMyMessage({
      data: {
        username: userInfo.username,
        current: current,
        isReaded: onlyUnread ? onlyUnread : null,
      },
    }).finally(() => {
      setLoading(false);
    });
    if (res && res.result === RESPONSE_CODE.SUCCESS) {
      setMessageListData([...messageListData, ...res?.data?.data]);
      let reqReadNumList = res?.data?.data?.map((item: any) => {
        return item.isReaded;
      });

      setReadFlagList([...readFlagList, ...reqReadNumList]);
      setTotal(res?.data?.total);
    }
  }

  /**
   * 跳转到订单列表
   */
  function toOrderList(mainOrderIds: any) {
    window.open('/order/order?id=' + mainOrderIds.join(','), '_blank');
  }

  /**
   * 仅展示未读
   */
  function onlyUnreadChange() {
    setOnlyUnread(!onlyUnread);
    setCurrent(1);
    setMessageListData([]);
    setReadFlagList([]);
  }

  /**
   * 仅展示未读
   */
  async function read(ids: any[]) {
    let res = await postOrderErpMessageRead({
      data: ids,
    });

    if (res && res.result === RESPONSE_CODE.SUCCESS) {
      message.success('已读');
      return true;
    }

    return false;
  }

  /**
   * 全部标记为已读
   */
  async function readAll() {
    let res = await postOrderErpMessageReadAll();
    if (res && res.result === RESPONSE_CODE.SUCCESS) {
      message.success(res.message);
      let newReadFlagList = readFlagList.map(() => true);
      setReadFlagList(newReadFlagList);
    }
  }

  const loadMore =
    !initLoading && !loading && messageListData.length < total ? (
      <div
        style={{
          textAlign: 'center',
          marginTop: 12,
          height: 32,
          lineHeight: '32px',
        }}
      >
        <Button
          onClick={() => {
            setCurrent(current + 1);
          }}
        >
          加载更多
        </Button>
      </div>
    ) : messageListData.length > 0 && messageListData.length >= total ? (
      <span>没有更多消息了</span>
    ) : null;

  useEffect(() => {
    getMessageListData().finally(() => {
      setInitLoading(false);
    });
  }, [onlyUnread, current]);

  return (
    <>
      <Drawer
        title="消息列表"
        onClose={() => {
          setVisible(false);
        }}
        open={true}
        width={450}
        styles={{ body: { paddingTop: 0 } }}
      >
        <Flex align="center" justify="space-between">
          <div>
            <Checkbox onChange={onlyUnreadChange} checked={onlyUnread}>
              仅展示未读
            </Checkbox>
          </div>

          <ButtonConfirm
            title={'是否全部标记为已读？'}
            text={'全部标记为已读'}
            className="p-0"
            onConfirm={readAll}
            placement="bottomLeft"
          />
        </Flex>

        <List
          className="demo-loadmore-list"
          loading={initLoading}
          itemLayout="horizontal"
          loadMore={loadMore}
          dataSource={messageListData}
          renderItem={(item: any, index: any) => (
            <List.Item key={item.id}>
              <List.Item.Meta
                avatar={
                  <Badge dot={!readFlagList[index]}>
                    <Avatar shape="square" icon={<UserOutlined />} />
                  </Badge>
                }
              />
              <Flex
                vertical
                className="w-full hover:cursor-pointer"
                onClick={async () => {
                  toOrderList(item.mainOrderIds);

                  let readSuccess = await read([item.mesUsrRelId]);
                  if (readSuccess) {
                    let newUnreadNumList = [...readFlagList];
                    newUnreadNumList[index] = true;
                    setReadFlagList([...newUnreadNumList]);
                  }
                }}
              >
                <Flex>
                  <div>
                    {item.content}
                    {/* <span className="text-[#8C8C8C]">
                  （点击跳转到对应主订单）
                </span> */}
                  </div>
                </Flex>
                <Flex>
                  <span className="text-xs text-[#8C8C8C] pt-1">
                    {formatDateTime(item.createTime)}
                  </span>
                </Flex>
              </Flex>
            </List.Item>
          )}
        />
      </Drawer>
    </>
  );
};