<template>
      <!--<van-tabs :background="bgColor"-->
                <!--:color="activeColor"-->
                <!--:title-active-color="mainColor"-->
                <!--:title-inactive-color="inactiveColor"-->
                <!--:sticky="isFixed" >-->
          <!--<van-tab v-for="(item,index) in items"-->
                    <!--:title="item.itemLabel">-->
              <!--&lt;!&ndash;<a :href="'#anchor'+index" slot="title">&ndash;&gt;-->
                  <!--&lt;!&ndash;{{item.itemLabel}}&ndash;&gt;-->
              <!--&lt;!&ndash;</a>&ndash;&gt;-->
          <!--</van-tab>-->
      <!--</van-tabs>-->

    <!--
         自己写实现tab的原因：
      1. 要升级vant版本才支持 粘性定位布局 sticky
      2. 粘性定位布局的吸顶功能时好时坏
      3. 锚点跳转不好控制，禁止vant-tab可以控制锚点但是样式会被覆盖
      4. 后期便于维护.和做需求变更
     -->
    <div class="tab-container"
        :style="formatterBgStyle(bgColor)"
        id="tabContainer">
        <div class="tab-list"
            v-for="(item,index) in items">
            <a :href="'#anchor'+index"
               :style="formatterTextStyle(active == index ? mainColor : inactiveColor)"
               @click ="tabClickHandler(index)">
                {{item.itemLabel}}
            </a>
            <div v-show="active == index "
                 class="bottom-line"
                 :style="formatterBgStyle(activeColor)"></div>
        </div>
    </div>

</template>


<script>
    import Field from '../mixins/field'

    import Renderer from '../renderer/Renderer'

export default {

  name: "Tab",

  mixins:[ Field ],

  components: {
     Renderer
  },

  props: {
    items: {
      type:Array,
      default: ()=>{
        return []
      }
    },
    bgColor: {
      type: String,
      default:()=>{
        return ''
      }
    },
    activeColor:{
      type: String,
      default:()=>{
        return ''
      }
    },
    mainColor:{
      type: String,
      default:()=>{
        return ''
      }
    },
    inactiveColor:{
      type: String,
      default:()=>{
        return ''
      }
    },
    isFixed:{
      type: Boolean,
      default:()=>{
        return false
      }
    }
  },
    data(){
      return {
        active: 0
      }
    },

    methods:{
        tabClickHandler(index){
            setTimeout(()=>{
                this.active = index
            },10)
        }
    }
};
</script>
<style lang="scss" scoped>
 $lineWidth: 55px !default;
.tab-container {
    display: flex;
    height: 45px;
    line-height: 45px;
    .tab-list {
        flex: 1;
        text-align: center;
    }
    .bottom-line{
        position: relative;
        height: 2px;
        top: -2px;
        margin-left: calc((100% - #{$lineWidth}) / 2);
        border-radius: 2px;
        width: $lineWidth;
    }
    a {
        text-decoration:none;
        display: inline-block;
    }
}
</style>