<template lang="pug">
  column-layout.form-tab
    ul.list-group-form.border-right.border-gray.h-100p(slot="left1" style="width:150px")
      li.list-group-item(v-for="nav in navs" @click="nav.disabled || clickHandler(nav)" :class="{active:nav.name===current,disabled:nav.disabled}")
        span.text {{nav.label}}
        transition(name="custom-classes-transition" enter-active-class="animated wobble")
          span.validate-badge(v-show="!nav.disabled && nav.invalid") {{nav.invalid}}
    div.form-tab-content
      slot
</template>

<script>
import _ from 'lodash';
import { triggerResize } from '@/utils/common-utils';
export default {
  props: {
    value: String
  },
  data() {
    return {
      current: this.value,
      navs: [],
      tabs: []
    };
  },
  mounted() {
    this.updateNavsTabs();
    this.showPane(this.current);
    this.watchTabPanelProps();
  },
  watch: {
    value(nv) {
      this.current = nv;
    },
    current(name) {
      this.showPane(name);
      this.$emit('on-change', name);
      this.$emit('input', name);
    }
  },
  methods: {
    updateNavsTabs() {
      let navs = [];
      let tabs = [];
      this.$slots.default.forEach(slot => {
        if (slot.componentInstance) {
          let propsData = slot.componentOptions.propsData;
          if (slot.componentOptions.tag === 'form-tab-pane') {
            navs.push({
              label: propsData.label,
              name: propsData.name,
              disabled: propsData.disabled,
              invalid: _.get(slot.componentInstance, 'invalid')
            });
            tabs.push(slot.componentInstance);
          }
        }
      });
      this.tabs = tabs;
      this.navs = navs;
      this.$nextTick(this.watchTabPanelProps);
    },
    showPane(name) {
      this.tabs.forEach(tab => {
        tab.visible = tab.name === name;
      });
      this.$nextTick(() => {
        triggerResize();
      });
    },
    clickHandler(nav) {
      this.current = nav.name;
    },
    watchTabPanelProps() {
      const tabProps = ['label', 'name', 'disabled', 'invalid'];
      this.tabs.forEach(item => {
        _.each(tabProps, (v, k) => {
          if (item[`_unwatch${v}`]) {
            item[`_unwatch${v}`]();
          }
          item[`_unwatch${v}`] = item.$watch(v, () => {
            this.updateNavsTabs();
          });
        });
      });
    }
  }
};
</script>

<style lang="less">
.form-tab {
  .list-group-form {
    .list-group-item {
      padding: 1rem 1rem;
      cursor: pointer;
      position: relative;
      &.active {
        background-color: #DDD;
        color: #FFF;
        &::after {
          content: '\3000';
          width: 0;
          height: 0;
          position: absolute;
          right: 0.5rem;
          top: 1.4rem;
          border: 5px solid transparent;
          border-left-color: #FFF;
        }
      }
      &.disabled {
        color: #ccc;
      }
      .validate-badge {
        position: absolute;
        right: 20px;
        top: 13px;
        height: 16px;
        line-height: 16px;
        width: 16px;
        border-radius: 50%;
        background-color: red;
        color: #FFF;
        overflow: hidden;
        text-align: center;
        box-shadow: 0 0 10;
        box-shadow: 0 0 10px #333;
      }
    }
  }
}
</style>
