const clock = new THREE.Clock();
const scene = new THREE.Scene();
const renderer = new THREE.WebGLRenderer({
  canvas: document.getElementById('canvas'),
  antialias: true,
  alpha: true,
});
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
const camera = new THREE.PerspectiveCamera(
  75,
  window.innerWidth / window.innerHeight,
  0.1,
  1000,
);
camera.position.set(0, 0, 5);
camera.lookAt(scene.position);
// 创建纹理
const texture = new THREE.TextureLoader().load(img.src);
// 使用纹理创建贴图
const material = new THREE.SpriteMaterial({ map: texture, color: 0x666666 });
// 使用贴图创建贴图对象
const stone = new THREE.Sprite(material);
stone.name = 'stone';
// 为贴图对象创建动画混合器
const mixer = new THREE.AnimationMixer(stone);
const getClip = () => {
  const times = [0, 1]; // 关键帧时间数组，离散的时间点序列
  const values = [0.6, 0.6, 0.6, 1.2, 1.2, 1.2]; // 与时间点对应的值组成的数组
  // 创建位置关键帧对象：0时刻对应位置0, 0, 0   1时刻对应位置1.2, 1.2, 1.2
  const track = new THREE.VectorKeyframeTrack(`${stone.name}.scale`, times, values);
  const duration = 1;
  return new THREE.AnimationClip('stoneClip', duration, [track]);
};
const mixer = new THREE.AnimationMixer(stone);
const action = mixer.clipAction(getClip());
action.timeScale = 1; // 动画播放一个周期的时间
action.loop = THREE.LoopPingPong; // 动画循环类型
action.play(); // 播放
function animate() {
  renderer.render(scene, camera);
  
  if (mixer) {
    // 更新动画
    const delta = clock.getDelta();
    mixer.update(delta);
  }
  requestAnimationFrame(animate);
}

const list = [
  { id: 2, name: '部门2', pid: 1, },
  { id: 1, name: '部门1', pid: 0, },
  { id: 3, name: '部门3', pid: 1, },
  { id: 4, name: '部门4', pid: 3, },
  { id: 5, name: '部门5', pid: 4, },
  { id: 6, name: '部门6', pid: 7, },
  { id: 7, name: '部门7', pid: 0, },
];

function listToTree(list) {
  const result = [];
  const obj = {};
  for (const item of list) {
    const id = item.id;
    const pid = item.pid;
    if (!obj[id]) {
      obj[id] = {
        children: [],
      };
    }
    obj[id] = {
      ...item,
      children: obj[id].children,
    };
    if (pid === 0) {
      result.push(obj[id]);
    } else {
      if (!obj[pid]) {
        obj[pid] = {
          children: [],
        };
      }
      obj[pid].children.push(obj[id]);
    }
  }
  // console.log(obj)
  return result;
}
listToTree(list)

function listToTree(list, tree, pid) {
  list.forEach(item => {
    if (item.pid === pid) {
      const child = {
        ...item,
        children: [],
      };
      listToTree(list, child.children, item.id);
      // 删掉不存在 children 值的属性
      if (child.children.length <= 0) {
        delete child.children
      }
      tree.push(child);
    }
  });
}
const result = []; 
listToTree(list, result, 0);

const LENGTH = 1 << 0; // 长度
const LOWERCASE = 1 << 1; // 小写字母
const UPPERCASE = 1 << 2; // 大写字母
const NUMBER = 1 << 3; // 数字
const SYMBOL = 1 << 4; // 符号
const SERIES = 1 << 5; // 串联/重复
const LEVEL_TOO_WEAK = 'Too weak';
const LEVEL_WEAK = 'Weak';
const LEVEL_MEDIUM = 'Medium';
const LEVEL_STRONG = 'Strong';
const LEVEL_VERY_STRONG = 'Very Strong';
const defaultOptions = {
  minLength: 8,
  allowedSymbols: '_!@#$%^&*',
  allowLx: true,
};
function check(password = '', options = defaultOptions) {
  let level = 0;
  const rules = [
    {
      regex: '[a-z]',
      flag: LOWERCASE,
    },
    {
      regex: '[A-Z]',
      flag: UPPERCASE,
    },
    {
      regex: '[0-9]',
      flag: NUMBER,
    },
    {
      regex: `[${options.allowedSymbols}]`,
      flag: SYMBOL,
    },
  ];
  if (options.minLength <= password.length) {
    level |= LENGTH;
  } else {
    return LEVEL_TOO_WEAK;
  }
  level = rules.reduce((acc, rule) => {
    // console.log(rule.regex, new RegExp(`${rule.regex}`).test(password))
    if (new RegExp(`${rule.regex}`).test(password)) {
      acc |= rule.flag;
    }
    return acc;
  }, level);
  if (options.allowLx && lxStr(password)) {
    level |= SERIES;
  }
  const count = level.toString(2).match(/1/g).length;
  // console.log(level.toString(2))
  if (count <= 1) {
    return LEVEL_TOO_WEAK;
  } else if (count <= 2) {
    return LEVEL_WEAK;
  } else if (count <= 4) {
    return LEVEL_MEDIUM;
  } else if (count < 6) {
    return LEVEL_STRONG;
  } else {
    return LEVEL_VERY_STRONG;
  }
}
function lxStr(str, len = 4) {
  const arr = Array.from(str);
  if (str < len) {
    return false;
  }
  for (let i = 0; i < arr.length - len + 1; i++) {
    const codeArr = [];
    let same = 0;
    let order = 0;
    for (let j = 0; j < len; j++) {
      codeArr.push(str.charCodeAt(i + j));
      if (j !== 0) {
        if (codeArr[j] === codeArr[j - 1]) {
          same += 1;
        }
        if (Math.abs(codeArr[j] - codeArr[j - 1]) === 1) {
          order += 1;
        }
      }
    }
    if (same === len - 1 || order === len - 1) {
      // console.log('low', len, str);
      return false;
    }
  }
  // console.log('strong', len, str);
  return true;
}
export { check };

console.log('qwer', check('qwer')) // Too weak
console.log('qwer2342', check('qwer2342')) // Medium
console.log('qwerA1234&', check('qwerA1234&')) // Strong
console.log('qwerA2342&', check('qwerA2342&')) // Very Strong

// Toast.js
import './toast.less';
class Toast {
  body = document.body;
  constructor(content, type, duration = 2, onClose = () => {}) {
    this.content = content;
    this.type = type;
    this.duration = duration;
    this.onClose = onClose;
    this.start();
  }
  start() {
    const { type } = this;
    switch (type) {
      case 'info':
        this.renderInfo();
        break;
      case 'loading':
        this.renderLoading();
        break;
      default:
        this.renderInfo();
        break;
    }
  }
  static info(content, duration, onClose) {
    const text = document.createTextNode(content);
    return new Toast(text, 'info', duration, onClose);
  }
  static loading(content, duration = 0, onClose) {
    const dom = document.createElement('div');
    dom.setAttribute('class', 'lib-toast-loading');
    let appendContent = dom;
    if (content) {
      const text = document.createElement('div');
      text.setAttribute('class', 'lib-toast-loading-text');
      text.textContent = content;
      appendContent = [dom, text];
    }
    return new Toast(appendContent, 'loading', duration, onClose);
  }
  hide() {
    this.toast.removeEventListener('touchmove', this.refuseTouch, false);
    this.toast.remove();
    this.toast = null;
  }
  renderInfo() {
    const { content } = this;
    this.render(content);
  }
  renderLoading() {
    const { content } = this;
    this.render(content);
  }
  refuseTouch(e) {
    e.stopPropagation();
    e.preventDefault();
  }
  render(children) {
    const baseCSS =
      'transition: transform 200ms, opacity 200ms;transition-timing-function: cubic-bezier(0.250, 0.460, 0.450, 0.940);transform: scale(0);opacity: 0;';
    this.toast = document.createElement('div');
    this.toast.setAttribute('class', 'lib-toast-wrapper');
    const padding = document.createElement('div');
    padding.setAttribute('class', 'li-toast-padding');
    const block = document.createElement('div');
    padding.appendChild(block);
    block.setAttribute('class', 'lib-toast-block');
    block.style.cssText = baseCSS;
    if (Array.isArray(children)) {
      block.append(...children);
    } else {
      block.appendChild(children);
    }
    this.toast.appendChild(padding);
    this.body.appendChild(this.toast);
    this.toast.addEventListener('touchmove', this.refuseTouch, false);
    // start animation
    // requestAnimationFrame(() => {
    //   // block.style.cssText = `${baseCSS} transform: scale(1); opacity: 1;`
    // })
    setTimeout(() => {
      block.style.cssText = `${baseCSS} transform: scale(1); opacity: 1;`;
    }, 0);
    if (this.duration) {
      setTimeout(() => {
        this.hide();
      }, this.duration * 1000);
    }
    return this.toast;
  }
}
export default Toast;

import Toast from './Toas.js';
Toast.info('提交成功');

import Toast from './Toas.js';
const toast = Toast.loading('加载中...'); // Toast.loading();
setTimeout(() => {
  toast.hide();
}, 1000);

// event.js
const matches = (element, query) => {
  const matched = (element.document || element.ownerDocument).querySelectorAll(
    query,
  )
  let i = matched.length - 1
  while (i >= 0 && matched.item(i) !== element) {
    i -= 1
  }
  return i > -1
}
const findAncestor = (element, selector) => {
  if (typeof element.closest === 'function') {
    return element.closest(selector) || null
  }
  while (element) {
    if (matches(element, selector)) {
      return element
    }
    // eslint-disable-next-line no-param-reassign
    element = element.parentElement
  }
  return null
}
const listenerList = []
/**
 * On
 * @param {EventTarget} element Element，document, window...
 * @param {String} query Descendant element classname or id
 * @param {String} eventNames Event type eg: click
 * @param {Function} fn callback
 * @param {Boolean} capture 
 */
export const on = (element, query, eventNames, fn, capture = false) => {
  const events = eventNames.split(' ')
  events.forEach((event) => {
    const listener = (e) => {
      const delegateTarget = findAncestor(e.target, query)
      if (delegateTarget) {
        e.delegateTarget = delegateTarget
        fn(e)
      }
    }
    listenerList.push({ listener, element, query, event, capture })
    element.addEventListener(event, listener, capture)
  })
}
/**
 * Off
 * @param {EventTarget} element Element，document, window...
 * @param {String} query Descendant element classname or id
 * @param {String} eventNames Event type A boolean value indicating that events of this type will be dispatched to the registered listener before being dispatched to any EventTarget beneath it in the DOM tree.
 */
export const off = (element, query, eventNames) => {
  const events = eventNames.split(' ')
  events.forEach((event) => {
    listenerList.forEach((item, index) => {
      if (
        item.element === element &&
        item.query === query &&
        item.event === event
      ) {
        element.removeEventListener(event, item.listener, item.capture)
        listenerList.splice(index, 1)
      }
    })
  })
}
/**
 * Trigger
 * @param {EventTarget} element Element，document, window...
 * @param {*} event A string representing the name of the event.
 * @param {*} args An object, with the following properties: detail
 */
export const trigger = (element, event, args) => {
  const ev = new CustomEvent(event, args)
  element.dispatchEvent(ev)
}

import * as Event from './event.js';
const container = document.querySelector('.list')
Event.on(container, '.item', 'click', () => {
  console.log('Click');
})