import BlueTable from '@/components/BlueTable';
import Tabs from '@/components/Tabs';
import { BaseDate } from '@/pages/GlobalModalServices/components/BaseDatePicker';
import { ChildrenModalMethods } from '@/pages/GlobalModalServices/type';
import services from '@/services';
import { Button } from 'antd';
import type { ColumnsType } from 'antd/es/table';
import dayjs from 'dayjs';
import React, { useEffect, useRef, useState } from 'react';
import styles from './index.less';

interface DataType {
  time: string;
  deviceName: string;
  alarmType: string;
  description: string;
  status: string;
  closeTime: string;
}

/** @name 列表  */
const ListTable: React.FC<{
  modalDispatch: ChildrenModalMethods;
  date: BaseDate;
}> = (props) => {
  const { modalDispatch, date } = props;
  const [dataSource, setDataSource] = useState<DataType[]>([]);

  const [active, setActive] = useState('1');
  const pageInfo = useRef<{
    currentPage: number;
    pageSize: number;
    total: number;
  }>({
    currentPage: 0,
    pageSize: 10,
    total: 0,
  });

  const columns: ColumnsType<DataType> = [
    {
      title: '告警发生时间',
      dataIndex: 'startTime',
    },
    {
      title: '设备名称',
      dataIndex: 'deviceName',
    },
    {
      title: '故障类型',
      dataIndex: 'type',
    },
    {
      title: '接单时间',
      dataIndex: 'endTime',
    },
    {
      title: '维护队名称',
      dataIndex: 'whName',
    },
    {
      title: '工单状态',
      dataIndex: 'status',
      render: (text: string) => {
        return (
          <div
            style={{
              color:
                text === '已完成' ? 'rgb(39, 255, 188)' : 'rgb(254, 173, 11)',
            }}
          >
            {text === '待确认' ? '处置中' : '已处置'}
          </div>
        );
      },
    },
    {
      title: '操作',
      render: (_: any, record: any) => {
        return (
          <Button
            type="text"
            onClick={() => {
              modalDispatch.push(
                'LightingFaultDetails',
                {
                  props: { metaData: record },
                },
                1,
              );
            }}
            style={{ color: 'rgb(36, 164, 255)', fontSize: 20 }}
          >
            详情
          </Button>
        );
      },
    },
  ];

  const getData = async (page: number) => {
    const status = active === '1' ? undefined : active;
    services.DataBase.getSjdzInfoData({
      typeCode: 'hyzm-zm-gzlb',
      params: {
        pageSize: '10',
        pageNo: page,
        startTime: date.value.start,
        endTime: date.value.end,
        orderStatus: status,
      },
    }).then((res) => {
      if (res.code === 200) {
        const { list, page } = res.data?.data?.records[0];

        const data = list.map((v: any) => {
          return {
            deviceName: v.deviceName,
            type: v.deviceType,
            startTime: dayjs(v.alarmHappenTime).format('YYYY-MM-DD HH:mm:ss'),
            whName: v.maintenanceTeam,
            endTime: dayjs(v.orderGenerateTime).format('YYYY-MM-DD HH:mm:ss'),
            status: v.orderStatus,
            ...v,
          };
        });
        pageInfo.current = {
          currentPage: page.currentPage,
          pageSize: page.pageSize,
          total: page.total,
        };

        setDataSource(data);
      }
    });
  };

  useEffect(() => {
    getData(0);
  }, [date, active]);

  return (
    <div className={styles.container}>
      <Tabs
        onChange={(type) => {
          setActive(type);
        }}
        items={[
          {
            label: '全部',
            key: '1',
          },
          {
            label: '处置中',
            key: '待确认',
          },
          {
            label: '已处置',
            key: '已完成',
          },
        ]}
      />

      <BlueTable
        columns={columns}
        dataSource={dataSource}
        size="large"
        scroll={{ y: 540 }}
        pagination={{
          total: pageInfo.current.total,
          pageSize: 10,
          showSizeChanger: false,
          onChange: (page) => {
            getData(page - 1);
          },
        }}
      ></BlueTable>
    </div>
  );
};

export default ListTable;
