<template>
    <u-popup
        v-model="show"
        mode="center"
        border-radius="14"
        duration="16"
        @close="close"
    >
        <view class="w-[650rpx]">
            <view class="p-[30rpx] text-center text-lg font-medium">分享至广场</view>
            <view class="h-[300rpx] p-[30rpx]">
                <view
                    class="rounded-[12rpx] p-[20rpx] text-content bg-[#eeeeee]"
                    @click="showSelect = true"
                >
                    {{ formData.category_name ? formData.category_name : '全部' }}
                </view>
            </view>
            <view class="flex justify-center mt-[30rpx] pb-[20rpx]">
                <u-button
                    type="primary"
                    shape="circle"
                    :customStyle="{
                        width: '220rpx'
                    }"
                    :loading="isLock"
                    @click="handleSubmit"
                >
                    确定
                </u-button>
            </view>
        </view>
    </u-popup>
    <u-select
        v-model="showSelect"
        :list="cateLists"
        valueName="id"
        labelName="name"
        :confirmColor="$theme.primaryColor"
        @confirm="handleChoiceCate"
    ></u-select>
</template>

<script lang="ts" setup>
import { ref, reactive } from 'vue'
import { useAppStore } from '@/stores/app'
const appStore = useAppStore()
import { getDrawSquareCateLists, shareDrawSquare } from '@/api/square'
import { useLockFn } from '@/hooks/useLockFn'

const emit = defineEmits(['success', 'close'])
const show = ref<boolean>(false)
const showSelect = ref<boolean>(false)
const cateLists = ref<any[]>([])
const formData = reactive({
    base64: '',
    is_base64: '',
    prompts: '',
    category_name: '',
    categoryId: '',
    drawRecordsId: ''
})

const getData = async () => {
    try {
        const list = await getDrawSquareCateLists()
        list.shift()
        cateLists.value = list
    } catch (error) {
        console.log('获取绘画分类失败=>', error)
    }
}

//提交
const { lockFn: handleSubmit, isLock } = useLockFn(async (text: string) => {
    await shareDrawSquare(formData)
    uni.$u.toast('分享成功')
    show.value = false
    emit('success')
    emit('close')
})

const handleChoiceCate = (e: any) => {
    formData.categoryId = e[0].value
    formData.category_name = e[0].label
}

const open = (draw: any) => {
    getData()
    show.value = true
    formData.base64 = draw.base64
    formData.is_base64 = draw.is_base64
    formData.prompts = draw.promptEn || draw.prompt
    formData.drawRecordsId = draw.id
}

const close = () => {
    emit('close')
}

defineExpose({ open })
</script>
