<template>
    <div style="display: flex;" @click="changeSort">
        <div class="sort">
            <el-icon size="13px" :color="sortTypeLocal == 'asc' ? sortColor.c : sortColor.n">
                <CaretTop />
            </el-icon>
            <el-icon style="margin-top: -5px;" size="13px" :color="sortTypeLocal == 'desc' ? sortColor.c : sortColor.n">
                <CaretBottom />
            </el-icon>
        </div>

        <text>报道时间排序</text>
    </div>

</template>

<script setup lang="ts">
import { reactive, ref, watch } from 'vue';
const emit = defineEmits(['changeSort']);

const props = defineProps({
    sortType: {
        type: String,
        default: null
    }
})

watch(() => props.sortType, (newVal) => {
    sortTypeLocal.value = newVal;
})

const sortColor = reactive({
    c: '#111',
    n: '#ccc'
})
const sortTypeLocal = ref()

function changeSort() {
    if (sortTypeLocal.value == 'asc') {
        sortTypeLocal.value = 'desc';
    } else {
        sortTypeLocal.value = 'asc';
    }

    emit("changeSort", sortTypeLocal.value);
}

function clearSort() {
    sortTypeLocal.value = null;
}

defineExpose({
    clearSort,
});

</script>

<style scoped>
.sort {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-right: 3px;
}
</style>
