<template>
  <div ref="sortFileds" class="sort-fileds">
    <div @click="sort(row.name)" v-for="(row,index) in fileds" :key="index" class="sort-filed-item">
      {{row.label}}
      <div>
        <rt-icon class="sort-filed-item-icon rotate" name="rt-xrm-sort-down" size="6"></rt-icon>
        <rt-icon class="sort-filed-item-icon" name="rt-xrm-sort-down" size="6"></rt-icon>
      </div>
    </div>
    <div v-if="showFilterPopup" @click="showFilterPopup" class="sort-filed-item filter">筛选
      <rt-icon style="margin-top: 3px;" name="rt-xrm-filter" size="8"></rt-icon>
    </div>
  </div>
</template>

<script>
export default {
  name: 'rtSortFiled',
  props: {
    fileds: {
      type: Array,
      required: true
    },
    value: {
      type: String,
      required: true
    },
    showFilterPopup: {
      type: Function
    }
  },
  model: {
    prop: 'value',
    event: 'input'
  },
  methods: {
    sort(filed) {
      // 当前元素
      const el = event && event.currentTarget;
      // 当前元素未被选中时，清除之前元素的样式
      if (!el.classList.contains('sorted')) {
        const oldEl = this.$refs.sortFileds.querySelectorAll('.sorted');
        oldEl.forEach(item => {
          item.classList.remove('sorted');
        });
        el.classList.add('sorted');
        el.children[0].children[0].classList.add('sorted');
        // this.$emit('input', { orderBy: filed + ' asc', filterPopup: this.filterPopup });
        this.$emit('input', filed + ' asc');
        return;
      }

      // 当前元素已被选中，调整排序的升降序
      if (el.children[0].children[0].classList.contains('sorted')) {
        el.children[0].children[0].classList.remove('sorted');
        el.children[0].children[1].classList.add('sorted');
        this.$emit('input', filed + ' desc');
      } else if (el.children[0].children[1].classList.contains('sorted')) {
        el.children[0].children[0].classList.add('sorted');
        el.children[0].children[1].classList.remove('sorted');
        this.$emit('input', filed + ' asc');
      }
    }
  }
};
</script>

<style lang="less" scoped>
.sort-fileds {
  position: relative;
  display: flex;
  padding-left: 10px;
  padding-bottom: 8px;
  .sort-filed-item {
    flex: 1;
    line-height: 14px;
    text-align: center;
    font-size: 15px;
    color: #222;
    &.sorted {
      color: #53a4fc;
    }
    div {
      display: inline-block;
      height: 11px;
      .sort-filed-item-icon {
        display: flex;
        color: #222;
        &.rotate {
          transform: rotateX(180deg);
        }
        &.sorted {
          color: #53a4fc;
        }
      }
    }

    &.filter {
      color: #53a4fc;
    }
  }
}
</style>
