import { Alert } from 'antd';
import styles from './index.less';
import { useEffect, useRef, useState } from 'react';
import { queryPsrMonthDetail } from '@/services/psr';
import { toggleCompare } from '../../../utils/exportExcl';

const CompareCom = ({ values = [] }) => {
  const excelRef1 = useRef();
  const excelRef2 = useRef();
  const luckysheetRef1 = useRef();
  const luckysheetRef2 = useRef();
  const [datas, setDatas] = useState([]);

  const [updateCount, setUpdateCount] = useState({
    diff: 0,
    add: 0,
  });

  useEffect(() => {
    if (values.length == 2) {
      initData();
    }
  }, [values]);

  const initData = async () => {
    const data1 = await queryData(values[0]);
    const data2 = await queryData(values[1]);
    setDatas([data1, data2]);
  };

  const queryData = async (id) => {
    const res = await queryPsrMonthDetail({ id });
    if (res.data?.json_data) {
      const data = JSON.parse(res.data?.json_data);
      return data;
    }
    return [];
  };

  const renderSheet = (currentData, luckysheetRef, is_edit = false) => {
    const data = currentData;
    //设置单元格不可编辑
    data?.forEach((item) => {
      delete item.data;
      item.config.authority = is_edit
        ? null
        : {
            sheet: true,
            hintText: '当前excel不可编辑！',
          };
    });
    console.log(data);
    let option = {
      lang: 'zh',
      showinfobar: false,
      showstatisticBar: false,
      data: JSON.parse(JSON.stringify(data)),
      hook: {
        cellMousedown: (cell, position, sheet) => {
          console.log(cell, sheet);
        },
        cellUpdated: () => {
          luckysheetRef.current.refreshFormula();
        },
      },
    };
    //设置不可编辑
    // if (!is_edit) unableEdit(option);

    luckysheetRef.current.destroy();
    luckysheetRef.current.create(option);
  };

  const handlerLoad = async (index) => {
    if (!index) {
      const contentWindow = excelRef1.current.contentWindow;
      luckysheetRef1.current = contentWindow.luckysheet;
      const data = toggleCompare(datas[0], datas[1], setUpdateCount);
      renderSheet(data, luckysheetRef1);
    } else {
      const contentWindow = excelRef2.current.contentWindow;
      luckysheetRef2.current = contentWindow.luckysheet;
      const data = toggleCompare(datas[1], datas[0], setUpdateCount);
      renderSheet(data, luckysheetRef2);
    }
  };

  const renderSheetDom = (item, index) => {
    return (
      <div key={`temp_${index}`} className={styles.sheetItem}>
        <h3>{item.version_name || item?.name}</h3>
        <iframe
          style={{
            width: '100%',
            height: '80vh',
          }}
          ref={!index ? excelRef1 : excelRef2}
          onLoad={() => handlerLoad(index)}
          src="/luckysheet.html"
        />
        {/* <div className={styles.sheet} ref={!index ? excelRef1 : excelRef2} /> */}
      </div>
    );
  };
  return (
    <>
      <Alert
        message={`比对结果：${updateCount.diff}项差异。${updateCount.add}项新增`}
        type="info"
      />
      <div className={styles.sheetBox}>{values?.map(renderSheetDom)}</div>
    </>
  );
};
export default CompareCom;
