<template>
    <x-search-bar class="mb-8-2">
        <template #default="{ gutter, colSpan }">
            <a-form-item :label="'零容忍'" name="reportContent">
                <a-textarea :placeholder="'请输入零容忍内容'" v-model:value="reportContent"></a-textarea>
            </a-form-item>
            <a-form-item :label="'零容忍图片'" name="reportImage">
<!--                <x-upload-image v-model="reportImage" @imgChange="imgChange" />-->
                <gx-upload v-model="reportImage" :fileNumber="1" />
            </a-form-item>
            <a-form-item :label="'举报邮箱'" name="email">
                <a-input :placeholder="'请输入举报邮箱'" v-model:value="email"></a-input>
            </a-form-item>
            <a-form-item :label="'经度'" name="lat">
                <a-input-number :placeholder="'请输入经度'" v-model:value="lat"></a-input-number>
            </a-form-item>
            <a-form-item :label="'纬度'" name="lon">
                <a-input-number :placeholder="'请输入经度'" v-model:value="lon"></a-input-number>
            </a-form-item>
            <a-form-item :label="'地址'" name="address">
                <a-input :placeholder="'请输入地址'" v-model:value="address"></a-input>
            </a-form-item>
            <a-form-item :label="'电话'" name="phone">
                <a-input :placeholder="'请输入电话'" v-model:value="phone"></a-input>
            </a-form-item>
            <a-form-item :label="'编码'" name="reportNum">
                <a-input :placeholder="'请输入编码'" v-model:value="reportNum"></a-input>
            </a-form-item>
            <template v-if="Array.isArray(socialMedia)">
                <a-form-item
                    v-for="(itemImg, index) in socialMedia"
                    :key="index"
                    :label="itemImg.name || `社交媒体${index + 1}`">
                    <a-input
                        class="inputPhone"
                        v-model:value="itemImg.name"
                        placeholder="请输入图片名称"
                    />
                    <gx-upload
                        v-model="itemImg.image"
                        :fileNumber="1"
                    />
                    <a-input
                        class="inputPhone"
                        v-model:value="itemImg.link"
                        placeholder="请输入跳转链接"
                    />
                    <a-button
                        danger
                        @click="removeSocialMedia(index)"
                        size="small"
                        style="margin-bottom: 20px">删除
                    </a-button>
                </a-form-item>
                <a-form-item>
                    <a-button
                        type="dashed"
                        block
                        @click="addSocialMedia">新增社交媒体
                    </a-button>
                </a-form-item>

            </template>
            <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 { spliceUrl } from '@/utils/util'
import { getWebData,updateWebData} from '@/apis/modules/webSite'
import XSearchBar from '@/components/SearchBar/SearchBar.vue'
import GxUpload from '@/components/GxUpload/index.vue' // 获取声明接口
defineOptions({
    name: 'contactUs',
})
const { t } = useI18n()
const { showLoading, hideLoading } = usePagination()
const affirm = ref(null)
const id = ref(null)
const reportContent = ref(null)
const reportImage = ref(null)
const email = ref(null)
const lat = ref(null)
const lon = ref(null)
const address = ref(null)
const phone = ref(null)
const reportNum = ref(null)
const socialMedia = ref([{ name: '', image: '', link: '' }])
const imgChange = (index, value) => {
    socialMedia.value[index].image = value
    reportImage.value = value
}
// 页面加载时获取声明内容
getPageList()
/**
 * 获取声明内容
 */
async function getPageList() {
    try {
        showLoading()
        const res = await getWebData() // 假设返回格式为 { data: { affirm: '内容' } }
        if (res?.data) {
            id.value = res.data.id
            affirm.value = res.data.affirm
            reportContent.value = res.data.reportContent
            reportImage.value = res.data.reportImage
            email.value = res.data.email
            lat.value = res.data.lat
            lon.value = res.data.lon
            address.value = res.data.address
            phone.value = res.data.phone
            reportNum.value = res.data.reportNum

            socialMedia.value = Array.isArray(res.data.socialMedia) ? res.data.socialMedia : []

            //console.log(affirm.value)
            console.log("web-Id:",id.value)
            console.log('webData',res.data)
        }
    } catch (e) {
        message.error('获取声明内容失败')
    } finally {
        hideLoading()
    }
}
/**
 * 提交声明内容
 */
async function handleSearch() {
    try {
        showLoading()
        console.log("id.value:", id.value)
        // 转换 socialMedia.image 为字符串
        // const formattedSocialMedia = Array.isArray(socialMedia.value)
        //     ? socialMedia.value.map(item => ({
        //         ...item,
        //         image: Array.isArray(item.image) ? item.image[0] : item.image
        //     }))
        //     : []
        const formattedSocialMedia = Array.isArray(socialMedia?.value)
            ? socialMedia.value.map(item => {
                const imageRaw = Array.isArray(item?.image)
                    ? item.image[0]
                    : item?.image;

                return {
                    ...item,
                    image: spliceUrl(imageRaw)
                };
            })
            : [];

        const reportImageRaw = Array.isArray(reportImage?.value)
            ? reportImage.value[0]
            : reportImage?.value;
        const reportImageFormatted = {
            reportImage: spliceUrl(reportImageRaw)};

        await apis.webSite.updateWebData(id.value, {
            affirm: affirm.value,
            reportContent: reportContent.value,
            reportImage: reportImageFormatted.reportImage,
            //reportImage:Array.isArray(reportImage.value) ? reportImage.value[0] : reportImage.value,
            email: email.value,
            lat: lat.value,
            lon: lon.value,
            address: address.value,
            phone: phone.value,
            reportNum: reportNum.value,
            socialMedia: formattedSocialMedia,
        })
        // await apis.webSite.updateWebData(id.value, {
        //     affirm: affirm.value,
        //     reportContent: reportContent.value,
        //
        //     reportImage: reportImage.value,
        //
        //     email: email.value,
        //     lat: lat.value,
        //     lon: lon.value,
        //     address: address.value,
        //     phone: phone.value,
        //     reportNum: reportNum.value,
        //
        //     socialMedia: socialMedia.value,
        // })
        message.success('保存成功')
    } catch (e) {
        message.error('保存失败，请重试')
    } finally {
        hideLoading()
    }
}

function addSocialMedia() {
    socialMedia.value.push({ name: '', image: '', link: '' })
}

function removeSocialMedia(index) {
    socialMedia.value.splice(index, 1)
}
</script>

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