<template>
    <div class="arrow_default" :style="arrowStyle" @click="handleClick">
        <div class="arrow_text" :style="getFontSize" v-if="!iconFirst">{{ props.arrowText }}</div>
        <i class="icon iconfont icon-rightArrow arrow_icon" :style="arrowIconStyle"
            :class="{ can_click: !!props.specialCondition?.linkUrl }"></i>
        <div class="arrow_text" :style="getFontSize" v-if="iconFirst">{{ props.arrowText }}</div>
    </div>
</template>

<script setup>
import { useRouter } from 'vue-router'
import { computed } from 'vue'

const router = useRouter()

const props = defineProps({
    arrowText: {
        type: String,
        default: '',
    },
    //图标大小
    iconSize: {
        type: Number,
        default: 100,
    },
    specialCondition: {// 特殊条件
        type: JSON,
        default: () => ({})
    }
})

// 箭头容器样式（flex布局）
const arrowStyle = computed(() => ({
  display: 'flex',
  flexDirection: props.specialCondition?.flexDir ?? 'row',
  justifyContent: 'center',
  alignItems: 'center',
}))


// 箭头文字位置
const iconFirst = computed(() => {
    const val = props.specialCondition?.iconFirst
    if (typeof val === 'boolean') return val
    if (typeof val === 'string') return val.toLowerCase() === 'true'
    return true
})


// 箭头方向转换
const arrowIconStyle = computed(() => ({
    fontSize: `${props.iconSize}px`,
    transform: `rotate(${props.specialCondition?.arrowRotate || 0}deg)`,
}))

// 字体大小
const getFontSize = computed(() => ({
    fontSize: `${props.iconSize * 0.2}px`,
}))

// 点击跳转
const handleClick = () => {
    if (props.specialCondition.linkUrl){
        router.push(props.specialCondition.linkUrl)
    }
}
</script>


<style lang="scss" scoped>
.arrow_default {
    position: absolute;
    z-index: 15;

    .arrow_icon {
        font-size: 100px;
        color: rgb(164, 161, 161);
    }

    //可点击
    .can_click {
        color: #fff;
    }

    .arrow_text {
        color: #fff;
    }
}
</style>