<template>
    <IconFont
        :renderOnce="false"
        :class="$style.sortIcon"
    >
        <span :class="$style.noumenon">&#xe17;</span>
        <span
            :class="[$style.display,$style.left]"
            :style="{color:status===-1?activeColor:''}"
        >
            <span>&#xe17;</span>
        </span>
        <span
            :class="[$style.display,$style.right]"
            :style="{color:status===1?activeColor:''}"
        >
            <span>&#xe17;</span>
        </span>
    </IconFont>
</template>

<script>
    import IconFont from "../basic/IconFont";
    export default {
        name: "SortIcon",
        components: {IconFont},
        props:{
            status:{
                validator(v){
                    return v===1||v===0||v===-1;
                },
                default:0
            },
            activeColor:{
                default:'#49B8F7'
            }
        }
    }
</script>

<style module lang="scss">
    @import '../../cssInjection/cssFunction.scss';
    @import '../../cssInjection/cssLayout.scss';

    .sortIcon {
        font-size: 1em;
        line-height: 1.1em;
        position: relative;
        .noumenon{
            opacity: 0;
        }
        .display{
            position: absolute;
            top: 0;
            height: 100%;
            overflow: hidden;
            &.left{
                left: 0;
                width: 50%;
                >span{
                    left: 0;
                }
            }
            &.right{
                right: 0;
                width: 50%;
                >span{
                    right: 0;
                }
            }
            >span{
                position: absolute;
                top: 0;
                height: 100%;
            }
        }
    }
</style>