<template>
  <van-tabs
    v-model:active="timeActive"
    @click-tab="onChange"
    type="card"
    title-active-color="#fff"
    :color="thColor"
    :title-inactive-color="inactive"
  >
    <van-tab v-for="item in list" :title="item" :key="item"> </van-tab>
  </van-tabs>
</template>

<script>
export default {
  name: "tabs",
  props: {
    //主题色
    thColor: {
      type: String,
      default: "#3e6ee8",
    },
    list: {
      type: Array,
      default: ["今日", "近7日", "近30日", "近90日"],
    },
    inactive: {
      type: String,
      default: " #333",
    },
  },
  data() {
    return {
      timeActive: 0,
    };
  },
  methods: {
    onChange(e) {
      this.$emit("chenge:time", this.timeActive);
    },
  },
};
</script>

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