<template>
  <div class="page">
    <div class="sticky">
      <div class="header">
        <div class="left flex">
          <div class="href" :class="{'active': activeName == '0'}" @click="toMarket1">
            <!-- 自选 -->
            {{ $t('market.l12') }}
          </div>
          <div class="href" :class="{active: (activeName != '0' && activeName != 'option')}" @click="toMarket">
            <!-- 市场 -->
            {{ $t('market.l13') }}
          </div>
          <div class="href" :class="{active: activeName == 'option'}" @click="toMarket2">
            <!-- 场外期权 -->
            {{ $t('home.l5') }}
          </div>
        </div>
        <div class="icon-cox">
          <searchIcon></searchIcon>
          <msgIcon></msgIcon>
        </div>
      </div>
    </div>
    <favoriteView v-if="activeName == '0'"/>
    <optionView v-if="activeName == 'option'"/>
    <marketView v-if="activeName != '0' && activeName != 'option'" />
  </div>
</template>
<script>
import favoriteView from "./favoriteView/index.vue";
import marketView from "./marketView/index.vue";
import optionView from "@/view/optionView/lists/index.vue";
export default {
  components: {
    favoriteView,
    marketView,
    optionView
  },
  data () {
    return {
      activeName: '0',
    }
  },
  computed: {
  },
  activated() {
    if (this.$route.params.type) {
      this.activeName = this.$route.params.type
    }
  },
  created () {
    if (this.$route.params.type) {
      this.activeName = this.$route.params.type
    }
  },
  methods: {
    toMarket() {
      if (this.activeName == '0' || this.activeName == 'option') {
        this.activeName = '1'
        this.$router.replace('/market/1')
      }
    },
    toMarket1() {
      if (this.activeName != '0') {
        this.activeName = '0'
        this.$router.replace('/market/0')
      }
    },
    toMarket2() {
      if (this.activeName != 'option') {
        this.activeName = 'option'
        this.$router.replace('/market/option')
      }
    }
  }
}
</script>
<style lang="less" scoped>
.sticky {
  padding: 0 18px;
  background-color: #fff;
  position: sticky;
  top: 0;
  z-index: 3;
}
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 18px;
  padding: 16px 0;
  .left {
    column-gap: 19px;
    .active {
      font-weight: 600;
      font-size: 22px;
    }
  }
  .href {
    cursor: pointer;
  }
}
.icon-cox {
  display: flex;
  align-items: center;
  column-gap: 19px;
}
</style>