<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="650px" size="lg" @change="changePage" :columns="columns"
                :data-source="dataSource">
                <!-- <template v-slot:content="{ data }">
            <div v-html="data.content"></div>
          </template> -->
                <template v-slot:type="{ data }">
                    <lay-tag v-if="data.type == '已填写'" color="#00A394" size="sm">已填写</lay-tag>
                    <lay-tag v-if="data.type == '未填写'" color="#FF5722" size="sm">未填写</lay-tag>
                </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="addButton">
            <lay-container fluid="true" style="padding: 20px">
                <lay-card>
                    <div v-for="(item, index) in questionnaireList" :key="index">
                        <!-- 多选题 -->
                        <div v-if="item.type == 2" style="margin-bottom: 20px;">
                            <div style="margin: 10px 0px;">{{ (index + 1) + '、' + item.title + '（多选题）' }}</div>
                            <lay-checkbox-group v-model="questionnaireList[index].topic">
                                <lay-checkbox size="lg" v-for="(op, opi) in item.option" :name="op.name" skin="primary"
                                    :value="op.name">{{ op.name }}、{{ op.val }}</lay-checkbox>
                            </lay-checkbox-group>
                        </div>
                        <!-- 单选题 -->
                        <div v-if="item.type == 1" style="margin-bottom: 20px;">
                            <div style="margin: 10px 0px;">{{ (index + 1) + '、' + item.title + '（单选题）' }}</div>
                            <lay-radio-group name="action" v-model="questionnaireList[index].topic">
                                <lay-radio size="lg" v-for="(op, opi) in item.option" :value="op.name"> {{ op.name }}、{{
                                    op.val
                                    }}</lay-radio>
                            </lay-radio-group>
                        </div>
                        <!-- 问答题 -->
                        <div v-if="item.type == 3" style="margin-bottom: 20px;">
                            <div style="margin: 10px 0px;">{{ (index + 1) + '、' + item.title + '（问答题）' }}</div>
                            <lay-textarea v-model="questionnaireList[index].topic" placeholder="请填写答案"></lay-textarea>
                        </div>
                    </div>
                </lay-card>
            </lay-container>
        </lay-layer>
    </lay-container>
</template>

<script setup lang="ts">
import {
    educationList,
    getQuestionnaireIndex,
    getQuestionnaireInfoFind,
    getQuestionnaireInfoEdit,
    getQuestionnaireFill
} 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 detailShow = ref(false);

// 添加问卷详情数据
const questionnaireList = ref([]);

// 添加接口定义
interface QuestionItem {
    id: string | number;
    title: string;
    status: number;
    releasetime: string;
    [key: string]: any;
}

const viewDetail = (data: QuestionItem) => {
    detailShow.value = true;
    getQuestionnaireInfoFind({ id: data.id }).then((res) => {
        console.log(res);
        if (res.code === 1) {
            questionnaireList.value = res.data.map((item: any) => ({
                ...item,
                topic: item.topic || ''
            }));
        }
    }).catch(err => {
        console.error(err);
        layer.msg('网络错误，请稍后重试', { icon: 2 });
    });
}

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

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


onMounted(() => {
    getHierarchicalData()
});


const getHierarchicalData = () => {
    getQuestionnaireIndex({ page: page.current, size: page.limit }).then((res) => {
        console.log(res)
        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: "title",
        align: 'center'
    },
    {
        title: "发布时间",
        width: "180px",
        key: "releasetime",
        align: 'center'
    },
    {
        title: "状态",
        width: "180px",
        key: "type",
        customSlot: 'type',
        align: 'center'
    },
    {
        title: '操作',
        width: '120px',
        customSlot: 'operator',
        key: 'operator',
        align: 'center',
        fixed: 'right'
    }
]

const addButton = ref([
    {
        text: "确认",
        callback: async () => {
            console.log(questionnaireList.value);
            var key = questionnaireList.value.map((item, index) => {
                if (!('topic' in item)) {
                    return '';
                } else {
                    return {
                        questionnaire_id: item.questionnaire_id,
                        topic_id: item.id,
                        option: Array.isArray(item.topic) ? item.topic.join(',') : item.topic,
                    }
                }
            });
            for (var i = 0; i < key.length; i++) {
                if (key[i] == '') {
                    layer.msg('请填写第[' + (i + 1) + ']个问题', { icon: 2 });
                    return;
                }
            }
            var key = JSON.stringify(key);
            console.log(key);
            getQuestionnaireFill({ option: key }).then((res) => {
                console.log(res);
                if (res.code == 1) {
                    layer.msg(res.msg);
                } else {
                    layer.msg(res.msg, { icon: 2 });
                }
                detailShow.value = false;
                getHierarchicalData();
            })
        }
    },
    {
        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;
}

:deep(.layui-radio) {
    display: block;
}

:deep(.layui-checkbox) {
    display: block;
    margin-bottom: 10px;
}
</style>