<template>
  <span
    class="icon-sort"
    :style="{
      color: innerValue ? '#1890ff' : '',
      display: innerValue ? 'inline-block' : '',
    }"
  >
    <i
      v-if="innerValue === 'descending'"
      class="el-icon-bottom pl-1"
      style="
        color: #1890ff;
        cursor: pointer;
        font-weight: 600;
        transition: 500ms;
      "
      @click="onSort(null)"
    ></i>
    <i
      v-else
      class="el-icon-top pl-1"
      style="cursor: pointer; font-weight: 600; transition: 500ms"
      @click="onSort('descending')"
    ></i>
  </span>
</template>

<script>
export default {
  name: "IconSort",
  components: {},
  data() {
    return {};
  },
  props: {
    value: {
      type: String,
      require: true,
    },
  },
  computed: {
    innerValue: {
      get() {
        return this.$props.value;
      },
      set(value) {
        this.$emit("input", value);
      },
    },
  },
  watch: {},
  methods: {
    onSort(value) {
      this.innerValue = value;
      this.$emit("sort");
    },
  },
  created() {},
  mounted() {},
  destroyed() {},
};
</script>
<style scoped></style>
