<template>
    <view class="fx-row gap-5">
        <text class="text-xs" :class="isActive?'text-primary':'text-content'">{{ option.text }}</text>
        <uv-icon size="14" :color="isActive?'primary':'var(--content-color)'" name="arrow-down"/>
    </view>
</template>

<script>
import InjectAIDataMixin from "@/pagesOther/pages/ie/entry-ai-form/components/InjectAIDataMixin";

export default {
    name: "ai-dropdown-tab",
    mixins: [InjectAIDataMixin],
    props: {
        option: {
            type: Object,
            default: () => ({})
        }
    },
    computed: {
        isActive() {
            return this._isActive(this.option)
        }
    },
    methods: {
        _isActive(op) {
            if (!op || !op.options) return false
            if (op.filterKey) {
                const predicate = s => s.id.startsWith(op.filterKey) // && !s.disableShortcut // 这个不会出现在shortcut中
                return this.shortcut.some(predicate)
            } else {
                return op.options.some(i => this._isActive(i))
            }
        }
    }
}
</script>

<style scoped>

</style>