<template>
  <div class="filter-box">
    <div>
      <!-- 名称 -->
      {{ $t('market.l17') }}
    </div>
    <div class="right flex">
      <div class="table-row flex" @click="priceFilter">
        <!-- 价格 -->
        {{ $t('market.l4') }}
        <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">
        <!-- 涨跌幅 -->
        {{ $t('market.l5') }}
        <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;
  padding: 15px 18px 4px;
  color: #959697;
  font-size: 12px;
  position: relative;
  z-index: 3;
  .table-row {
    width: 84px;
    cursor: pointer;
    justify-content: flex-end;
  }
  .el-icon-caret-top {
    margin-bottom: -5px;
    display: block;
    font-size: 10px;
    &.active {
      color: var(--color-);
    }
  }
  .el-icon-caret-bottom {
    margin-top: -5px;
    display: block;
    font-size: 10px;
    &.active {
      color: var(--color-);
    }
  }
}
</style>