<template>
    <x-search-bar class="mb-8-2">
        <template #default="{ gutter, colSpan }">
            <x-editor :modelValue="affirm" @update:modelValue="affirm = $event" placeholder="请输入声明内容"></x-editor>
            <a-button ghost type="primary" @click="handleSearch" style="margin-top: 20px">保存</a-button>
        </template>
    </x-search-bar>
</template>

<script setup>
import { message } from 'ant-design-vue'
import { ref } from 'vue'
import apis from '@/apis' // 假设这里包含 saveAffirm 接口
import { usePagination } from '@/hooks'
import { useI18n } from 'vue-i18n'
import { getWebData,updateWebData} from '@/apis/modules/webSite' // 获取声明接口

defineOptions({
    name: 'friendlyLinks',
})
const { t } = useI18n()
const { showLoading, hideLoading} = usePagination()
let affirm = null // 初始化声明内容
let id = null // 初始化声明内容

// 页面加载时获取声明内容
getPageList()

/**
 * 获取声明内容
 */
async function getPageList() {
    try {
        showLoading()
        const res = await getWebData() // 假设返回格式为 { data: { affirm: '内容' } }
        if (res?.data) {
            affirm = res.data.affirm
            id = res.data.id // 新增
            console.log(affirm)
            console.log(id)
        }
    } catch (e) {
        message.error('获取声明内容失败')
    } finally {
        hideLoading()
    }
}

function isEmptyRichText(html) {
    return !html || html.replace(/<[^>]+>/g, '').trim() === ''
}

/**
 * 提交声明内容
 */
async function handleSearch() {
    console.log('affirm:', affirm)
    if (isEmptyRichText(affirm)) {
        message.warning('请输入声明内容')
        return
    }
    try {
        showLoading()
        await apis.webSite.updateWebData(id, { affirm: affirm })
        message.success('保存成功')
    } catch (e) {
        message.error('保存失败，请重试')
    } finally {
        hideLoading()
    }
}
</script>

<style lang="less" scoped></style>
