import Vue from "vue";

const ignoreComponents = [
  undefined,
  "transition",
  "RemainTime",
  "router-link",
  "Affix",
  "Alert",
  "Anchor",
  "AnchorLink",
  "AutoComplete",
  "Avatar",
  "BackTop",
  "Badge",
  "Breadcrumb",
  "BreadcrumbItem",
  "Button",
  "ButtonGroup",
  "Card",
  "Carousel",
  "CarouselItem",
  "Cascader",
  "Cell",
  "CellGroup",
  "Checkbox",
  "CheckboxGroup",
  "i-circle",
  "Col",
  "Collapse",
  "ColorPicker",
  "Content",
  "Divider",
  "DatePicker",
  "Drawer",
  "Dropdown",
  "DropdownItem",
  "DropdownMenu",
  "Footer",
  "Form",
  "iForm",
  "FormItem",
  "Header",
  "Icon",
  "Input",
  "InputNumber",
  "Layout",
  "Menu",
  "MenuGroup",
  "MenuItem",
  "Sider",
  "Submenu",
  "Modal",
  "Option",
  "OptionGroup",
  "Page",
  "Panel",
  "Poptip",
  "Progress",
  "Radio",
  "RadioGroup",
  "Rate",
  "Row",
  "Select",
  "Slider",
  "Spin",
  "Split",
  "Step",
  "Steps",
  "i-switch",
  "Table",
  "Tabs",
  "TabPane",
  "Tag",
  "Time",
  "Timeline",
  "TimelineItem",
  "TimePicker",
  "Tooltip",
  "Transfer",
  "Tree",
  "Upload",
];

setInterval(
  () => console.log("----------------------Vue lifecyle logs----------------"),
  10 * 1000
);

function getParentNumber(that) {
  let parentNumber = 0;
  while (that) {
    if (that.$parent) {
      parentNumber++;
      that = that.$parent;
    } else {
      break;
    }
  }
  return parentNumber;
}
Vue.mixin({
  created() {
    const parentNumber = getParentNumber(this);
    if (!ignoreComponents.includes(this.$options.name))
      console.log(
        "--".repeat(parentNumber) + `${this.$options.name} %c created`,
        "color: green"
      );
  },
  mounted() {
    const parentNumber = getParentNumber(this);
    if (!ignoreComponents.includes(this.$options.name))
      console.log(
        "--".repeat(parentNumber) + `${this.$options.name} %c mounted`,
        "color: green"
      );
  },
  updated() {
    const parentNumber = getParentNumber(this);
    if (!ignoreComponents.includes(this.$options.name))
      console.log(
        "--".repeat(parentNumber) + `${this.$options.name} %c updated`,
        "color: #0000aa"
      );
  },
  beforeRouteEnter(to, from, next) {
    console.log(
      "%c " + from.fullPath + " --> " + to.fullPath + " %c beforeRouteEnter",
      "background: #aaa",
      "color: #0000aa"
    );

    next();
  },
  beforeRouteUpdate(to, from, next) {
    const parentNumber = getParentNumber(this);
    console.log(
      "%c " +
        "--".repeat(parentNumber) +
        `${this.$options.name} %c beforeRouteUpdate`,
      "background: #aaa",
      "color: #0000aa"
    );
    next();
  },
  beforeRouteLeave(to, from, next) {
    const parentNumber = getParentNumber(this);
    console.log(
      "%c " +
        "--".repeat(parentNumber) +
        `${this.$options.name} %c beforeRouteLeave`,
      "background: #aaa",
      "color: #0000aa"
    );
    next();
  },
  beforeDestroy() {
    const parentNumber = getParentNumber(this);
    if (!ignoreComponents.includes(this.$options.name))
      console.log(
        "--".repeat(parentNumber) + `${this.$options.name} %c beforeDestroy`,
        "color: red; font-weight: bold"
      );
  },
});
