<template>
  <div class="mobile-table-sort-icon">
    <div
      :class="['top-icon']"
      ref="mobile-table-sort-tIcon"
      :style="{
        border: `${transformPX(sortableConfig.iconSize)} solid transparent`,
        borderBottomColor: sortableConfig.color,
      }"
    ></div>
    <div
      :class="['bottom-icon']"
      ref="mobile-table-sort-bIcon"
      :style="{
        border: `${transformPX(sortableConfig.iconSize)} solid transparent`,
        borderTopColor: sortableConfig.color,
      }"
    ></div>
  </div>
</template>

<script>
import commonMixIn from './mixin'
export default {
  name: "tableSortBtn",
   mixins:[commonMixIn],
  props: {
    activeSortIcon: {
      type: String,
      default: "",
    },
    sortableConfig: {
      type: Object,
      default: () => ({}),
    },
  },
  watch: {
    activeSortIcon(newVal) {
      console.log(newVal, "activeSortIcon");
      this.$nextTick(() => {
        switch (newVal) {
          case "desc":
            this.$refs["mobile-table-sort-bIcon"].style.borderTopColor =
              this.sortableConfig.activeColor;
            this.$refs["mobile-table-sort-tIcon"].style.borderBottomColor =
              this.sortableConfig.color;
            break;
          case "asc":
            this.$refs["mobile-table-sort-tIcon"].style.borderBottomColor =
              this.sortableConfig.activeColor;
            this.$refs["mobile-table-sort-bIcon"].style.borderTopColor =
              this.sortableConfig.color;
            break;
          default:
            this.$refs["mobile-table-sort-tIcon"].style.borderBottomColor =
              this.sortableConfig.color;
            this.$refs["mobile-table-sort-bIcon"].style.borderTopColor =
              this.sortableConfig.color;
            break;
        }
      });
    },
  },
  data() {
    return {};
  },
};
</script>
<style lang="less" scoped>
.mobile-table-sort-icon {
  padding: 0 4px;

  .top-icon {
    width: 0;
    height: 0;
  }
  .bottom-icon {
    width: 0;
    height: 0;

    margin-top: 1px;
  }
  .active {
    color: #409eff;
  }
}
</style>
