<template>
    <span :class="['flex align-center just-mine-btn', active ? 'active' :'']" @click.stop="handelClick">
        <SvgIcon :iconClass="active ? 'duihao' : 'duihao1'" style="margin-right: 8px;"></SvgIcon>
        仅看我的
    </span>
</template>


<script setup lang="ts">
import { ref } from 'vue'

defineOptions({ name: 'JustMine' })

const active = ref(false)

const emit = defineEmits(['change'])

function handelClick() {
    active.value = !active.value
    emit('change', active.value)
}

</script>

<style lang="scss" scoped>
.just-mine-btn{
    --el-input-inner-height: calc(var(--el-input-height, 32px) - 2px);
    background-color: var(--el-input-bg-color, var(--el-fill-color-blank));
    border-radius: var(--el-input-border-radius, var(--el-border-radius-base));
    box-shadow: 0 0 0 1px var(--el-input-border-color, var(--el-border-color)) inset;
    transform: translateZ(0);
    transition: var(--el-transition-box-shadow);
    height: 32px;
    padding: 0 12px;
    font-size:14px;
    cursor: pointer;
    color: #333;
    white-space: nowrap;
    .just-mine-text{
        color:  #8C8C8C; 
        margin-left: 8px;
    }
}
.active{
    color: var(--el-color-primary);
    box-shadow: 0 0 0 1px var(--el-color-primary) inset;
    .just-mine-text{ 
        color: var(--el-color-primary);
    }
}
</style>