import { Button, Table, Select, Tag, Input } from "antd";
import { useState } from "react";
import { CaretDownOutlined, CaretUpOutlined } from "@ant-design/icons";
import ScreenPage from "@/components/ScreenPage";
import Flex from "@/components/Flex";
import Common from "@/utils/Common";
import upSrc from "@/assets/image/up.png";
import downSrc from "@/assets/image/down.png";
import "./index.less";

export const totalScore = [
  {
    label: "总分",
    value: "total",
  },
  {
    label: "语数外",
    value: "chineseThree",
  },
  {
    label: "语数外+物化",
    value: "chineseFive",
  },
  {
    label: "语数",
    value: "chineseTwo",
  },
  {
    label: "语文",
    value: "chinese",
  },
  {
    label: "数学",
    value: "math",
  },
  {
    label: "英语",
    value: "english",
  },
  {
    label: "物理",
    value: "physics",
  },
  {
    label: "化学",
    value: "chemistry",
  },
];

export const Tags = ({ titles = [], onClose }) => {
  if (!titles || !titles.length) {
    return null;
  }
  return (
    <div className="tag-container">
      {titles.map((item, index) => (
        <Tag
          style={{ marginLeft: 8 }}
          key={index}
          closable
          onClose={(e) => {
            e.preventDefault();
            if (titles.length == 1) return;
            onClose?.(index, item);
          }}
        >
          {item.name}
        </Tag>
      ))}
    </div>
  );
};

export const TableTitle = ({
  title,
  // subtitle,
  hasClass = false,
  isTags = false,
  hasAllCity = false,
  hasOnline = false,
  onChangeAllPro = () => {},
}) => {
  const [showSearchAll, setShowSearchAll] = useState(false); //筛选框
  const [tagTitles, setTagTitles] = useState([
    { name: "2027届*高一上*入学考试" },
  ]);
  const [num, setnum] = useState({
    allCity: 50,
    online: 35,
    noLine: 65,
  });
  const [subtitle, setSubtitle] = useState("2027届*高一上*入学考试");

  // 添加处理删除的函数
  const handleTagClose = (index) => {
    setTagTitles((prevTags) => prevTags.filter((_, i) => i !== index));
  };
  return (
    <>
      {/* {showSearchAll && ( */}
      <ScreenPage
        isShow={showSearchAll}
        isSingle={!isTags}
        onChange={(e) => {
          let result = [];

          // 遍历对象的键值对
          for (let key in e) {
            if (e.hasOwnProperty(key)) {
              // 将当前数组添加到结果数组中
              result.push(e[key]);
            }
          }
          let list = Common.cartesianProduct(...result);
          if (isTags) {
            setTagTitles(list);
          } else {
            setSubtitle(list[0].name);
          }
          setShowSearchAll(!showSearchAll);
        }}
      />
      {/* )} */}
      <div className="table-title-wrapper">
        <div className="title-content">
          <span className="title">{title}: </span>
          {isTags ? (
            <Tags titles={tagTitles} onClose={handleTagClose} />
          ) : (
            <h3>{subtitle}</h3>
          )}
          {hasClass && (
            <Select
              placeholder="总分"
              style={{ marginLeft: 12, width: 120 }}
              options={totalScore}
              allowClear
              onChange={(e, option) => {
                onChangeAllPro?.(e, option);
              }}
            />
          )}
        </div>
        <Flex>
          <Flex alignItems="center" style={{ marginRight: 12 }}>
            {hasAllCity && (
              <Flex alignItems="center" style={{ marginRight: 12 }}>
                全市前&nbsp;&nbsp;
                <Input
                  style={{
                    padding: "2px 8px",
                    border: "1px solid #c0c0c0",
                    borderRadius: 5,
                    cursor: "pointer",
                    color: "#c0c0c0",
                    width: 80,
                  }}
                  min={1}
                  placeholder="请输入"
                  value={num.allCity}
                  type="number"
                  onChange={(e) => {
                    setnum((pre) => ({ ...pre, allCity: e.target.value }));
                  }}
                />{" "}
                &nbsp;&nbsp;名&nbsp;&nbsp;
              </Flex>
            )}
            {hasOnline && (
              <Flex alignItems="center">
                上线&nbsp;&nbsp;
                <Input
                  style={{
                    padding: "2px 8px",
                    border: "1px solid #c0c0c0",
                    borderRadius: 5,
                    cursor: "pointer",
                    color: "#c0c0c0",
                    width: 80,
                  }}
                  min={1}
                  placeholder="请输入"
                  value={num.online}
                  type="number"
                  onChange={(e) => {
                    setnum((pre) => ({ ...pre, online: e.target.value }));
                  }}
                />
                &nbsp;&nbsp;% &nbsp;&nbsp;&nbsp;&nbsp;未上线&nbsp;&nbsp;
                <Input
                  style={{
                    padding: "2px 8px",
                    border: "1px solid #c0c0c0",
                    borderRadius: 5,
                    cursor: "pointer",
                    color: "#c0c0c0",
                    width: 80,
                  }}
                  min={1}
                  placeholder="请输入"
                  value={num.noLine}
                  type="number"
                  onChange={(e) => {
                    setnum((pre) => ({ ...pre, noLine: e.target.value }));
                  }}
                />
                &nbsp;&nbsp;%
              </Flex>
            )}
          </Flex>

          <Flex
            style={{
              padding: "4px 8px",
              border: "1px solid #666",
              borderRadius: 5,
              cursor: "pointer",
            }}
            alignItems="center"
            onClick={() => {
              setShowSearchAll(!showSearchAll);
            }}
          >
            选择考试和学校
            <img
              src={showSearchAll ? upSrc : downSrc}
              width={14}
              height={12}
              style={{ marginLeft: 5 }}
            />
          </Flex>
        </Flex>
      </div>
    </>
  );
};

// 抽取表格部分为独立组件
export const TableSection = ({
  columns,
  dataSource,
  onExport,
  onShowChart,
  hasCharts = true,
  expandableConfig = {},
  tableCommonProps = {},
}) => {
  return (
    <div style={{ height: 460, marginBottom: 30 }}>
      <Table
        {...tableCommonProps}
        columns={columns}
        dataSource={dataSource}
        expandable={expandableConfig}
        pagination={false}
      />
      <div className="table-footer">
        <Flex style={{ gap: 12 }}>
          <Button
            type="primary"
            onClick={() => {
              Common.uploadFile();
            }}
          >
            导出表格
          </Button>
          {hasCharts && (
            <Button type="primary" onClick={onShowChart}>
              显示为图表
            </Button>
          )}
        </Flex>
      </div>
    </div>
  );
};
