<template>
  <ui-tabs
    v-model="innerValue"
    class="ui-tabbar"
    :class="['ui-tabbar--' + type, { 'is-only-one': onlyOne }, {'is-stretch': stretch}, 'ui-tabbar--' + size]"
  >
    <ui-tabs-pane
      v-for="(item, index) in items"
      :key="index"
      :name="item[nameField]"
      :label="item[labelField]">
    </ui-tabs-pane>
  </ui-tabs>
</template>
<script>
import { Tabs, TabsPane } from 'packages/tabs';

export default {
  name: 'UiTabbar',
  components: {
    UiTabs: Tabs,
    UiTabsPane: TabsPane
  },
  props: {
    value: {
      type: String,
      default: ''
    },
    stretch: {
      type: Boolean,
      default: false
    },
    size: {
      type: String,
      default: 'mini',
      validator(value) {
        return ['mini', 'small'].includes(value)
      }
    },
    labelField: {
      type: String,
      default: 'label'
    },
    nameField: {
      type: String,
      default: 'name'
    },
    items: {
      type: Array,
      default: () => []
    },
    type: {
      type: String,
      default: 'bar',
      validator(value) {
        return ['bar', 'split'].includes(value)
      }
    }
  },
  computed: {
    innerValue: {
      get() {
        return this.value
      },
      set(val) {
        this.$emit('input', val)
      }
    },
    onlyOne() {
      return this.items.length === 1
    }
  }
}
</script>
<style lang="less">
.ui-tabbar{
  &.is-only-one.el-tabs {
    .el-tabs__active-bar.is-top{
      padding-left: 0;
      padding-right: 0;
    }
  }
}
.ui-tabbar--bar{
  &.el-tabs{
    margin-top: -1px;
  }
  &.el-tabs .el-tabs__header{
    margin-bottom: 0;
  }
  &.el-tabs .el-tabs__header .el-tabs__item.is-top{
    height: 24px;
    line-height: 24px;
    padding: 0 7px;
    font-size: 12px;
    font-weight: normal;
    position: relative;
    z-index: 3;
  }
  &.el-tabs .el-tabs__header .el-tabs__item.is-top.is-active {
    font-weight: bold;
    color: #131313;
  }
  &.el-tabs .el-tabs__nav-scroll{
    padding: 2px;
    background-color: #ECEEF0;
    border-radius: 4px;
  }
  &.el-tabs .el-tabs__nav-wrap::after{
    display: none;
  }
  &.el-tabs .el-tabs__active-bar.is-top{
    height: 24px;
    background-color: #fff;
    border-radius: 3px;
    padding: 0 7px;
    margin-left: -7px;
  }
  &.is-stretch{
    .el-tabs__nav{
      display: flex;
      flex-direction: row;
      min-width: 100%;
      text-align: center;
      > * {
        flex: 1;
      }
    }
  }
  &.ui-tabbar--small {
    &.el-tabs .el-tabs__header .el-tabs__item.is-top{
      height: 28px;
      line-height: 28px;
      font-size: 14px;
    }
    &.el-tabs .el-tabs__active-bar{
      height: 28px;
    }
  }
}
.ui-tabbar--split.el-tabs{
  .el-tabs__item{
    height: 32px;
    line-height: 32px;
    padding-left: 12px!important;
    padding-right: 12px!important;
    border-radius: 4px;
    min-width: 60px;
    text-align: center;
    box-sizing: content-box;
    position: relative;
    z-index: 3;
    color: #606C80;
    &.is-active {
      color: #202D40;
    }
    &:hover {
      color: #202D40;
    }
  }
  .el-tabs__nav-wrap::after{
    display: none;
  }
  .el-tabs__header.is-top{
    margin-bottom: 0;
  }
  .el-tabs__active-bar{
    height: 32px;
    line-height: 32px;
    border-radius: 4px;
    background-color: #F3F4F5;
    padding-left: 12px;
    padding-right: 12px;
    margin-left: -12px;
  }
}
</style>
