//自定义滚动条
import PerfectScrollbar from 'perfect-scrollbar';
//对应的css
import "perfect-scrollbar/css/perfect-scrollbar.css";

const el_scrollBar = (el) => {
  if (el._customize_scroll instanceof PerfectScrollbar) {
      el._customize_scroll.update();
  } else {
      //el上挂一份属性
      el._customize_scroll = new PerfectScrollbar(el, { suppressScrollX: true });
  }
};

Vue.directive("customizeScroll",{
  inserted(el, binding){
      const { arg } = binding;
      if(arg === "scroll"){
          el = el.querySelector(".el-table__body-wrapper");
          if(!el){
              return console.warn("未发现className为el-table__body-wrapper的dom");
          }
      }
      const rules = ["fixed", "absolute", "relative"];
          if (!rules.includes(window.getComputedStyle(el, null).position)) {
              console.error(`perfect-scrollbar所在的容器的position属性必须是以下之一：${rules.join("、")}`)
          }
          el_scrollBar(el);
  },
  componentUpdated(el, binding, vnode) {
      const { arg } = binding;
      if (arg === "scroll") {
          el = el.querySelector(".el-table__body-wrapper");
          if(!el){
              return console.warn("未发现className为el-table__body-wrapper的dom");
          }
      }
      vnode.context.$nextTick(
          () => {
              try {
                  el_scrollBar(el);
              } catch (error) {
                  console.error(error);
              }
          }
      )
  },
})

v-customizeScroll:scroll