<template>
    <Touch
        tag="span"
        :class="$style.sort"
        @tap="handleTap"
        :selectable="false"
    >
        <span :style="{color:value===1||value===-1?color:''}">{{title}}</span>
        <SortIcon v-if="sortable" :status="value" :activeColor="color"/>
    </Touch>
</template>

<script>
    import SortIcon from "../effect/SortIcon";
    import Touch from "../external/Touch";
    export default {
        name: "Sort",
        components: {Touch, SortIcon},

        props:{
            sortable:{
                type:Boolean,
                default:true
            },
            default:{
                type:Boolean,
                default:false
            },
            title:{},
            value:{},
            color:{
                default:'#49B8F7'
            }
        },
        methods:{
            handleTap(){
                let newValue=+this.value;
                if(!this.sortable){
                    switch(+this.value){
                        case 0:newValue=1;break;
                        case 1:newValue=0;break;
                        default:return;
                    }
                }
                else if(!this.default){
                    switch(+this.value){
                        case 1:newValue=-1;break;
                        case -1:
                        default:
                            newValue=1;break;
                    }
                }
                else{
                    switch(+this.value){
                        case 0:newValue=1;break;
                        case 1:newValue=-1;break;
                        case -1:newValue=0;break;
                        default:return;
                    }
                }

                this.$emit('input',newValue);
            }
        }
    }
</script>

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

    .sort {
        padding: 0 4px;
        margin: 0 4px;
        >*{
            vertical-align: middle;
        }
    }
</style>