<template>
    <lay-container style="padding: 20px">
        <lay-card>
            <div style="padding: 10px">
                <span style="font-size: 18px;vertical-align: center;margin-right: 20px">党风廉政教育</span>
            </div>
            <lay-table :page="page" height="600px" size="lg" @change="changePage" :columns="columns"
                :data-source="dataSource">
                <!-- <template v-slot:content="{ data }">
            <div v-html="data.content"></div>
          </template> -->
                <template v-slot:status="{ data }">
                    <span v-if="data.status == 1">已发布</span>
                    <span v-if="data.status == 0">已隐藏</span>
                </template>
                <template v-slot:operator="{ data }">
                    <lay-space size="lg">
                        <span style="color: #00A394;cursor: pointer" @click="viewDetail(data)">查看学习</span>
                    </lay-space>
                </template>
            </lay-table>
        </lay-card>
        <lay-layer v-model="detailShow" title="党风廉政教育详情" :type="4" :shade="true" :area="['650px', '100%']"
            :btn="detailButton">
            <lay-container fluid="true" style="padding: 20px">
                <h2 style="text-align: center; margin-bottom: 20px;">{{ detailData.party_style_name }}</h2>
                <div class="detail-content" v-html="detailData.party_style_countent"></div>
            </lay-container>
        </lay-layer>
    </lay-container>
</template>

<script setup lang="ts">
import {
    educationList,
} from '../../api/module/home'
import { ref, onMounted, reactive, watch, toRaw } from 'vue'
import { layer } from '@layui/layer-vue'
import { useUserStore } from '@/store/user'
const userStore = useUserStore()

// 分页变化
const changePage = (ppc: { current: number; limit: number }) => {
    page.current = ppc.current;
    page.limit = ppc.limit;
    getNoticeList();
}
// 列表数据
const dataSource = ref([]);


// 定义数据类型接口
interface EducationData {
    id: number;
    party_style_name: string;
    party_style_countent: string;
    status?: number; // 添加可选的状态字段，如果后端支持
}

// 修改分页参数定义
const page = reactive({
    current: 1,
    limit: 10,
    total: 1
});


onMounted(() => {
    getNoticeList()

    // Wait for editor to be mounted and initialized
    // nextTick(() => {
    //   // Add null check before accessing editor
    //   if (editorRef.value && editorRef.value.getQuill()) {
    //     // Initialize title tooltips
    //     initTitle()

    //     // Add paste event listener
    //     const editor = editorRef.value.getQuill()
    //     editor.root.addEventListener('paste', customPaste, false)
    //   }
    // })
});


const getNoticeList = () => {
    educationList({ page: page.current, size: page.limit }).then((res: any) => {
        if (res.code == 1) {
            dataSource.value = res.data.data;
            page.total = res.data.count;
        } else {
            layer.msg(res.msg, { icon: 2 })
        }
    })
}

const columns = [
    {
        title: "内容标题",
        width: "180px",
        key: "party_style_name",
        align: 'center'
    },
    {
        title: "发布时间",
        width: "180px",
        key: "createtime",
        align: 'center'
    },
    {
        title: '操作',
        width: '120px',
        customSlot: 'operator',
        key: 'operator',
        align: 'center',
        fixed: 'right'
    }
]
// 详情查看相关
const detailShow = ref(false);
const detailData = reactive<EducationData>({
    id: 0,
    party_style_name: '',
    party_style_countent: ''
});

const viewDetail = (data: EducationData) => {
    detailShow.value = true;
    detailData.id = data.id;
    detailData.party_style_name = data.party_style_name;
    detailData.party_style_countent = data.party_style_countent;
}

const detailButton = ref([
    {
        text: "关闭",
        callback: () => {
            detailShow.value = false;
        }
    }
])
</script>
<style scoped>
:deep(.w-e-text-container) {
    min-height: 400px !important;
}

:deep(.w-e-toolbar) {
    border: 1px solid #ddd !important;
    border-bottom: none !important;
}

:deep(.w-e-text-container) {
    border: 1px solid #ddd !important;
    border-top: none !important;
}

:deep(.ql-editor) {
    height: 300px;
    width: 100%;
}

:deep(.layui-input-block) {
    max-width: 85%;
}

:deep(.detail-content) {
    padding: 10px;
    max-height: calc(100vh - 200px);
    overflow-y: auto;
}

/* 添加视频自适应样式 */
:deep(.detail-content video) {
    max-width: 100%;
    height: auto;
}

:deep(.detail-content iframe) {
    max-width: 100%;
    width: 100%;
    aspect-ratio: 16 / 9;
}
</style>