chenhaodong / mew-iview

  <template>

      <li :class="classes" @click.stop="handleClick" :style="itemStyle"><slot></slot></li>

  </template>
  <script>

      import Emitter from '../../mixins/emitter';

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

      const prefixCls = 'ivu-menu';
  

      export default {

          name: 'MenuItem',

          mixins: [ Emitter ],

          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
                      }

                  ];

              },
              parentSubmenuNum () {
                  return findComponentsUpward(this, 'Submenu').length;
              },
              itemStyle () {
                  return this.hasParentSubmenu ? {
                      paddingLeft: 43 + (this.parentSubmenuNum - 1) * 24 + 'px'
                  } : {};
              },
              hasParentSubmenu () {
                  return findComponentUpward(this, 'Submenu');

              }

          },

          methods: {
              handleClick () {

                  if (this.disabled) return;

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

  
                  if (parent) {
                      this.dispatch('Submenu', 'on-menu-item-select', this.name);
                  } else {
                      this.dispatch('Menu', 'on-menu-item-select', this.name);
                  }

              }

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

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

                  } else {
                      this.active = false;
                  }
              });

          }

      };
  </script>