<template>
  <div class="com">
    <van-tabs class="vtabs1" :ellipsis="false" v-model="activeName" animated swipeable>
      <van-tab :name="item.code" v-for="(item, index) in tabList" :key="index" :title="tabName[item.title] || item.title">
        <template v-if="activeName == item.code">
          <stockList :market="activeName" v-if="item.code !== '16'" />
          <optionList v-else />
        </template>
      </van-tab>
    </van-tabs>
  </div>
</template>
<script>
import stockList from "./stockList/index.vue";
import optionList from "./optionList/index.vue";
export default {
  components: {
    stockList,
    optionList
  },
  data () {
    return {
      activeName: '12',
      tabList: [
        {
          title: '热门',
          code: '12',
        },
        {
          title: '美股',
          code: '13',
        },
        {
          title: 'A股',
          code: '14',
        },
        {
          title: '港股',
          code: '15',
        },
        {
          title: '期权',
          code: '16',
        },
        {
          title: '加密货币',
          code: '17',
        },
        {
          title: '现货',
          code: '18',
        }
      ]
    }
  },
  computed: {
    tabName() {
      return {
        "热门": this.$t('market.l6'),
        "美股": this.$t('common.l41'),
        "A股": this.$t('common.l61'),
        "港股": this.$t('common.l42'),
        "期权": this.$t('account.l55'),
        "加密货币": this.$t('market.l24'),
        "现货": this.$t('market.l29'),
      }
    }
  },
  methods: {
    filterTab() {
      if (!this.appParams.uncrypto) {
        this.tabList = this.tabList.filter(item => item.code != 'cfd')
      }
    },
  }
}
</script>
<style lang="less" scoped>
.com {
  margin-bottom: 22px;
}
::v-deep {
  .vtabs1.van-tabs{
    .van-tabs__wrap {
      padding-right: 18px;
      border-bottom: 1px solid #F0F0F0;
    }
  }
}
</style>