<template>
  <span class="el-breadcrumb__item">
    <span
      v-if="collapseBool"
      :class="['el-breadcrumb__inner', to ? 'is-link' : '']"
      ref="link"
      role="link"
    >
      <i v-if="icon" class="el-breadcrumb__icon" :class="icon"></i><slot></slot>
    </span>
    <!-- <el-tooltip
      v-else-if="breadcrumbIndex === 1"
      class="item"
      effect="light"
      visible-arrow="true"
      placement="bottom"
    >
      <div slot="content">
        <div ref='tooltipContent'></div>
      </div>
      <span v-if="breadcrumbIndex === 1" style="cursor: pointer">
        <i class="el-icon-ellipsis el-icon-ellipsis-hover"></i>
      </span>
    </el-tooltip> -->
    <el-popover
      v-else-if="breadcrumbIndex === 1"
      placement="bottom"
      ref="popover"
      trigger="hover"
    >
      <div>
        <div ref='popoverContent'></div>
      </div>
      <span v-if="breadcrumbIndex === 1" style="cursor: pointer"  slot="reference">
        <i class="el-icon-ellipsis el-icon-ellipsis-hover"></i>
      </span>
    </el-popover>
    <i
      v-show="separatorClass && (collapseBool || breadcrumbIndex === 1)"
      class="el-breadcrumb__separator"
      :class="separatorClass"
    ></i>
    <p
      v-show="
        !separatorClass &&
        (collapseBool || breadcrumbIndex === 1) &&
        breadcrumbIndex !== breadcrumbLength - 1
      "
      class="el-breadcrumb__separator separator-indicator"
      role="presentation"
      >{{ separator }}</p>
  </span>
</template>
<script>
import ElPopover from 'modesign-ui/packages/popover';
import ElTooltip from 'modesign-ui/packages/tooltip';
export default {
  name: 'ElBreadcrumbItem',
  components: { ElPopover, ElTooltip },
  props: {
    to: {},
    replace: Boolean,
    icon: {
      type: String,
      default: ""
    }
  },
  data() {
    return {
      separator: '',
      separatorClass: '',
      breadcrumbIndex: 0, // 折叠开关
      breadcrumbLength: 0, // 折叠开关
      collapseBool: true,
      collapseList: []
    };
  },

  inject: ['elBreadcrumb'],
  computed: {
    isCollapse() {
      return this.elBreadcrumb.isCollapse
    }
  },
  watch: {
    isCollapse() {
      this.collapseBool = this.breadcrumbLength > 4 && this.isCollapse ? this.breadcrumbIndex === 0 || this.breadcrumbIndex > this.breadcrumbLength - 4 : true;
    },
    'elBreadcrumb.separatorClass': function(val) {
      this.separatorClass = val
    },
    'elBreadcrumb.separator': function(val) {
      this.separator = val
    }
  },
  mounted() {
    this.separatorClass = this.elBreadcrumb.separatorClass;
    this.separator = this.elBreadcrumb.separator
    this.breadcrumbIndex = this.elBreadcrumb.$children.map(item => item.$el).indexOf(this.$el);
    this.breadcrumbLength = this.elBreadcrumb.$children.map(item => item.$el).length;
    this.collapseList =  this.elBreadcrumb.$children.slice(1, this.breadcrumbLength - 3).map(item =>{
      return {
        inner: item.$el.children[0].innerHTML,
        separatorClass: this.separatorClass,
        separator: this.separator,
      }
    })
    this.$nextTick(() => {
      this.renderPopoverContent()
    })
    this.collapseBool = this.breadcrumbLength > 4 && this.isCollapse ? this.breadcrumbIndex === 0 || this.breadcrumbIndex > this.breadcrumbLength - 4 : true;
    const link = this.$refs.link;
    link.setAttribute('role', 'link');
    link.addEventListener('click', () => {
      const { to, $router } = this;
      if (!to || !$router) return;
      this.replace ? $router.replace(to) : $router.push(to);
    });
  },
  methods: {
    open() {
      this.elBreadcrumb.$emit('open')
    },
    renderPopoverContent() {
      if(this.$refs.popoverContent) {
        this.collapseList.forEach(item => {
          const span = document.createElement('span')
          const spanInner = document.createElement('span')
          const spanSeparato = document.createElement('span')
          span.className = 'el-breadcrumb__item'
          spanInner.className = 'el-breadcrumb__inner'
          spanSeparato.className = 'el-breadcrumb__separator'
          spanInner.innerHTML = item.inner
          if (item.separatorClass) {
            spanSeparato.className += ` ${item.separatorClass}`
          } else if (item.separator) {
            spanSeparato.innerHTML = item.separator
          }
          span.appendChild(spanInner)
          span.appendChild(spanSeparato)
          this.$refs.popoverContent.appendChild(span)
        })
      }
    }
  }
};
</script>
