<template>
  <div>
    <div class="filter-box flex">
      <div class="btns flex">
        <div class="btn" :class="{active: market === '1'}" @click="tabChange('1')">
          <!-- 热门 -->
          {{ $t('market.l6') }}
          <div class="line"></div>
        </div>
        <div class="btn" :class="{active: market === 'US'}" @click="tabChange('US')">
          <!-- 美股 -->
          {{ $t('common.l41') }}
          <div class="line"></div>
        </div>
        <div class="btn" :class="{active: market === 'CN'}" @click="tabChange('CN')">
          <!-- A股 -->
          {{ $t('common.l61') }}
          <div class="line"></div>
        </div>
        <div class="btn" :class="{active: market === 'HK'}" @click="tabChange('HK')">
          <!-- 港股 -->
          {{ $t('common.l42') }}
          <div class="line"></div>
        </div>
      </div>
      <div class="mounth-box">
        <van-popover
          v-model="showPopover"
          placement="bottom-end"
          trigger="click"
        >
          <div class="popover-body">
            <div class="m-li" :class="{'active': mounth == '1m'}" @click="changeMounth('1m')">1M</div>
            <div class="m-li" :class="{'active': mounth == '2m'}" @click="changeMounth('2m')">2M</div>
            <div class="m-li" :class="{'active': mounth == '3m'}" @click="changeMounth('3m')">3M</div>
            <div class="m-li" :class="{'active': mounth == '6m'}" @click="changeMounth('6m')">6M</div>
          </div>
          <template #reference>
            <div class="filter flex">
              <img class="img" src="/img/icon/date.png" alt="极度证券">
              <div>
                <!-- 期限 -->
                {{ $t('exchange.l47') }} {{ mounth.toLocaleUpperCase() }}
              </div>
              <img class="arrow-down" :class="{'active': showPopover}" src="/img/market/down.png" alt="极度证券">
            </div>
          </template>
        </van-popover>
      </div>
    </div>
    <hotList v-if="market == '1'" :market="market" :mounth="mounth" />
    <list v-else :market="market" :mounth="mounth" :key="market" />
  </div>
</template>
<script>
import list from "./components/list.vue";
import hotList from "./components/hotList.vue";
export default {
  components: {
    list,
    hotList
  },
  data() {
    return {
      market: '1',
      mounth: '1m',
      showPopover: false
    };
  },
  created () {
    if (this.$route.params.market) {
      this.market = this.$route.params.market
    }
  },
  methods: {
    tabChange(val) {
      if (this.market == val) {
        return
      }
      this.market = val
      this.$router.replace('/market/options/' + val)
    },
    changeMounth(m) {
      this.showPopover = false
      if (this.mounth == m) {
        return
      }
      this.mounth = m
    },
  },
};
</script>
<style lang="less" scoped>
.filter-box {
  position: sticky;
  top: 50px;
  z-index: 4;
  background-color: #fff;
  column-gap: 16px;
  padding-right: 16px;
  .filter {
    background-color: #fff;
    cursor: pointer;
    font-size: 12px;
    color: #6F6F6F;
    border-radius: 4px;
    border: 1px solid #EBEBEB;
    height: 32px;
    padding: 0 6px;
  }
  .img {
    width: 11px;
    margin-right: 4px;
  }
}
.mounth-box {
  .arrow-down {
    width: 10px;
    margin-left: 8px;
    transition: transform 0.4s;
    &.active {
      transform: rotate(-180deg);
    }
  }
}
.btns {
  height: 52px;
  padding-left: 16px;
  align-items: flex-end;
  white-space: nowrap;
  flex-wrap: nowrap;
  overflow-x: auto;
  flex: 1;
  min-width: 0px;
  &::-webkit-scrollbar {
    display: none;
  }
  .btn {
    cursor: pointer;
    font-size: 14px;
    color: #888888;
    padding-bottom: 18px;
    position: relative;
    &+.btn {
      margin-left: 24px;
    }
    &.active {
      font-size: 16px;
      font-weight: 600;
      color: #000;
      .line {
        display: block;
      }
    }
  }
  .line {
    position: absolute;
    left: 50%;
    bottom: 10px;
    transform: translateX(-50%);
    width: 12px;
    height: 2px;
    border-radius: 1px;
    background-color: #000;
    display: none;
  }
}
.popover-body {
  .m-li {
    cursor: pointer;
    color: #717171;
    width: 90px;
    text-align: center;
    line-height: 42px;
    &+.m-li {
      border-top: 1px solid #E9E9E9;
    }
    &.active {
      color: #000000;
    }
  }
}
</style>
