<template>
    <div class="default-main">
        <el-tabs v-model.trim="activeName" type="border-card" @tab-change="loadTabContent">
            <el-tab-pane label="用户协议" name="User_Agreement"></el-tab-pane>
            <el-tab-pane label="个人信息保护政策" name="Personal_Infor_Protect"></el-tab-pane>
            <el-tab-pane label="系统介绍" name="introduction"></el-tab-pane>
            <el-tab-pane label="使用手册" name="User_Manual"></el-tab-pane>
            <el-tab-pane label="公司介绍" name="Company_Profile"></el-tab-pane>
            <div class="agreement" :style="{ height: height }">
                <div style="margin-top: 5px; right: 10px; position: absolute; z-index: 9999999">
                    <el-button type="primary" @click="submit" icon="el-icon-Checked">保存</el-button>
                </div>
                <WangEditor v-if="editorVisible" :key="activeName" v-model="html" style="border-top: none" />
            </div>
        </el-tabs>
    </div>
</template>

<script setup lang="ts">
import { ref, nextTick } from 'vue'
import { mainHeight } from '@/utils/layout'
import { useDictData } from '@/stores/dictData'
import { BasicDictData } from '@/stores/interface'
import { addAppInfo, queryAppInfo } from '@/api/cs-system-boot/appinfo'
import WangEditor from '@/components/wangEditor/index.vue'
import { ElMessage } from 'element-plus'

defineOptions({
    name: 'govern/setting/app'
})

const dic = useDictData().getBasicData('appInformationType')
const id = ref('')
const activeName = ref('User_Agreement')
const html = ref('')
const editorVisible = ref(false)
const height = mainHeight(80).height

const submit = () => {
    addAppInfo({
        type: id.value,
        content: html.value
    }).then(() => {
        ElMessage.success('保存成功')
    })
}

const loadTabContent = async (paneName: string | number) => {
    editorVisible.value = false
    await nextTick()
    await nextTick()

    const matched = dic.find((item: BasicDictData) => item.code === String(paneName))
    if (!matched) {
        id.value = ''
        html.value = ''
        editorVisible.value = true
        return
    }

    id.value = matched.id
    try {
        const res: any = await queryAppInfo(id.value)
        html.value = res.data?.content ?? ''
    } catch {
        html.value = ''
    }

    await nextTick()
    editorVisible.value = true
}

loadTabContent(activeName.value)
</script>
