import { Button, Form, Space } from "antd";
import { useState } from "react";
import Page from "zy-react-library/components/Page";
import Search from "zy-react-library/components/Search";
import Table from "zy-react-library/components/Table";
import { FORM_ITEM_RENDER_ENUM } from "zy-react-library/enum/formItemRender";
import useTable from "zy-react-library/hooks/useTable";
import { getLabelName } from "zy-react-library/utils";
import { ALARM_STATUS_OPTIONS } from "~/enumerate/constant";
import AlarmRecordView from "../View";

function AlarmRecordList(props) {
  const [form] = Form.useForm();
  const [detailOpen, setDetailOpen] = useState(false);
  const [currentId, setCurrentId] = useState("");
  const [fireRegionId, setFireRegionId] = useState(null);
  const [alarmRecordId, setAlarmRecordId] = useState(null);
  const { tableProps, getData } = useTable(props.alarmRecordList, {
    form,
    transform: formData => ({
      ...formData,
      alarmTimeStart: formData.alarmTime?.[0],
      alarmTimeEnd: formData.alarmTime?.[1],
      disposeTimeStart: formData.disposeTime?.[0],
      disposeTimeEnd: formData.disposeTime?.[1],
      statusList: [20, 30, 40],
    }),
  });

  const handleViewDetail = (record) => {
    setCurrentId(record.id);
    setDetailOpen(true);
  };

  return (
    <Page isShowAllAction={false}>
      <Search
        form={form}
        onFinish={getData}
        options={[
          { name: "sensorName", label: "传感器名称" },
          {
            name: "alarmTime",
            label: "报警时间",
            render: FORM_ITEM_RENDER_ENUM.DATE_RANGE,
          },
          {
            name: "status",
            label: "报警状态",
            render: FORM_ITEM_RENDER_ENUM.SELECT,
            items: ALARM_STATUS_OPTIONS,
          },
          {
            name: "disposeTime",
            label: "处置时间",
            render: FORM_ITEM_RENDER_ENUM.DATE_RANGE,
          },
          { name: "disposeUserName", label: "处置人" },
        ]}
      />
      <Table
        rowKey="id"
        columns={[
          { title: "传感器编码", dataIndex: "sensorCode" },
          { title: "传感器名称", dataIndex: "sensorName" },
          { title: "报警时间", dataIndex: "alarmTime" },
          { title: "报警描述", dataIndex: "alarmDesc", ellipsis: true },
          { title: "告警值", dataIndex: "currentValue" },
          { title: "报警级别", dataIndex: "alarmLevelName" },
          { title: "报警类型", dataIndex: "alarmTypeName" },
          {
            title: "处置人",
            dataIndex: "disposeUserName",
          },
          { title: "处置时间", dataIndex: "disposeTime" },
          {
            title: "报警状态",
            dataIndex: "status",
            render: (_, record) => getLabelName({ status: record.status, list: ALARM_STATUS_OPTIONS }),
          },
          {
            title: "操作",
            width: 100,
            // hidden: !props.permission("bjjlgl-info"),
            render: (_, record) => (
              <Space>
                <Button
                  type="link"
                  onClick={() => {
                    setFireRegionId(record.fireRegionId);
                    setAlarmRecordId(record.alarmRecordId);
                    handleViewDetail(record);
                  }}
                >
                  查看
                </Button>
              </Space>
            ),
          },
        ]}
        {...tableProps}
      />
      {detailOpen && (
        <AlarmRecordView
          open={detailOpen}
          currentId={currentId}
          fireRegionId={fireRegionId}
          alarmRecordId={alarmRecordId}
          type={1}
          alarmRecordInfo={props.alarmRecordInfo}
          onCancel={() => {
            setDetailOpen(false);
            setCurrentId("");
          }}
        />
      )}
    </Page>
  );
}

export default AlarmRecordList;
