import React, { useState, useRef, useEffect } from "react";
import {
  message,
  Pagination,
  Table,
  Space,
  Modal,
  Button,
  Tabs,
  Descriptions,
  Input,
  Steps,
  Select,
  Image,
  Timeline,
  Popover
} from "antd";
import { dictionary } from "@/config/common";
import ajax from "@/services";
import { TableModule } from "@/components";
import "./index.scss";

const { TextArea } = Input;

function BillingRule() {
  // 详情弹窗
  const [detailVisible, setDetailVisible] = useState(false);
  // 列表数据
  const [tableData, setTableData] = useState([]);
  // 数据总数
  const [total, setTotal] = useState(0);
  // 详情数据
  const [detailData, setDetailData] = useState({});
  // 初始搜索条件
  const initFormData = {
    operator: "0",
    rule_name: "",
  };

  const columns = [
    {
      title: "运营商名称",
      dataIndex: "operator",
      key: "operator",
      align: "center",
    },
    {
      title: "规则名称",
      dataIndex: "plate",
      key: "plate",
      align: "center",
    },
    {
      title: "规则编码",
      dataIndex: "plate_color",
      key: "plate_color",
      align: "center",
    },
    {
      title: "创建人",
      dataIndex: "berth_id",
      key: "berth_id",
      width: 100,
      align: "center",
    },
    {
      title: "创建时间",
      dataIndex: "in_time",
      key: "in_time",
      align: "center",
    },
    {
      title: "操作",
      dataIndex: "operation",
      key: "operation",
      align: "center",
      fixed: "right",
      width: 100,
      render: (text, record, index) => {
        return (
          <>
            <Button type="primary" onClick={() => openModal(index, record)}>
              详情
            </Button>
          </>
        )

      },
    },
  ];

  const formSearch = [
    {
      name: "operator",
      type: "Select",
      label: "商户名称",
      defaultValue: "0",
      placeholder: "请选择商户名称",
    },
    {
      name: "rule_name",
      type: "Input",
      label: "规则名称",
      placeholder: "请输入出场收费员",
    },
    {
      name: "timePeriod",
      type: "RangePicker",
      label: "时间段",
    },
  ];

  // 打开弹窗
  const openModal = (index, record) => {
    setDetailData(record)
    setDetailVisible(true);
  }

  // 检索
  const search = (params) => {
    ajax.getParkingList(params).then((res) => {
      if (res.status === 20000) {
        setTableData(res.data.list);
        setTotal(res.data.total);
      } else {
        message.error(res.message)
      }
    });
  }

  const handelAdd = () => {
    setDetailVisible(true)
  }

  return (
    <>
      <TableModule
        showSerial={true}
        isExport={false}
        diyButton={
          <Button
            type="primary"
            onClick={handelAdd}
          >
            新增
          </Button>
        }
        columns={columns}
        tableData={tableData}
        formSearch={formSearch}
        pagename="停车记录查询"
        pageName={'billingRule'}
        initFormData={initFormData}
        total={total}
        search={search}
        exportUrl="/api/bpm/record/get_record_export"
      />
      <Modal
        open={detailVisible}
        width={1500}
        className="totalModal"
        onCancel={() => {
          setDetailVisible(false);
        }}
        destroyOnClose
      >

      </Modal>
    </>
  );
}

export default BillingRule;