<template>
    <div>
        <el-dialog
            title="查看作业"
            :visible.sync="FlowVisible"
            width="1200px"
            class="dialog_diy"
            :close-on-click-modal="false"
            :before-close="handleClose">
            <div  style="margin-bottom: 20px;" v-for="(item,index) in listData" :key="index">
                <div style="margin-bottom: 15px;font-size: 20px;font-weight: 600;color: #000;">第{{ index + 1}}阶段</div>
                <div v-for="po in item.messages" :key="item">
                    <div class="left" v-if="po.role == 'assistant'">
                            <div class="TName">小可ai助手</div>:
                            <div class="con" v-html="MarkdownT(po.content)"></div>
                    </div>

                    <div class="left" v-if="po.role == 'user'">
                            <div class="TName">{{ username }}</div>:
                            <div class="con" v-html="po.content"></div>
                    </div>
                </div>
            </div>
        </el-dialog>

    </div>
</template>

<script>
import MarkdownIt from "markdown-it";

    export default {
        data() {
            return {
                username:'',
                FlowVisible:false,
                listData:[
                    // {
                    //     id: "c8fd3e4c-d39a-4aa9-a9b9-6d0b9b7139c5",
                    //     messages: [
                    //         {
                    //             role: "assistant",
                    //             type: "md",
                    //             sender: "AI助手",
                    //             content: "Hi～",
                    //             createdAt: "2025-03-25T11:40:05.359Z"
                    //         }
                    //     ]
                    // },
                    // {
                    //     id: "8e724dbe-04e6-48f5-b8b8-de4cfd3a1608",
                    //     messages: [
                    //         {
                    //             role: "assistant",
                    //             type: "md",
                    //             sender: "课程描述",
                    //             content: "**主题**：cs\n\n**授课年级**：cscc\n\n**关联学科**：scsc\n\n**驱动性问题**：  \n   - 如何利用科学与技术的知识设计一个解决实际问题的创新方案？  \n\n**课程概况**：  \n   - 本课程以\"cs\"为主题，结合科学与技术的知识，鼓励学生通过跨学科的视角解决实际问题。  \n   - 学生将学习如何运用科学原理、技术工具和工程方法，设计和开发创新的解决方案。课程将围绕驱动性问题展开，培养学生的批判性思维和问题解决能力。  \n\n**课程目标**：  \n   - 理解科学与技术在解决实际问题中的重要性。  \n   - 掌握科学研究方法和技术工具的基本使用。  \n   - 培养团队合作和创新能力，通过跨学科的方式解决复杂问题。  \n\n**预期成果**：  \n   - 学生将完成一个创新设计方案，可能包括模型、报告或演示文稿，展示他们如何结合科学与技术的知识解决实际问题。  \n\n<Q>\n\n---\n\n对我生成的内容满意吗？如果满意，可以点击【采纳】将内容置于工作区进行编辑，然后点击“下一步”按钮；也可以说出你的修改建议，我会按照你的想法重新生成。\n\n</Q>",
                    //             createdAt: "2025-03-26T07:21:59.304Z",
                    //             isLoading: false
                    //         }
                    //     ]
                    // },
                    // {
                    //     id: "3e903e41-dd01-46ad-ac6a-9f4bbd5d48a6",
                    //     messages: [
                    //         {
                    //             role: "assistant",
                    //             type: "md",
                    //             sender: "AI助手",
                    //             content: "Hi～",
                    //             createdAt: "2025-03-26T07:22:00.557Z"
                    //         },
                    //         {
                    //             role: "user",
                    //             type: "md",
                    //             sender: "袁",
                    //             content: "ccscs",
                    //             createdAt: "2025-03-26T07:24:36.153Z"
                    //         },
                    //         {
                    //             role: "assistant",
                    //             type: "md",
                    //             sender: "AI助手",
                    //             content: "It seems that there are no direct matches for \"ccscs\" in the document you provided. Could you please provide more context or details about what you are looking for? This will help me assist you better.",
                    //             createdAt: "2025-03-26T07:24:36.153Z",
                    //             isLoading: false
                    //         }
                    //     ]
                    // }
                ]
            }
        },
        computed: {
            MarkdownT() {
                return function (c) {
                    let md = new MarkdownIt();
                    return c
                    ? md.render(c) : "";
                };
            }
        },
        methods: {
            openAppWork(val){
                console.log(val);
                this.username = val.sName
                this.listData = JSON.parse(val.works)
                this.FlowVisible = true;
            },
            handleClose(){
                this.listData = []
                this.FlowVisible = false;
            },
        },
    }
</script>

<style scoped>
    .TName{
        font-size: 14px;
        color: #4472C4;
        margin-bottom: 5px;
        font-weight: 600;
        width: 80px;
        flex-shrink: 0;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
    .con{
        margin-left: 10px;
        font-size: 14px;
        color: #000;
    }
    .left{
        display: flex;
        justify-content: flex-start;
        margin-bottom: 10px;
        line-height: 25px;
        flex: 1;
        border-bottom: 1px  #e7e7e7 solid;
    }

    .dialog_diy >>> .el-dialog__header {
    background: #454545 !important;
    padding: 15px 20px;
    }

    .dialog_diy >>> .el-dialog__title{
    color: #fff;
    }

    .dialog_diy >>> .el-dialog__headerbtn {
    top: 19px;
    }

    .dialog_diy >>> .el-dialog__headerbtn .el-dialog__close{
    color: #fff;
    }

    .dialog_diy >>> .el-dialog__headerbtn .el-dialog__close:hover {
    color: #fff;
    }



    .dialog_diy >>> .el-dialog__body,
    .dialog_diy >>> .el-dialog__footer{
    background: #fafafa;
    max-height: 850px;
    overflow: auto;
    }
    
</style>