<template>
  <div>
    <div class="tabs flex">
      <van-tabs line-width="12px" line-height="2px" :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="20px"></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',
        },
        {
          title: '跟单',
          code: 'follow',
        }
      ]
    }
  },
  computed: {
    tabName() {
      return {
        "自选": this.$t('market.l12'),
        "概况": this.$t('market.l18'),
        "股票": this.$t('download.l26'),
        "综合": this.$t('common.l40'),
        "期权": this.$t('account.l55'),
        "跟单": this.$t('follow.l'),
      }
    }
  },
  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 {
  position: sticky;
  top: 0;
  z-index: 8;
  background-color: #fff;
  padding: 0 16px 0 8px;
  .van-tabs {
    flex: 1;
    min-width: 0px;
  }
  .icon-cox {
    padding-left: 27px;
  }
}
::v-deep {
  .van-tabs {
    .van-tabs__wrap {
      height: 50px;
    }
    .van-tabs__nav {
      column-gap: 12px;
      justify-content: space-between;
    }
    .van-tab {
      flex: none;
      padding: 0;
      color: #888888;
      font-size: 16px;
      &.van-tab--active {
        font-size: 20px;
        color: #000;
      }
    }
    .van-tabs__line {
      display: none;
    }
  }
}
</style>