import React, { useState } from "react";
import { PageHeaderWrapper } from "@ant-design/pro-layout";
import { Button, Card, Table, Row, Space, Typography, Divider, Popconfirm, message } from "antd";
import usePagination from "@/hooks/usePagination";
import { history } from "umi";
import { deleteSalaryGroup, quashSalaryGroup, salaryGroupDraftApi } from "../api";
import DraftFilter from "./DraftFilter";
import { DraftStatusEnum } from "../entity";
import { KpiGroupSetteing } from "@/pages/performance/KpiGroupSetting/interface";
import EmployeesModal from "./EmployeesModal";
import { CompensateConfig } from "@/pages/performance/CompensateGroupConfig/interface";
import moment from "moment";
import ShopModal from "./ShopModal";
import DetailModal from "../../KpiGroupSetting/components/DetailModal";

const Column = Table.Column;
interface Props {
  type: number;
}

export default ({ type }: Props) => {
  const { loading, list, paginationConfig, setParams, innerParams } = usePagination(salaryGroupDraftApi, { status: 2, type: 3 });
  // 查看适用员工
  const [employeeModal, setEmployeeModal] = useState<{
    visible: boolean;
    record?: CompensateConfig.GroupListItems;
  }>({
    visible: false,
    record: {},
  });
  const [visibleDetail, setVisibleDetail] = useState(false);
  const [item, setItem] = useState<any>({});
  const [shopModal, setShopModal] = useState<{
    visible: boolean;
    record?: CompensateConfig.GroupListItems;
  }>({
    visible: false,
    record: {},
  });

  const _onCancel = () => {
    setEmployeeModal({ visible: false });
  };
  const shopOnCancel = () => {
    setShopModal({ visible: false });
  };

  //删除
  const onDelet = async (id: number) => {
    const pa = { id };
    try {
      const { success } = await deleteSalaryGroup(pa);
      if (success) {
        message.success("删除成功", 5);
        // 重新刷新列表
        setParams({ ...innerParams }, true);
      }
    } catch (error: any) {
      message.error(error.message);
    }
  };

  //撤销审批
  const onQuash = async (id: number) => {
    const pa = { id };
    try {
      const { success } = await quashSalaryGroup(pa);
      if (success) {
        message.success("撤销审批成功", 5);
        // 重新刷新列表
        setParams({ ...innerParams }, true);
      }
    } catch (error: any) {
      message.error(error.message);
    }
  };

  return (
    <>
      <Row justify="space-between" style={{ marginBottom: 10 }}>
        <DraftFilter setParams={setParams} innerParams={innerParams} />

        <Button
          type="primary"
          onClick={() => {
            history.push(`/morax/compensateGroupConfig/edit`);
          }}
        >
          新增
        </Button>
      </Row>
      <Table loading={loading} rowKey={(row) => `id${row.draftId}`} dataSource={list} pagination={paginationConfig}>
        <Column title="薪酬组名称" dataIndex="name" align="center" render={(name) => name || ""} />
        <Column title="岗位" dataIndex="postName" align="center" />
        <Column
          title="薪酬项目（项）"
          dataIndex="projectNum"
          align="center"
          render={(name) => <span>{name || "--"}</span>}
        />
        <Column
          title="适用门店"
          dataIndex="shopNames"
          align="center"
          render={(_: any, record: CompensateConfig.GroupListItems) => (
            <Button type="link" onClick={() => setShopModal({ visible: true, record })}>
              查看
            </Button>
          )}
        />
        <Column
          title="适用员工"
          align="center"
          render={(_: any, record: CompensateConfig.GroupListItems) => (
            <Button type="link" onClick={() => setEmployeeModal({ visible: true, record })}>
              查看
            </Button>
          )}
        />
        <Column
          title="状态"
          align="center"
          dataIndex="status"
          render={(text: number) => (text ? DraftStatusEnum[text] : "--")}
        />
        <Column
          title="生效时间"
          align="center"
          dataIndex="beginTime"
          render={(time: number) => (time ? moment(time).format("YYYY-MM-DD") : "--")}
        />
        <Column
          title="失效时间"
          align="center"
          dataIndex="overTime"
          render={(time: number) => (time ? moment(time).format("YYYY-MM-DD") : "--")}
        />
        <Column
          title="操作"
          width={180}
          align="center"
          render={(_: any, record: KpiGroupSetteing.KpiGroupListItems) => {
            console.log(record);
            return (
              <Space split={<Divider type="vertical" />}>
                {record.draftStatus == 2 || record.draftStatus == 3 ? (
                  <Typography.Link
                    onClick={() => {
                      setVisibleDetail(true);
                      setItem(record);
                    }}
                  >
                    流程进度
                  </Typography.Link>
                ) : null}
                {record.draftStatus == 2 ? (
                  <Typography.Link
                    onClick={() => {
                      history.push(`/morax/compensateGroupConfig/edit/${record.draftId}/true/${type}`);
                    }}
                  >
                    查看
                  </Typography.Link>
                ) : null}
                {record.draftStatus == 3 || record.draftStatus == 1 || record.draftStatus == 5 ? (
                  <Typography.Link
                    onClick={() => {
                      history.push(`/morax/compensateGroupConfig/edit/${record.draftId}/false/${type}`);
                    }}
                  >
                    {`${record.draftStatus == 3 ? "重新" : ""}编辑`}
                  </Typography.Link>
                ) : null}

                {record.draftStatus == 3 || record.draftStatus == 1 || record.draftStatus == 5 ? (
                  <Popconfirm
                    title="确定删除，提交后不可更改?"
                    onConfirm={() => onDelet(record.draftId)}
                    okText="确定"
                    cancelText="取消"
                  >
                    <Typography.Link>删除</Typography.Link>
                  </Popconfirm>
                ) : null}
                {record.draftStatus == 2 ? (
                  <Popconfirm
                    title="确定撤销审批，提交后不可更改?"
                    onConfirm={() => onQuash(record.draftId)}
                    okText="确定"
                    cancelText="取消"
                  >
                    <Typography.Link>撤销审批</Typography.Link>
                  </Popconfirm>
                ) : null}
              </Space>
            );
          }}
        />
      </Table>
      <EmployeesModal employeeModal={employeeModal} onCancel={_onCancel} />
      <ShopModal shopModal={shopModal} onCancel={shopOnCancel} />
      <DetailModal visible={visibleDetail} item={item} onCancel={() => setVisibleDetail(false)} />
    </>
  );
};