import React, { useState } from "react";
import {
  Popconfirm,
  Select,
  Modal,
  Form,
  message,
  Button,
  Card,
  Table,
  Space,
} from "antd";
import _ from "lodash";
import { systemListApi } from "@/pages/admin/Privilege/api";
import usePagination from "@/hooks/usePagination";
import { getAllRoleCodeApi } from "@/common/api";
import useInitial from "@/hooks/useInitail";
import { common } from "@/typing/common";
import CreateItem from "./components/CreateItem";
import DescriptionList from "@/components/DescriptionList";
import { PageHeaderWrapper } from "@ant-design/pro-layout";
import { approvalConditionList, deleteApprovalCondition } from "./api";
import { Condition_Type_Enum, Judge_Rule_Enum } from "./entity";
import { history } from "umi";

const { Option } = Select;
const { Description } = DescriptionList;
const { Column } = Table;

const layout = {
  labelCol: { span: 4 },
  wrapperCol: { span: 20 },
};

interface Props extends common.ConnectProps {}
export default function PreSetting({ match }: Props) {
  const { approvalNo, approvalConfigId } = match.params;
  //编辑，新增条件设置
  const [item, setItem] = useState<PreSetting.Item>({
    visible: false,
    id: undefined,
  });

  const { data, loading, setLoading } = useInitial(
    approvalConditionList,
    [],
    approvalConfigId
  );

  const confirm = (id: number) => {
    deleteApprovalCondition(id)
      .then((res) => {
        message.success("删除成功！");
        setLoading(true);
      })
      .catch((err) => message.error(err.message));
  };

  return (
    <PageHeaderWrapper title="预设条件">
      <Card>
        <DescriptionList size="large" title="审批配置" col={1}>
          <Description term="审批编号">{approvalNo || ""}</Description>
        </DescriptionList>
        <div style={{ height: 15 }} />
      
        <div
          style={{
            marginBottom: 20,
            display: "flex",
            justifyContent: "flex-end",
          }}
        >
          <Button type="primary" onClick={() => setItem({ visible: true })}>
            新增
          </Button>
        </div>

        <Table
          dataSource={data}
          rowKey={(record) => `id_${record.id}`}
          loading={loading}
          scroll={{ x: 500, y: 350 }}
        >
          <Column
            width="20%"
            title="条件名称"
            dataIndex="name"
            align="center"
          />
          <Column
            width="20%"
            title="参数名称"
            dataIndex="paramName"
            align="center"
          />
          <Column
            width="10%"
            title="单位"
            dataIndex="unit"
            align="center"
            render={(text) => <span>{text || "--"}</span>}
          />
          <Column
            width="20%"
            title="条件类型"
            dataIndex="type"
            align="center"
            render={(text) => (
              <span>{text ? Condition_Type_Enum[text] : "--"}</span>
            )}
          />
          <Column
            width="20%"
            title="判断规则"
            align="center"
            dataIndex="judgeRule"
            render={(text) => (
              <span>{text ? Judge_Rule_Enum[text] : "--"}</span>
            )}
          />
          <Column
            width="10%"
            title="操作"
            align="center"
            render={(text, record: PreSetting.ConditionListItems) => (
              <Space>
                <Button
                  type="link"
                  size="small"
                  onClick={() => {
                    setItem({
                      visible: true,
                      id: record.id,
                      currentItem: record,
                    });
                  }}
                >
                  编辑
                </Button>
                <Popconfirm
                  title="确定删除?"
                  onConfirm={() => record.id && confirm(record.id)}
                  okText="确定"
                  cancelText="取消"
                >
                  <Button type="link" danger size="small">
                    删除
                  </Button>
                </Popconfirm>
              </Space>
            )}
          />
        </Table>
        <div style={{ display: "flex", justifyContent: "center" }}>
          <Button
            type="primary"
            style={{ width: 200, height: 40 }}
            loading={loading}
            onClick={() => {
              history.goBack();
            }}
          >
            返回
          </Button>
        </div>
      </Card>
      <CreateItem
        item={item}
        setItem={setItem}
        approvalConfigId={approvalConfigId}
        setListLoading={setLoading}
      />
    </PageHeaderWrapper>
  );
}