<template>
    <div class="arrow_default" :style="arrowStyle" @click="handleClick">
        <div class="arrow_text" :style="getFontSize" v-if="!props.iconFirst">{{ props.arrowText }}</div>
        <i class="icon iconfont icon-rightArrow arrow_icon" :style="arrowIconStyle"
            :class="{ can_click: !!props.linkUrl }"></i>
        <div class="arrow_text" :style="getFontSize" v-if="props.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: '默认',
    },
    flexDir: {// 主轴方向 row | column
        type: String,
        default: 'row',
    },
    arrowDir: {// 箭头方向 up | down | left | right
        type: String,
        default: 'right',
    },
    linkUrl: {// 跳转链接
        type: String,
        default: '',
    },
    iconFirst: {// 是否图标在前
        type: Boolean,
        default: true,
    },
    //字体大小
    fontSize: {
        type: Number,
        default: 30,
    },
    //图标大小
    iconSize: {
        type: Number,
        default: 100,
    },
})

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

// 箭头方向转换
const arrowIconStyle = computed(() => ({
    fontSize: `${props.iconSize}px`,
    transform: {
        up: 'rotate(-90deg)',
        down: 'rotate(90deg)',
        left: 'rotate(180deg)',
        right: 'rotate(0deg)',
    }[props.arrowDir] || 'rotate(0deg)',
}))

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

// 点击跳转
const handleClick = () => {
    if (props.linkUrl) {
        router.push(props.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;

        &:hover {
            cursor: pointer;
            opacity: 0.8;
        }
    }

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