<template>
    <div class="sortClass" @click="sortClick">
        <n-icon :class="initials==1?'sortClass-top':'sortClass-xuanz'" style="margin-bottom: -6px;" size="22" :component="CaretUp" />
        <n-icon :class="initials==2?'sortClass-bot':'sortClass-xuanz'" style="margin-top: -6px;" size="22" :component="CaretDownOutline" />
    </div>
</template>

<script setup>
import { CaretUp, CaretDownOutline } from "@vicons/ionicons5";
import { ref } from "vue"
const emit = defineEmits(['setTimeFun']);

const initials = ref(0)
const sortClick = ()=>{
    if(initials.value<2){
        initials.value +=1
    }else if(initials.value==2){
        initials.value = 0
    }
    emit("soreData", initials.value)
}
</script>

<style lang="scss">
.sortClass {
    display: flex;
    flex-direction: column;
    cursor: pointer;
    &-top {
        color: #2d8cf0;
    }

    &-bot {
        color: #2d8cf0;
    }

    &-xuanz{
        color: rgb(224 224 230);    
    }
}
</style>