<template>
  <div class="filter-box">
    <div>
      <!-- 名称 -->
      {{ $t('market.l17') }}
    </div>
    <div class="right flex">
      <div class="table-row flex" @click="priceFilter">
        <!-- 价格 -->
        <div class="text">
          {{ $t('market.l4') }}
        </div>
        <div>
          <i class="el-icon-caret-top" :class="{active: priceSort == 2}"></i>
          <i class="el-icon-caret-bottom" :class="{active: priceSort == 1}"></i>
        </div>
      </div>
      <div class="table-row flex" @click="percentageFilter">
        <!-- 涨跌幅 -->
        <div class="text">
          {{ $t('market.l5') }}
        </div>
        <div>
          <i class="el-icon-caret-top" :class="{active: percentageSort == 2}"></i>
          <i class="el-icon-caret-bottom" :class="{active: percentageSort == 1}"></i>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: ['priceSort', 'percentageSort'],
  methods: {
    priceFilter() {
      this.$emit('priceFilter')
    },
    percentageFilter() {
      this.$emit('percentageFilter')
    }
  }
}
</script>
<style lang="less" scoped>
.filter-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 20px;
  padding: 0 16px 0 15px;
  color: #B6B6B6;
  font-size: 12px;
  position: sticky;
  top: 102px;
  z-index: 3;
  background-color: #fff;
  .table-row {
    width: 84px;
    cursor: pointer;
    justify-content: flex-end;
    text-align: right;
    padding-left: 3px;
    column-gap: 2px;
    .text {
      min-width: 0px;
      max-width: 100%;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
  .el-icon-caret-top {
    margin-bottom: -5px;
    display: block;
    font-size: 10px;
    &.active {
      color: #000;
    }
  }
  .el-icon-caret-bottom {
    margin-top: -5px;
    display: block;
    font-size: 10px;
    &.active {
      color: #000;
    }
  }
}
</style>