<template>
  <div class="meta-tab-wrap">
    <van-tabs
      v-model:active="activeIndex"
      swipeable
      sticky
      line-width="24px"
      line-height="4px"
      :color="bg_border_color"
      :title-inactive-color="font_color_gray"
      :title-active-color="font_color"
      offset-top="11.8vw"
      @change="changeTab"
    >
      <van-tab v-for="item in tabList" :key="item.id" :title="item.title">
        <div class="tab-content">
          <slot></slot>
        </div>
      </van-tab>
    </van-tabs>
  </div>
</template>
<script>
import {
  bg_border_color,
  font_color,
  font_color_gray,
} from "@/common/scss/_variable.scss";

export default {
  name: "MetaTab",
  props: {
    tabList: {
      type: Array,
      default: () => {
        return [
          {
            name: "测试",
            id: "1",
            type: "btn",
          },
        ];
      },
    },
    tabIndex: {
      type: Number,
      default: 0,
    },
  },
  watch: {
    tabIndex() {
      this.activeIndex = this.tabIndex;
      // console.log(this.activeIndex)
    },
  },
  data() {
    return {
      bg_border_color,
      font_color,
      font_color_gray,
      activeIndex: 0,
    };
  },
  methods: {
    changeTab() {
      this.$emit("onChangeTab", this.activeIndex);
    },
  },
};
</script>

<style lang="scss" scoped>
.meta-tab-wrap {
  :deep .van-tabs__wrap {
    position: relative;
    z-index: 7;
  }
  :deep .van-sticky {
    background: #fff;
    position: fixed;
    top: 11.7vm;
    left: 8px;
    right: 8px;
    z-index: 9;
  }
}
</style>