import React, { useState, useEffect } from "react";
import {
  Table,
  Input,
  InputNumber,
  Popconfirm,
  Form,
  Typography,
  Button,
  message,
  Space,
  Divider,
  Modal,
  Card,
} from "antd";
import { cloneDeep } from "lodash";
import { KpiGroupSetteing } from "@/pages/performance/KpiGroupSetting/interface";
import { TargetType, TargetTypeEnum } from "@/pages/performance/entity";
import { render } from "react-dom";
import moment from "moment";
import { ReasonsEnum } from "../entity";
import { saveEvaImportData } from "../api";
import { history } from "umi";
import st from "./style.less";

const Column = Table.Column;

interface Props {
  visible: boolean;
  fileData: any;
  tarOnCancel: Function;
  setParams: Function;
  innerParams: any;
}
const TargetModal = ({ visible, fileData, tarOnCancel, setParams, innerParams }: Props) => {
  const [loading, setLoading] = useState<boolean>(false);
  const onOk = async (key: string) => {
    const pa = { key };
    setLoading(true);
    try {
      const { success } = await saveEvaImportData(pa);
      if (success) {
        setLoading(false);
        message.success(`数据上传成功`, 5);
        // 重新刷新列表
        setParams({ ...innerParams }, true);
        tarOnCancel && tarOnCancel();
      }
    } catch (error: any) {
      setLoading(false);
      message.error(error.message);
    }
  };
  return (
    <>
      <Modal
        title="导入数据详情"
        visible={visible}
        onCancel={() => tarOnCancel()}
        maskClosable={false}
        width={1500}
        onOk={() => onOk(fileData.key)}
        confirmLoading={loading}
      >
        <Table bordered dataSource={fileData.details} pagination={{ total: fileData.num }}>
          <Column title="归属人员" dataIndex="userName" align="center" render={(name) => <span>{name || "--"}</span>} />
          <Column title="归属门店" dataIndex="shopName" align="center" render={(name) => <span>{name || "--"}</span>} />
          <Column
            title="指标名称"
            dataIndex="indicatorName"
            align="center"
            render={(name) => <span>{name || "--"}</span>}
          />
          {/* <Column
            title="指标值"
            dataIndex="indicatorValue"
            align="center"
            render={(num, record: any) => (
              <span>
                {num !== undefined
                  ? `${num}${
                      record.dataType == 1 ? "台" : record.dataType == 2 ? "%" : record.dataType == 3 ? "元" : ""
                    }`
                  : "--"}
              </span>
            )}
          /> */}
          <Column
            title="考核周期"
            dataIndex="dataDate"
            align="center"
            render={(time: number) => (time ? moment(time).format("YYYY-MM-DD") : "--")}
          />
          <Column
            title="是否导入"
            dataIndex="errorType"
            align="center"
            render={(_: any, record: any) =>
              record.errorType ? <div className={st.no}>未导入</div> : <div className={st.yes}>已导入</div>
            }
          />
          <Column
            title="未导入原因"
            dataIndex="errorType"
            align="center"
            render={(_: any, record: any) => (record.errorType ? ReasonsEnum[record.errorType] : "--")}
          />
        </Table>
        <div>
          成功条数: <span style={{ color: "#20c688" }}>{fileData.successNum}</span> 条
        </div>
        <div>
          失败条数: <span style={{ color: "#f4333c" }}>{fileData.errorNum}</span> 条
        </div>
      </Modal>
    </>
  );
};

export default TargetModal;