FEV2 / fw-cms

import React, { useState, useEffect } from "react";
import { Table, Typography, Button, message, Card, Divider, Space } from "antd";
import AddIndicatorsModal from "./AddIndicatorsModal";
import { useStore } from "../index";
import { CompensateConfig } from "@/pages/performance/CompensateGroupConfig/interface";
import { OptionalMethod_Enum } from "../../entity";
import useInitail from "@/hooks/useInitail";
import { queryIndicatorsApi, queryPostIndicatorApi } from "../api";
import TargetModal from "./TargetModal";

interface Props {
  value?: any[];
  onChange?: Function;
  postId?: number;
  shopIds?: string;
}

type Item = CompensateConfig.Item;

const IndivatorsTable = ({ value, onChange, postId, shopIds }: Props) => {
  const [delay, setDelay] = useState(true);
  const {
    selectedSalaryIds,
    readOnly,
    setSelectedIndicators,
    setSelectedIndicatorsConds,
    setSelectedIndicatorsLadder,
    setCommissionParamAlias,
    setLadderParamAlias,
    setPreconditionAlias,
  } = useStore();
  const [tableData, setTableData] = useState<Item[]>(value || []);
  const [visible, setVisible] = useState(false);
  const [currentItem, setCurrentItem] = useState<Item>({});
  const [tarVisible, setTarVisible] = useState(false);
  const [tarCommissionParams, setTarCommissionParams] = useState<[]>([]);
  //fixData
  const [fixData, setFixData] = useState<any>([]);

  // const { data: allIndicatorsList } = useInitail(queryIndicatorsApi, [], null);
  const { data: indicatorsList, setParams } = useInitail(
    queryPostIndicatorApi,
    [],
    { postId, shopIds, applicableType: 2 },
    delay
  );

  useEffect(() => {
    if (postId && shopIds) {
      setParams({ postId, shopIds }, true);
      setDelay(false);
    }
  }, [postId, shopIds]);

  // 添加指标
  const addIndicators = () => {
    setFixData([]);
    if (!postId) {
      message.error("请先选择岗位");
      return;
    }
    if (!shopIds) {
      message.error("请先选择门店");
      return;
    }
    setVisible(true);
    setSelectedIndicators([]);
    setSelectedIndicatorsConds([]);
    setSelectedIndicatorsLadder([]);
    setCommissionParamAlias("");
    setLadderParamAlias("");
    setPreconditionAlias("");
  };
  const onCancel = () => {
    setVisible(false);
    setCurrentItem({});
  };
  useEffect(() => {
    if (Array.isArray(value)) {
      setTableData([...value]);
    }
  }, [value]);

  //  编辑
  const onEdit = (record: Item) => {
    setVisible(true);
    setCurrentItem({ ...record });
    console.log(record);
    if (record.commissionParams) {
      setSelectedIndicators((record.commissionParams || []).map((item) => item.indicatorCode));
    }
    if (record.conds) {
      setSelectedIndicatorsConds((record.conds || []).map((item) => item.indicatorCode));
    }
    if (record.ladderParams) {
      setSelectedIndicatorsLadder((record.ladderParams || []).map((item) => item.indicatorCode));
    }
  };

  // 删除
  const _onDelete = (record: Item, index: number) => {
    const tempData = [...(value || [])];
    const res = tempData.filter((item) => item.id !== record.id);
    //已选指标项同步删除
    selectedSalaryIds.splice(index, 1);
    onChange && onChange([...res]);
  };
  // 查看目标设置
  const lookTar = (record: any) => {
    setTarVisible(true);
    setTarCommissionParams(record);
  };
  const tarOnCancel = () => {
    setTarVisible(false);
  };
  const columns = [
    {
      title: "薪酬名称",
      dataIndex: "name",
      key: "name",
    },
    {
      title: "计算方式",
      dataIndex: "calMethod",
      key: "calMethod",
      render: (text: number) => (text ? OptionalMethod_Enum[text] : "--"),
    },
    {
      title: "目标设置",
      render: (value: any, record: Item) => {
        if (record.commissionParams && record.commissionParams.length > 0) {
          const newValue = record.commissionParams.filter((item: any) => item.targetValue);
          if (newValue.length === 1) {
            return newValue[0].targetType === 2
              ? `${newValue[0].targetValue}%`
              : newValue[0].targetType === 3
              ? `${newValue[0].targetValue}元`
              : `${newValue[0].targetValue}台`;
          } else if (newValue.length > 1) {
            return (
              <Button type="link" onClick={() => lookTar(newValue)}>
                查看
              </Button>
            );
          } else {
            return "--";
          }
        } else if (record.ladderParams && record.ladderParams.length > 0) {
          const newValue = record.ladderParams.filter((item: any) => item.targetValue);
          if (newValue.length === 1) {
            return newValue[0].targetType === 2
              ? `${newValue[0].targetValue}%`
              : newValue[0].targetType === 3
              ? `${newValue[0].targetValue}元`
              : `${newValue[0].targetValue}台`;
          } else if (newValue.length > 1) {
            return (
              <Button type="link" onClick={() => lookTar(newValue)}>
                查看
              </Button>
            );
          } else {
            return "--";
          }
        } else {
          return "--";
        }
      },
    },
    {
      title: "操作",
      key: "operation",
      render: (_: any, record: Item, index: number) => (
        <Space split={<Divider type="vertical" />}>
          <Typography.Link onClick={() => onEdit(record)}>编辑</Typography.Link>
          <Typography.Link onClick={() => _onDelete(record, index)}>删除</Typography.Link>
        </Space>
      ),
    },
  ];

  const getColumns = () => {
    const _columns = columns;
    if (readOnly) {
      _columns.pop();
    }
    return _columns;
  };
  return (
    <>
      <Card
        extra={
          <div style={{ display: "flex", justifyContent: "flex-end" }}>
            <Button type="link" onClick={() => addIndicators()} disabled={readOnly}>
              + 添加薪酬
            </Button>
          </div>
        }
      >
        <Table bordered dataSource={value || []} rowKey={(record: Item) => String(record.id)} columns={getColumns()} />
      </Card>
      <AddIndicatorsModal
        visible={visible}
        currentItem={currentItem}
        onCancel={onCancel}
        indicatorsList={indicatorsList}
        postId={postId}
        shopIds={shopIds}
        fixData={fixData}
        setFixData={setFixData}
        onOk={(values) => {
          if (!currentItem.id) {
            tableData.push(values);
            onChange && onChange(tableData);
          } else {
            const res = tableData.map((item) => (item.id === currentItem.id ? { ...values } : item));
            onChange && onChange(res);
          }
        }}
      />
      <TargetModal visible={tarVisible} tarCommissionParams={tarCommissionParams} tarOnCancel={tarOnCancel} />
    </>
  );
};
export default IndivatorsTable;