<template>
  <LayoutApp>
  <div :class="classes">
      <div :class="[prefixCls + '-bar']">
        <span class="back" @click="onBackClick">
          <i class="iconfont fontcls">&#xe763;</i>
        </span>
        <span class="help" @click="onHelpClick">
          <i class="iconfont fontcls">&#xe630;</i>
        </span>
        <div>
          <router-link class="yoho-tab" :to="{name: 'couponYoho'}" active-class="yoho-tab-active">有货优惠券</router-link><router-link  class="yoho-tab" :to="{name: 'couponUfo'}" active-class="yoho-tab-active" >UFO优惠券</router-link>
        </div>
      </div>

      <router-view></router-view>
  </div>
  </LayoutApp>
</template>

<script>

export default {
  name: 'Headers',
  props: {
    type: {
      type: [String, Number]
    },
    navList: []
  },
  data() {
    return {
      prefixCls: 'yoho-tabs',
      activeKey: this.type
    };
  },
  computed: {
    classes() {
      return [`${this.prefixCls}`];
    },
  },
  methods: {
    updateNav() {
      this.navList.forEach((pane, index) => {
        this.navList.push({
          label: pane.label,
          name: pane.currentName || index,
          disabled: pane.disabled
        });

        if (!pane.currentName) {
          pane.currentName = index;
        }

        if (index === 0) {
          if (!this.activeKey) {
            this.activeKey = pane.currentName || index;
          }
        }
      });

      this.updateStatus();
    },
    updateStatus() {
      const tabs = this.getTabs();

      tabs.forEach(tab => (tab.show = tab.currentName === this.activeKey));
    },
    handleChange(index) {
      const nav = this.navList[index];

      this.activeKey = nav.name;
      this.$emit('input', nav.name);
    },
    tabCls(item) {
      return [
        'yoho-tab',
        {
          ['yoho-tab-active']: item.name === this.activeKey
        }
      ];
    },
    onBackClick() {
      this.$yoho.goNewBack({});
    },
    onHelpClick() {
      this.$yoho.goNewPage({
        url: window.location.protocol + '//m.yohobuy.com/service/qaDetail?keyword=%E4%BC%98%E6%83%A0%E5%88%B8&sonId=181'
      });
    }
  },
  watch: {
    activeKey() {
      this.updateStatus();
    },
    value(val) {
      this.activeKey = val;
    }
  }
};
</script>

<style lang="scss" scoped>
  $yoho-tab: yoho-tab;

  .#{$yoho-tab}s {
    width: 100%;
    height: 100%;
  }

  .#{$yoho-tab} {
    display: inline-block;
    width: 200px;
    height: 56px;
    font-size: 24px;
    color: white;
    border: 1px solid white;
    box-sizing: border-box;
    background: #3a3a3a;
    text-align: center;
    line-height: 56px;
  }

  .#{$yoho-tab} + .#{$yoho-tab} {
    border-left: none;
  }

  .#{$yoho-tab}s-bar {
    width: 100%;
    height: 90px;
    display: flex;
    background: #3a3a3a;
    justify-content: center;
    align-items: center;
    z-index: 4;
  }

  .#{$yoho-tab}-active {
    color: #444;
    background-color: white;
  }

  .#{$yoho-tab}s-pane {
    width: 100%;
    height: 100%;
  }

  .fontcls {
    color: white;
    font-size: 45px;
  }

  .back {
    display: inline-block;
    width: 90px;
    height: 90px;
    line-height: 90px;
    position: absolute;
    left: 0;
    text-align: center;
  }

  .help {
    display: inline-block;
    width: 90px;
    height: 90px;
    line-height: 90px;
    position: absolute;
    right: 0;
    text-align: center;
  }
</style>