<template>
  <div>
    <div class="tabs">
      <van-tabs class="vtabs1" :ellipsis="false" v-model="activeName" @change="tabChange" animated swipeable>
        <van-tab :name="item.code" v-for="(item, index) in tabList" :key="index" :title="tabName[item.title]">
        </van-tab>
      </van-tabs>
      <div class="icon-cox">
        <searchIcon width="18px"></searchIcon>
      </div>
    </div>
    <router-view></router-view>
  </div>
</template>
<script>
export default {
  data () {
    return {
      activeName: 'overview',
      tabList: [
        {
          title: '自选',
          code: 'optional',
        },
        {
          title: '概况',
          code: 'overview',
        },
        {
          title: '股票',
          code: 'stock',
        },
        {
          title: '综合',
          code: 'cfd',
        },
        {
          title: '期权',
          code: 'options',
        }
      ]
    }
  },
  computed: {
    tabName() {
      return {
        "自选": this.$t('market.l12'),
        "概况": this.$t('market.l18'),
        "股票": this.$t('download.l26'),
        "综合": this.$t('common.l40'),
        "期权": this.$t('account.l55'),
      }
    }
  },
  watch: {
    '$route'() {
      if (this.$route.path.indexOf('/market') !== -1) {
        this.activeName = this.$route.name
      }
    },
    'appParams.uncrypto'() {
      this.filterTab()
    }
  },
  activated () {
    this.activeName = this.$route.name
  },
  methods: {
    tabChange(val) {
      this.$router.replace('/market/' + val)
    },
    filterTab() {
      if (!this.appParams.uncrypto) {
        this.tabList = this.tabList.filter(item => item.code != 'cfd')
      }
    },
  }
}
</script>
<style lang="less" scoped>
.tabs {
  border: 1px solid #F0F0F0;
  position: sticky;
  top: 0;
  z-index: 8;
  background-color: #fff;
  .icon-cox {
    position: absolute;
    right: 17px;
    top: 50%;
    transform: translateY(-50%);
  }
}
::v-deep {
  .vtabs1.van-tabs {
    .van-tab {
      font-size: 16px;
      &.van-tab--active {
        font-size: 18px;
      }
    }
  }
}
</style>