import { Form } 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 AlarmRecordView from "~/components/AlarmRecord/View";

function ThresholdList(props) {
  const [form] = Form.useForm();
  const [detailOpen, setDetailOpen] = useState(false);
  const [currentId, setCurrentId] = useState("");
  const { tableProps, getData } = useTable(props.thresholdAlarmInfoList, {
    form,
    transform: formData => ({
      ...formData,
      alarmTimeStart: formData.alarmTime?.[0],
      alarmTimeEnd: formData.alarmTime?.[1],
      alarmSource: "THRESHOLD",
      status: 10,
    }),
  });

  return (
    <Page isShowAllAction={false}>
      <Search
        form={form}
        onFinish={getData}
        options={[
          { name: "sensorName", label: "传感器名称" },
          {
            name: "alarmTime",
            label: "报警时间",
            render: FORM_ITEM_RENDER_ENUM.DATE_RANGE,
          },
        ]}
      />
      <Table
        rowKey="id"
        columns={[
          { title: "传感器编码", dataIndex: "sensorCode" },
          { title: "传感器名称", dataIndex: "sensorName" },
          { title: "报警时间", dataIndex: "alarmTime" },
          { title: "报警描述", dataIndex: "alarmDesc", ellipsis: true },
          { title: "告警值", dataIndex: "currentValue" },
          {
            title: "操作",
            width: 100,
            hidden: !props.permission("yzbjxx-info"),
            render: (_, record) => (
              <a
                onClick={() => {
                  setCurrentId(record.id);
                  setDetailOpen(true);
                }}
              >
                查看
              </a>
            ),
          },
        ]}
        {...tableProps}
      />
      {detailOpen && (
        <AlarmRecordView
          open={detailOpen}
          currentId={currentId}
          alarmRecordInfo={props.thresholdAlarmInfoInfo}
          onCancel={() => {
            setDetailOpen(false);
            setCurrentId("");
          }}
        />
      )}
    </Page>
  );
}

export default ThresholdList;
