<template>
    <div class="icon_other" :style="{ 'flex-direction': props.specialCondition?.flexDir || 'row' }">
        <!-- 湖南页面icon图标配置 -->
        <div class="icon_title" v-if="!iconFirst">{{ props.title }}</div>
        <i class="icon iconfont-hnyz-colour" :class="'icon-hnyz-' + iconClass"
            :style="{ 'font-size': props.iconSize + 'px' }"></i>
        <div class="icon_title" v-if="iconFirst">{{ props.title }}</div>
    </div>
</template>

<script setup>
import { defineProps, computed } from 'vue'
const props = defineProps({
    title: {
        type: String,
        required: true
    },
    //图标class
    iconClass: {
        type: String,
    },
    //图标大小
    iconSize: {
        type: Number,
        default: 100
    },
    specialCondition: {//特殊条件:iconFirst(true/false), flexDir('row'/'column')
        type: JSON,
        default: () => ({})
    }
})

//是否图标首位
const iconFirst = computed(() => {
    const val = props.specialCondition?.iconFirst
    if (typeof val === 'boolean') return val
    if (typeof val === 'string') return val.toLowerCase() === 'true'
    return true
})

</script>

<style scoped lang="scss">
.icon_others {
    .icon_other {
        display: flex;
        align-items: center;

        .icon_title {
            font-size: 16px;
            color: aliceblue;
        }
    }
}
</style>