<template>
    <view class="mt-[30rpx]">
        <l-textarea
            v-model="value"
            maxlength="1024"
            :rows="4"
            :show-word-limit="false"
            :custom-class="{
            height: '200rpx',
                paddingBottom: '48rpx'
            }"
            placeholder="输入关键词，支持中英文，参数放最后～"
        >
            <template #length-suffix>
                <view
                    v-if="example.status"
                    class="text-muted hover:text-primary length-suffix"
                    @click.stop="value = example.content"
                >
                    <text>试试示例</text>
                </view>
            </template>
        </l-textarea>
    </view>
</template>
<script setup lang="ts">
import { computed } from 'vue'
import LTextarea from '@/components/l-textarea/l-textarea.vue'

const emit = defineEmits<{
    (event: 'update:modelValue', value: string): void
}>()
const props = withDefaults(
    defineProps<{
        modelValue?: any
        example: any
    }>(),
    {
        modelValue: '',
        example: {
            content: '',
            status: 0
        }
    }
)

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

<style scoped>
.length-suffix {
    position: absolute;
    bottom: 0;
    left: 0%;
    font-size: 28rpx;
    width: 100%;
    height: 60rpx;
    line-height: 60rpx;
    padding-right: 20rpx;
    text-align: right;
}
</style>

