import PageContent from '@/components/PageContent';
import TabsContent from '@/components/TabsContent';
import { getNotificationList } from '@/services/message';
import { UnityAction } from '@/utils/utils';
import { useParams, useRequest, useSearchParams } from '@umijs/max';
import { Button, Spin } from 'antd';
import dayjs from 'dayjs';
import { useState } from 'react';
import styles from './index.less';
const icon1 = require('@/assets/message/work.png');
const icon2 = require('@/assets/message/check.png');
const icon3 = require('@/assets/message/warning.png');

const MessageCenter = () => {
  const { projectId } = useParams();
  const [searchParams] = useSearchParams();
  const [tab, setTab] = useState('2');
  //, msgType: 工况：11， 自检：12，  预警：13
  const { data, run, loading } = useRequest(() =>
    getNotificationList({ projectId, msgType: 11 }, { manual: true }),
  );

  const {
    data: dataWarning,
    run: runWarning,
    loading: loadingWarning,
  } = useRequest(() =>
    getNotificationList({ projectId, msgType: 13 }, { manual: true }),
  );

  const {
    data: dataSelf,
    run: runSelf,
    loading: loadingSelf,
  } = useRequest(() => getNotificationList({ projectId, msgType: 12 }));

  const handleTabsChange = (tab) => {
    setTab(tab);
    switch (tab) {
      case '1':
        run();
        break;
      case '2':
        runSelf();
        break;
      case '3':
        runWarning();
        break;
    }
  };

  const handleReadClick = () => {
    UnityAction.sendMsg('notiReadAll', '');
  };

  const handlerSeeClick = (item) => {
    if (tab === '1') {
      // if (item?.MandateId) {
      UnityAction.sendMsg('OpenTaskModal', `mandate_id=${item.MandateId}`);
      // }
    } else {
      UnityAction.sendMsg('notiZiJian', item.PatrolId);
    }
  };

  const RenderContent = ({ loading, data, icon }) => {
    return (
      <Spin spinning={loading}>
        <div className="content-tab">
          {data?.map((item) => {
            const time = item?.CreatedOn
              ? dayjs(item.CreatedOn).format('YYYY-MM-DD HH:mm')
              : '';
            return (
              <div key={item.ID} className={`card-box ${styles.itemContent}`}>
                <div className={styles.left}>
                  <img className={styles.img} src={icon} />
                  <div>
                    <div className={styles.text}>{item.MsgBody}</div>
                    <div className={styles.time}>{time}</div>
                  </div>
                </div>

                <div className={styles.right}>
                  <div
                    className={
                      item?.ReadStatus ? styles.redPoint : styles.nonePoint
                    }
                  />
                  <Button
                    className={styles.btn}
                    type="primary"
                    onClick={() => handlerSeeClick(item)}
                  >
                    查看
                  </Button>
                </div>
              </div>
            );
          })}
        </div>
      </Spin>
    );
  };
  return (
    <PageContent tabs>
      <TabsContent
        center={false}
        defaultActiveKey={searchParams.get('type') || '2'}
        onChange={handleTabsChange}
        items={[
          {
            label: `系统自检`,
            key: '2',
            children: (
              <RenderContent
                loading={loadingSelf}
                data={dataSelf?.list}
                icon={icon2}
              />
            ),
          },
          {
            label: `预警数据`,
            key: '3',
            children: (
              <RenderContent
                loading={loadingWarning}
                data={dataWarning?.list}
                icon={icon3}
              />
            ),
          },
          {
            label: `水厂工况`,
            key: '1',
            children: (
              <RenderContent loading={loading} data={data?.list} icon={icon1} />
            ),
          },
        ]}
      />
      <div className={styles.allRead} onClick={handleReadClick}>
        全部已读
      </div>
    </PageContent>
  );
};
export default MessageCenter;