/*
 * @Date: 2024-08-26 10:12:56
 * @LastEditors: hookehuyr hookehuyr@gmail.com
 * @LastEditTime: 2024-10-16 15:23:50
 * @FilePath: /hager/src/main.js
 * @Description: 文件描述
 */
import "@babel/polyfill";
import Vue from "vue";
import App from './App.vue'
import VueRouter from 'vue-router'
import router from './router'
// import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import 'element-ui/lib/theme-chalk/display.css'; // 基于断点的隐藏类，用于在某些条件下隐藏元素
// import '@/styles/element-ui/element-variables.scss' // 自定义主题, 不需要展示屏蔽
// import { Button, Row, Col, } from 'element-ui';
// collapse 展开折叠
import CollapseTransition from 'element-ui/lib/transitions/collapse-transition';

import VueAwesomeSwiper from 'vue-awesome-swiper';
// import 'swiper/swiper-bundle.css'; // 确保引入正确的CSS文件路径
import 'swiper/css/swiper.css'; // 确保引入正确的CSS文件路径

Vue.use(VueRouter);
// Vue.use(ElementUI);
// Vue.use(Button).use(Row).use(Col)
Vue.component(CollapseTransition.name, CollapseTransition)

Vue.use(VueAwesomeSwiper);

Vue.directive('clamp', {
  inserted(el, binding) {
    // 保存原始的完整文本
    el.__fullText__ = el.innerText;

    // 初始调用文本截断函数
    clampText(el, binding.value);

    // 添加 resize 监听器
    el.__resizeHandler__ = () => {
      clampText(el, binding.value);
    };
    window.addEventListener('resize', el.__resizeHandler__);
  },

  componentUpdated(el, binding) {
    // 组件更新时重新截断文本
    clampText(el, binding.value);
  },

  unbind(el) {
    // 移除监听器以避免内存泄漏
    window.removeEventListener('resize', el.__resizeHandler__);
    delete el.__resizeHandler__;
  }
});

function clampText(element, lineCount) {
  const lineHeight = parseFloat(getComputedStyle(element).lineHeight); // 获取行高
  const maxHeight = lineHeight * lineCount;  // 根据行数计算最大高度
  let fullText = element.__fullText__;       // 使用原始的完整文本进行截断
  element.innerText = fullText;              // 每次截断前恢复完整文本
  element.style.maxHeight = `${maxHeight}px`; // 设置最大高度

  // 处理文本截断
  while (element.scrollHeight > element.offsetHeight) { // 如果内容溢出
    fullText = fullText.slice(0, -1); // 每次减少一个字符
    element.innerText = fullText + '...'; // 重新设置文本并加省略号
  }
}

new Vue({
  router,
  render: (h) => h(App),
})
.$mount("#app");