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);
    }
  };
};

function request(option = {
  method: 'GET',
  formData: false
}) {
  let url = option.url
  if (option.param) {
    url = `${url}?${qs(option.param)}`
  }
  function qs(data, flag) {
    const typeObj = (obj) => Object.prototype.toString.call(obj).slice(8, -1) === 'Object'
    const typeArr = (obj) => Object.prototype.toString.call(obj).slice(8, -1) === 'Array'
    var str = '', originData, encodeData;
    for (var i in data) {
      if (data.hasOwnProperty(i)) {
        originData = data[i]
        if (typeObj(originData) || typeArr(originData)) {
          str += qs(originData, i)
        } else {
          encodeData = encodeURIComponent(originData)
          if (typeObj(data) && flag) {
            str += `${flag}[${i}]=${encodeData}&`
          } else if (typeArr(data) && flag) {
            str += `${flag}[${i}]=${encodeData}&`
            // str += `${flag}=${encodeData}&`
          } else {
            if (str.length > 0 && str[str.length - 1] !== '&') str += '&';
            str += `${i}=${encodeData}&`
          }
        }
      }
    }
    return str[str.length - 1] === '&' ? str.slice(0, -1) : str
  }
  return fetch(url, {
    method: option.method,
    headers: option.formData ? undefined : {
      'Content-Type': 'application/json',
    },
    body: option.formData ? Object.keys(option.data).reduce((ret, val) => {
      ret.append(val, option.data[val])
      return ret
    }, new FormData()) : JSON.stringify(option.data),
  }).then(response => response.json())
}

// get请求
await request({
  url: 'https://netease-cloud-music-api-dv7rufaa3-vearvip.vercel.app/search',
  method: 'GET', 
  param: {
    keywords: '海阔天空'
  }
})
// post请求
// formData自行决定是否开启，默认不开启
await request({
  url: 'https://netease-cloud-music-api-dv7rufaa3-vearvip.vercel.app/search',
  method: 'POST',
  formData: true,
  data: {
    keywords: '海阔天空'
  }
})