export const useSignal = (initialState) => {
  const [state, setState] = useState(initialState)
  const stateRef = useRef(initialState)

  const getState = () => stateRef.current

  const editState = (newState) => {
    setState(newState)

    if (typeof newState === 'function'){
      stateRef.current = newState(stateRef.current)
    } else {
      stateRef.current = newState
    } 
  }

  return [state, editState, getState]
}

import { queryReading } from '@vearvip/hanzi-utils';

// 查询汉字“一”的粤语、日语、韩语、普通话及越南语读音
const readings = queryReading('一');
console.log(readings);
/*
输出:
{
  kCantonese: "jat1",
  kJapaneseKun: "HITOTSU HITOTABI HAJIME",
  kJapaneseOn: "ICHI ITSU",
  kKorean: "IL",
  kMandarin: "yī",
  kVietnamese: "nhất",
}
*/

import { Table, Button } from "@alifd/next";

function App() {

  const dataSource = [
    {
      item: '棉鞋1',
      img: 'https://img.alicdn.com/imgextra/i3/O1CN01oa2oWk1THYOTjD8um_!!6000000002357-2-tps-110-110.png',
      sku: '34码',
      amount: 999,
      induction: {
        a: 10,
        b: 12
      }
    },
    {
      item: '棉鞋1',
      img: 'https://img.alicdn.com/imgextra/i2/O1CN010URR3q1qa5aKdpsOh_!!6000000005511-2-tps-110-110.png',
      sku: '35码',
      amount: 88,
      induction: {
        a: 23,
        b: 77
      }
    },
    {
      item: '拖鞋1',
      img: 'https://img.alicdn.com/imgextra/i4/O1CN01xUEUfU1TCyQuxXEps_!!6000000002347-2-tps-110-110.png',
      sku: '38码',
      amount: 0,
      induction: {
        a: 0,
        b: 100
      }
    },
    {
      item: '拖鞋2',
      img: 'https://img.alicdn.com/imgextra/i2/O1CN01wtSTlr28OmrVgPKQ9_!!6000000007923-2-tps-200-200.png',
      sku: '35码',
      amount: 123,
      induction: {
        a: 90,
        b: 8
      }
    },

  ]
  const cellProps = (rowIndex, colIndex) => {
    if (rowIndex === 0 && colIndex === 0) {
      return {
        // take 3 rows's space
        rowSpan: 2
      };
    }

  };

  const convertTableToExcel = (
    id = undefined, // Fusion Table 的id 
    filterHeader = false, // 复制时是否滤掉表头
  ) => {
    return new Promise((resolve, reject) => {
      try {
        let htmlString = document.getElementById(id).innerHTML
        const filterDOM = (selector) => { 
          // 创建一个临时div元素
          var tempDiv = document.createElement('div');
          // 将HTML字符串赋值给临时div的innerHTML属性
          tempDiv.innerHTML = htmlString;
          // 使用querySelectorAll方法获取所有要过滤的元素，并将其从临时div中移除
          tempDiv.querySelectorAll(selector).forEach(function (element) {
            element.remove();
          });
          // 获取过滤后的HTML字符串
          return tempDiv.innerHTML;
        }
        htmlString = filterDOM('.next-table-lock-left')
        if (filterHeader) {
          htmlString = filterDOM('thead')
        }

        console.log(htmlString)
        const type = "text/plain";
        const blob = new Blob([htmlString], { type });
        const data = [new ClipboardItem({ [type]: blob })];

        navigator.clipboard.write(data).then(
          () => resolve(),
          (error) => reject(error),
        );
      } catch (error) {
        reject(error)
      }
    })
  }
  return (
    <div>
      <Button type="primary" onClick={() => convertTableToExcel('table1')} style={{ marginRight: 10 }}>复制</Button>
      <Button type="primary" onClick={() => convertTableToExcel('table1', true)}>复制（不含表头）</Button>
      <Table id="table1" dataSource={dataSource} cellProps={cellProps}>
        <Table.Column title="商品" width={300} dataIndex="item" lock="left" />
        <Table.ColumnGroup title="信息">
          <Table.Column title="规格" width={200} dataIndex="sku" />
          {/* <Table.Column title="图片" width={200} dataIndex="img" cell={(val) => <img src={val} />} /> */}
          <Table.Column title="库存" width={200} dataIndex="amount" />
          <Table.Column title="说明" width={200} dataIndex="induction" cell={(val) => {
            return <div>
              <div>全包：{val.a}%</div>
              <div>半包：{val.b}%</div>
            </div>
          }}  />

        </Table.ColumnGroup>
      </Table>
    </div>
  )
}

export default App

const htmlString = '' // 这里就是你要复制的东西
const type = "text/plain";
const blob = new Blob([htmlString], { type });
const data = [new ClipboardItem({ [type]: blob })];

navigator.clipboard.write(data).then(
  () => resolve(),
  (error) => reject(error),
);

function unicodeLengthIgnoreSequence(str) {
  let segmenter = new Intl.Segmenter();
  let segments = segmenter.segment(str);
  return [...segments].length;
}

console.log(
  '👪𠄘👨‍👩‍👧‍👦'.length, 
  unicodeLengthIgnoreSequence('👪𠄘👨‍👩‍👧‍👦'),
) 

export const debounce = (func: Function, timeout: number) => {
  let timeoutList: Array<NodeJS.Timeout> = [];

  return (...args: any[]) => {
    let timeoutId: NodeJS.Timeout;
    timeoutList.forEach(_timeoutId => clearTimeout(_timeoutId))
    timeoutId = setTimeout(() => {
      func(...args);
    }, timeout);
    timeoutList.push(timeoutId)
  };
};



export const throttle = (func: Function, timeout: number) => {
  let flag = true
  return (...args: any[]) => {
    if (flag) {
      flag = false
      setTimeout(() => {
        func(...args);
        flag = true
      }, timeout);
    }
  };
};