<template>
  <Breadcrumb class="i-layout-header-breadcrumb" v-if="!isLimit" ref="breadcrumb">
    <BreadcrumbItem>
      {{ title }}
    </BreadcrumbItem>
    <BreadcrumbItem v-for="item in items" :key="item.path">
      <i-menu-head-title :item="item" :hide-icon="!showBreadcrumbIcon" />
    </BreadcrumbItem>
    <BreadcrumbItem>
      <i-menu-head-title :item="currentTitle()" :hide-icon="!showBreadcrumbIcon" />
    </BreadcrumbItem>
  </Breadcrumb>
</template>
<script>
  import { mapState } from 'vuex';
  import { flattenSiderMenu } from '../../../libs/system';
  import iMenuHeadTitle from '../menu-head/title';
  import { on, off } from 'view-design/src/utils/dom';
  import { findComponentUpward, getStyle } from 'view-design/src/utils/assist';
  import { throttle } from 'lodash';
  import Setting from '../../../setting';

  export default {
    name: 'iHeaderBreadcrumb',
    components: { iMenuHeadTitle },
    computed: {
      ...mapState('admin/layout', ['showBreadcrumbIcon', 'menuCollapse']),
      ...mapState('admin/menu', ['openNames', 'activePath', 'header', 'headerName']),
      siderMenuObject() {
        let obj = {};

        // 得到所有侧边菜单，并转为平级，查询图标及显示对应内容
        let menuSider = this.$store.getters['admin/menu/sider'];
        let allSiderMenu = flattenSiderMenu(menuSider, []);

        allSiderMenu.forEach(item => {
          if ('path' in item) {
            obj[item.path] = item;
          }
        });
        return obj;
      },
      items() {
        let items = [...this.openNames];
        let newItems = [];
        items.forEach(i => {
          newItems.push(this.siderMenuObject[i]);
        });

        if (Setting.layout.showI18n) {
          newItems.forEach(item => {
            item.title = this.$t('Permission_' + item.code);
          });
        }

        return newItems;
      },
      // 第一级，默认是 menu/header.js 中的第一项
      title() {
        return Setting.layout.showI18n ? this.$t('Front_Label_Setting_Info_Title') : Setting.info.title;
      }
    },
    data() {
      return {
        handleResize: () => {},
        isLimit: false,
        maxWidth: 560,
        breadcrumbWidth: 0
      };
    },
    methods: {
      handleCheckWidth() {
        const $header = findComponentUpward(this, 'Header');
        if ($header) {
          const headerWidth = parseInt(getStyle($header.$el, 'width'));
          this.$nextTick(() => {
            this.isLimit = headerWidth - this.maxWidth <= this.breadcrumbWidth;
          });
        }
      },
      handleGetWidth() {
        this.isLimit = false;
        this.$nextTick(() => {
          const $breadcrumb = this.$refs.breadcrumb;
          if ($breadcrumb) {
            this.breadcrumbWidth = parseInt(getStyle($breadcrumb.$el, 'width'));
          }
        });
      },
      currentTitle() {
        let item = this.siderMenuObject[this.activePath];
        if (Setting.layout.showI18n && item) {
          item.title = this.$t('Permission_' + item.code);
        }

        return item;
      }
    },
    watch: {
      topItem: {
        handler() {
          this.handleGetWidth();
          this.handleCheckWidth();
        },
        deep: true
      },
      items: {
        handler() {
          this.handleGetWidth();
          this.handleCheckWidth();
        },
        deep: true
      },
      activePath: {
        handler() {
          this.handleGetWidth();
          this.handleCheckWidth();
        },
        deep: true
      }
    },
    mounted() {
      this.handleResize = throttle(this.handleCheckWidth, 100, { leading: false });
      on(window, 'resize', this.handleResize);
      this.handleGetWidth();
      this.handleCheckWidth();
    },
    beforeDestroy() {
      off(window, 'resize', this.handleResize);
    }
  };
</script>
