import React, { useState, useRef, useEffect } from "react";
import Service from "@/common/js/service";
import { PageControl } from "@/components";
import { Input, Select, Tooltip, Button } from "antd";
import User from "@/common/js/user";
import { XMTable } from "@/components";
import college from "@/common/lottie/college.json";
import "./userData.less";

interface sortType {
  type: "ascend" | "descend" | null | undefined;
}

function ExamData(props: any) {
  const sortStatus: sortType = {
    type: undefined,
  };

  const examDataInit: any = {};
  const queryInit: any = { current: 1, size: 10, order: "SORT_ASC" };
  const [examData, setUserData] = useState(examDataInit);
  const [list, setList] = useState([]);
  const [query, setQuery] = useState(queryInit);
  const [total, setTotal] = useState(0);
  const [field, setfield] = useState("");
  const [allData, setAllData] = useState(0);
  const [order, setOrder] = useState(sortStatus.type);
  const questionTypeList = {
    SINGLE_CHOICE: "单选题",
    MULTI_CHOICE: "多选题",
    JUDGE: "判断题",
    GAP_FILLING: "填空题",
    INDEFINITE_CHOICE: "不定项选择题",
  };

  const userTypeEnum = {
    WORK_WE_CHAT: "企业微信",
    WE_CHAT: "微信",
  };

  const userExamStateEnum = {
    EXAM: "进行中",
    LACK_EXAM: "缺考",
    FINISH_EXAM: "已考试",
  };

  const orderEnum = {
    currentAccuracy: {
      ascend: "ACCURACY_ASC",
      descend: "ACCURACY_DESC",
    },
  };

  const queryRef = useRef({});

  useEffect(() => {
    queryExamUserData();
  }, []);

  useEffect(() => {
    queryRef.current = query;
    queryExamUserDataList();
  }, [query]);

  function queryExamUserData() {
    Service.Hades("public/hades/queryExamQuestionData", {
      examId: props.examId,
      tenantId: User.getStoreId(),
      userId: User.getStoreUserId(),
      source: 0,
    }).then((res) => {
      setUserData(res.result);
    });
  }

  function queryExamUserDataList() {
    Service.Hades("public/hades/queryExamQuestionDataList", {
      ...query,
      examId: props.examId,
      tenantId: User.getStoreId(),
      userId: User.getStoreUserId(),
      source: 0,
    }).then((res) => {
      setList(res.result.records);
      setTotal(parseInt(res.result.total));
      if (!allData) {
        setAllData(parseInt(res.result.total));
      }
    });
  }

  const columns = [
    {
      title: "序号",
      dataIndex: "sort",
      width: 60,
      render: (text: any, record: any, index: any) => <span>{index + 1}</span>,
    },
    {
      title: "题目",
      dataIndex: "questionStem",
      ellipsis: true,
      width: 350,
      render: (val: any) => {
        var handleVal = val;
        handleVal = handleVal.replace(/<(?!img|input).*?>/g, "");
        handleVal = handleVal.replace(/<\s?input[^>]*>/gi, "_、");
        handleVal = handleVal.replace(/\&nbsp\;/gi, " ");
        return (
          <Tooltip
            overlayClassName="aid-tool-list"
            title={
              <div style={{ maxWidth: 700, width: "auto" }}>{handleVal}</div>
            }
            placement="topLeft"
            overlayStyle={{ maxWidth: 700 }}
          >
            {handleVal}
          </Tooltip>
        );
      },
    },
    {
      title: "题型",
      dataIndex: "questionType",
      render: (text: any) => <span>{(questionTypeList as any)[text]}</span>,
      filters: Object.keys(questionTypeList).map((key) => {
        return {
          text: (questionTypeList as any)[key],
          value: key,
        };
      }),
    },
    {
      title: "本次正确率",
      dataIndex: "currentAccuracy",
      sorter: true,
      sortOrder: field === "currentAccuracy" ? order : sortStatus.type,
      render: (text: any) => <span>{parseInt((text * 100) as any)}%</span>,
    },
    {
      title: (
        <div>
          历史正确率{" "}
          <Tooltip
            overlayClassName="tool-list"
            title="包含本次考试正确率"
            placement="top"
            overlayStyle={{ maxWidth: 700 }}
          >
            {" "}
            <span
              style={{ color: "rgba(191, 191, 191, 1)",fontWeight: 400 }}
              className="icon iconfont"
            >
              &#xe61d;
            </span>
          </Tooltip>
        </div>
      ),
      dataIndex: "totalAccuracy",
      render: (text: any) => <span>{parseInt((text * 100) as any)}%</span>,
    },
  ];

  function onChange(pagination: any, filters: any, sorter: any, extra: any) {
    console.log(filters, sorter);

    setfield(sorter.field);
    setOrder(sorter.order);
    console.log(sorter.field, sorter.order, (orderEnum as any)[sorter.field]);
    let _query: any = { ...queryRef.current };
    console.log(filters.questionType);
    if (filters.questionType) {
      console.log(233232);
      _query.questionType = filters.questionType;
      _query.current = 1;
    } else {
      delete _query.questionType;
    }

    _query.order = (orderEnum as any)[sorter.field][sorter.order];
    setQuery(_query);
  }

  function download() {
    Service.Hades("public/hades/exportExamData", {
      // ...query,
      examId: props.examId,
      exportDataType: "EXAM_QUESTION_DATA",
      tenantId: User.getStoreId(),
      userId: User.getStoreUserId(),
      source: 0,
    }).then((res) => {
      const dom = (document as any).getElementById("load-play-back-excel");
      dom.setAttribute("href", res.result);
      dom.click();
    });
  }

  return (
    <div className="rr">
      <a
        download
        id="load-play-back-excel"
        style={{ position: "absolute", left: "-10000px" }}
      ></a>
      <div className="dataPanal">
        {!!examData.singleChoiceCnt && (
          <div className="item">
            <div className="num">
              {Math.round((examData.singleChoiceAccuracy || 0) * 100)}%
            </div>
            <div className="percent">正确率</div>
            <div className="subTitle">
              <div className="type">
                <span className="icon iconfont">&#xe7fa;</span>单选题{" "}
                <span>(共{examData.singleChoiceCnt}题)</span>
              </div>
            </div>
          </div>
        )}

        {!!examData.multiChoiceCnt && (
          <div className="item">
            <div className="num">
              {Math.round((examData.multiChoiceAccuracy || 0) * 100)}%
            </div>
            <div className="percent">正确率</div>
            <div className="subTitle">
              <div className="type">
                <span className="icon iconfont">&#xe7fb;</span>多选题
                <span>(共{examData.multiChoiceCnt}题)</span>
              </div>
            </div>
          </div>
        )}

        {!!examData.judgeCnt && (
          <div className="item">
            <div className="num">
              {Math.round((examData.judgeAccuracy || 0) * 100)}%
            </div>
            <div className="percent">正确率</div>
            <div className="subTitle">
              <div className="type">
                <span className="icon iconfont">&#xe7fc;</span>判断题
                <span>(共{examData.judgeCnt}题)</span>
              </div>
            </div>
          </div>
        )}

        {!!examData.gapFillingCnt && (
          <div className="item">
            <div className="num">
              {Math.round((examData.gapFillingAccuracy || 0) * 100)}%
            </div>
            <div className="percent">正确率</div>
            <div className="subTitle">
              <div className="type">
                <span className="icon iconfont">&#xe7fd;</span>填空题
                <span>(共{examData.gapFillingCnt}题)</span>
              </div>
            </div>
          </div>
        )}
        {!!examData.indefiniteChoiceCnt && (
          <div className="item">
            <div className="num">
              {Math.round((examData.indefiniteChoiceAccuracy || 0) * 100)}%
            </div>
            <div className="percent">正确率</div>
            <div className="subTitle">
              <div className="type">
                <span className="icon iconfont">&#xe7fe;</span>不定项选择题{" "}
                <span>(共{examData.indefiniteChoiceCnt}题)</span>
              </div>
            </div>
          </div>
        )}
      </div>
      {!!allData && (
        <Button style={{ marginBottom: 12, marginTop: 12 }} onClick={download}>
          导出
        </Button>
      )}

      <div className="content">
      <XMTable 
          renderEmpty={{
            image: college,
            description: '暂无数据'
          }}
          bordered
          size="small"
          columns={columns}
          dataSource={list}
          onChange={onChange}
          pagination={false}
        ></XMTable>
        {total > 0 && (
          <PageControl
            size="small"
            current={query.current - 1}
            pageSize={query.size}
            total={total}
            toPage={(page: any) => {
              console.log(page);
              let _query: any = { ...queryRef.current };
              _query.current = page + 1;
              setQuery(_query);
            }}
          />
        )}
      </div>
    </div>
  );
}

export default ExamData;
