<template>
    <!--    描述推荐    -->
    <view class="flex justify-between">
        <view class="text-base">
            <text class="font-medium"> 文本描述 </text>
            <text class="text-error">*</text>
        </view>
    </view>
    <!--    关键词输入    -->
    <view class="mt-[20rpx]">
        <l-textarea
            v-model="value"
            maxlength="1024"
            :rows="4"
            :show-word-limit="false"
            :custom-class="{
                border: '1px solid #ffffff',
                paddingBottom: '60rpx'
            }"
            placeholder="输入英文描述词，生成效果会更好；描述词越详细，生成的图片效果更加真实哦～~"
        >
            <template #length-suffix>
                <view
                    class="length-suffix justify-between items-center text-xs"
                >
                    <view class="flex items-center">
                        <view
                            class="flex items-center text-[#6F7E8E]"
                            @click="keydownRef?.open()"
                        >
                            <image
                                class="w-[24rpx] h-[24rpx]"
                                src="@/packages/static/images/drawing/dict.png"
                            ></image>
                            <text class="ml-[8rpx]">描述词推荐</text>
                        </view>
                        <view
                            v-if="appStore?.getDrawConfig?.translate_type == 2"
                            class="flex items-center ml-[30rpx] text-[#6F7E8E]"
                            :loading="isTranslate"
                            @click.stop="translatePrompt"
                        >
                            <u-loading
                                v-if="isTranslate"
                                mode="flower"
                                :color="$theme.primaryColor"
                                size="24"
                            ></u-loading>
                            <image
                                v-else
                                class="w-[24rpx] h-[24rpx]"
                                src="@/packages/static/images/drawing/translate.png"
                            ></image>
                            <text class="ml-[8rpx]">翻译成英文</text>
                        </view>
                        <view
                            class="flex items-center ml-[30rpx] text-[#6F7E8E]"
                            @click="getDrawingExample"
                        >
                            <image
                                class="w-[24rpx] h-[24rpx]"
                                src="@/packages/static/images/drawing/random.png"
                            ></image>
                            <text class="ml-[8rpx]">随机</text>
                        </view>
                    </view>
                    <view
                        class="flex items-center text-primary ml-[40rpx]"
                        @click.stop="value = ''"
                    >
                        <text class="ml-[8rpx]">清空</text>
                    </view>
                </view>
            </template>
        </l-textarea>
    </view>
</template>

<script setup lang="ts">
import { useAppStore } from '@/stores/app'
import { useLockFn } from '@/hooks/useLockFn'
import { drawingExample, keywordPromptTranslate } from '@/api/drawing'
import { computed } from 'vue'

const appStore = useAppStore()
const emit = defineEmits<{
    (event: 'update:modelValue', value: string): void
}>()

const props = withDefaults(
    defineProps<{
        modelValue?: any
        keydownRef: any
    }>(),
    {
        modelValue: '',
        keydownRef: {}
    }
)

const value = computed({
    get: () => {
        return props.modelValue
    },
    set: (val) => {
        emit('update:modelValue', val)
    }
})

// 请求翻译
const { isLock: isTranslate, lockFn: translatePrompt } = useLockFn(async () => {
    try {
        if (value.value.trim() == '') {
            uni.$u.toast('请输入描述词')
            return
        }
        const { promptEn } = await keywordPromptTranslate({
            prompt: value.value
        })
        emit('update:modelValue', promptEn)
    } catch (error) {
        console.log('翻译失败=>', error)
    }
})

// 获取随机绘画示例
const getDrawingExample = async () => {
    try {
        const data = await drawingExample()
        value.value = data[0]?.promptEn || ''
    } catch (error) {
        console.log('请求绘画示例失败=>', error)
    }
}
</script>

<style scoped>
.length-suffix {
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 10;
    font-size: 24rpx;
    display: flex;
    align-items: center;
    width: 100%;
    height: 60rpx;
    padding: 0 24rpx;
}
</style>
