<template>
  <div class="tabs_box">
    <van-tabs
      v-model:active="active"
      title-active-color="#3e6ee8"
      color="#3e6ee8"
      @click="onChange"
      :background="themeType == 'light' ? '#fff' : '#041634'"
      :title-inactive-color="themeType == 'light' ? '#333' : '#fff'"
    >
      <van-tab
        v-for="(item, index) in list"
        :key="index"
        :name="index"
        :title="item.name"
        :badge="item.count"
      ></van-tab>
    </van-tabs>
  </div>
</template>

<script>
export default {
  name: "tabs",
  props: ["list", "type", "checked"],
  data() {
    return {
      active: 0,
      themeType: getStorage("themeSetting"),
      //tabs 徽标颜色
      badgeTextCoior: {
        type: String,
        default: "#fff",
      },
    };
  },
  watch: {
    checked: {
      handler(val) {
        this.$nextTick(() => {
          this.active = val;
        });
      },
      deep: true,
    },
  },
  mounted() {
    this.badgeTextCoior.default = this.themeType == "light" ? "#333" : "#fff";
  },
  methods: {
    onChange(e) {
      this.$emit("onYjjb", this.active);
    },
  },
};
</script>

<style lang="scss" scoped>
@import "../assets/styles/mixin.scss";

.tabs_box {
  @include font_size($font_medium_s);
  @include font_color($font-color-theme);
  @include bg_color($background-color-theme);
  margin-top: 8.5vw;
}
::v-deep .van-tabs__wrap {
  height: 70px;
}
::v-deep .van-badge--fixed {
  color: var(--badgeTextCoior);
  background: none;
  top: 30px;
  right: 50%;
  font-size: 13px;
}
::v-deep .van-badge {
  border: none;
}
</style>
