chenhaodong / mew-iview

  <template>
      <a
          v-if="to"
          :href="linkUrl"
          :target="target"
          :class="classes"
          @click.exact="handleClickItem($event, false)"
          @click.ctrl="handleClickItem($event, true)"
          @click.meta="handleClickItem($event, true)"
          :style="itemStyle"><slot></slot></a>
      <li v-else :class="classes" @click.stop="handleClickItem" :style="itemStyle"><slot></slot></li>
  </template>
  <script>
      import Emitter from '../../mixins/emitter';

      import { findComponentUpward, findBrothersComponents, findComponentsDownward } from '../../utils/assist';

      import mixin from './mixin';
      import mixinsLink from '../../mixins/link';
  
      const prefixCls = 'ivu-menu';
  
      export default {

          name: 'MewMenuItem',

          mixins: [ Emitter, mixin, mixinsLink ],
          props: {
              name: {
                  type: [String, Number],
                  required: true
              },
              disabled: {
                  type: Boolean,
                  default: false
              },
          },
          data () {
              return {
                  active: false
              };
          },
          computed: {
              classes () {
                  return [
                      `${prefixCls}-item`,
                      {
                          [`${prefixCls}-item-active`]: this.active,
                          [`${prefixCls}-item-selected`]: this.active,
                          [`${prefixCls}-item-disabled`]: this.disabled
                      }
                  ];
              },
              itemStyle () {
                  return this.hasParentSubmenu && this.mode !== 'horizontal' ? {
                      paddingLeft: 43 + (this.parentSubmenuNum - 1) * 24 + 'px'
                  } : {};
              }
          },
          methods: {
              handleClickItem (event, new_window = false) {
                  if (this.disabled) return;
  
                  if (new_window || this.target === '_blank') {
                      // 如果是 new_window，直接新开窗口就行，无需发送状态
                      this.handleCheckClick(event, new_window);

                      let parentMenu = findComponentUpward(this, 'MewMenu');

                      if (parentMenu) parentMenu.handleEmitSelectEvent(this.name);
                  } else {

                      let parent = findComponentUpward(this, 'MewSubmenu');

  
                      if (parent) {

                          this.dispatch('MewSubmenu', 'on-menu-item-select', this.name);

                      } else {

                          this.dispatch('MewMenu', 'on-menu-item-select', this.name);

                      }

                      findBrothersComponents(this, 'SideMenuItem',false).forEach(item => {
                          findComponentsDownward(item, 'MewSubmenu').forEach(item => {
                              item.active = false;
                              item.opened = false
                          });
                      });

  
                      this.handleCheckClick(event, new_window);
                  }
              }
          },
          mounted () {
              this.$on('on-update-active-name', (name) => {
                  if (this.name === name) {
                      this.active = true;

                      this.dispatch('MewSubmenu', 'on-update-active-name', name);

                  } else {
                      this.active = false;
                  }
              });
          }
      };
  </script>