<template>
    <div class="pb_content">
        <div class="cc_bottom">
            <div v-show="activeMenu == 1" style="width:100%;display: flex;">
                <div class="cc_b_middle">
                    <div style="width:100%;height: 100%;">
                        <aiLeader :worksStudent="worksStudent" :courseId="aiBoxRightCid" :formList="menuList" :toolType="toolType" ref="aiChat"
                            @pushFileData="pushFileData" @clearFileData="clearFileData" :toolList="toolList" :testData="testData"></aiLeader>
                    </div>
                </div>
                <div class="cc_b_right">
                    <div v-if="showFileUrl" style="width: 100%;height: 100%;">
                        <div style="display: flex;">
                            <div :class="['preview_file', { active: fileMenu === 1 }]" @click="fileMenu = 1">{{ lang.ssFilePreview }}</div>
                            <div :class="['bianji_file', { active: fileMenu === 2 }]" @click="fileMenu = 2">{{ lang.ssContentEditing }}</div>
                        </div>
                        <div v-show="fileMenu == 1" style=" width: 100%;height: calc(100% - 40px);">
                        <!-- <div class="cc_b_r_menu">
                            <div v-for="(item, index) in menuList" @click="changeMenuIndex(index)" :key="index"
                                :class="{ 'cc_b_r_menu_active': menuIndex == index }">
                                <el-tooltip class="item" effect="dark" :content="item.name" placement="top">
                                    <span>{{ item.name }}</span>
                                </el-tooltip>
                                <span class="close_icon" :class="{ active: menuIndex == index }"
                                    @click="deleteMenuItem(index)"></span>
                            </div>
                        </div> -->
                        <div class="cc_b_r_content">
                            <csvTableView v-if="showFileUrl" :url="showFileUrl" />
                        </div>
                        </div>
                        <div v-show="fileMenu == 2" style="width: 100%;height: calc(100% - 40px)">
                            <div class="bianji_area">
                              <span>
                                <img @click="downUserAsk" src="../../../assets/icon/test/down_icon.svg">
                              </span>
                              <Editor @change="(value)=>userAsk = value" style="width: 100%;height: 100%;" :value="userAsk"/>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { myMixin } from "@/mixins/mixin.js"
import radarZong from "./dataCom/radarZong.vue";
import radarTeacher from "./dataCom/radarTeacher.vue";
import aiLeader from "./checkAi/aiLeader.vue";
import Cascader from "./dataCom/cascader.vue";
// import smartMenu from "./smartBox/smartMenu.vue";
import csvTableView from "./choseCheck/csvTableView.vue";
import Editor  from './checkAi/wangEnduit.vue';
import htmlDocx from "html-docx-js/dist/html-docx";
import { saveAs } from "file-saver";
export default {
  mixins: [myMixin],
  props:{
    worksStudent:{
      type:Array,
      default:()=>[]
    },
    toolType:{
      type:Number,
      default:0
    },
    toolList:{
      type:Array,
      default:()=>[]
    },
    testData:{
      type:Object,
      default:()=>{return {}}
    }
  },
    name: 'smarter',
    components: {
        radarZong, radarTeacher, Cascader,
        aiLeader, csvTableView,Editor
    },
    data() {
        return {
            // 组件数据
            userid: this.$route.query.userid,
            oid: this.$route.query.oid,
            org: this.$route.query.org,
            role: this.$route.query.role,
            cid: this.$route.query.cid,
            menuList: [],
            aiContentArea: [],
            menuIndex: 0,
            page: 1,
            total: 0,
            talkName: '',
            talkName1: '',
            chatId: '',
            formLabelWidth: "100px",
            pageSize: 8,
            loading: true,
            activeMenu: 1, // 默认激活第一个
            fileMenu: 1,
            cutNumber: 1,
            dialogVisibleUpdate: false,
            // bianjiText:"",
            userAsk:"",
            examineData: [],
            tableData: [],
            options: [{
                value: '1',
                label: '20条/页'
            }, {
                value: '2',
                label: '双皮奶'
            }],
            value: '1',
            openLeft:true,
        };
    },
    methods: {
        handleRowClick(row, column, event) {
            this.activeMenu = 1;
            console.log(JSON.stringify(row))
            this.$nextTick(() => {
                // 调试输出
                console.log(this.$refs.aiChat);
                if (this.$refs.aiChat) {
                    this.$refs.aiChat.getChatList(row.chatid);
                    let obj = JSON.parse(row.json)
                    this.menuList = obj;
                    this.$refs.aiChat.fileList = obj.map(i=>i.url)
										this.menuIndex = 0;
                } else {
                    console.error('aiChat ref is not available');
                }
            });
        },
        handleClose(done) {
            done();
        },
        deleteMenuItem(index) {
            this.menuList.splice(index, 1);
            this.menuIndex = 0
            this.$refs.aiChat.delFileList(index)
            this.$forceUpdate()
            console.log('menuList', this.menuList);

        },

        historyTalk() {
            let params = {
                uid: this.userid,
                n: this.talkName,
                page: this.page,
                num: this.pageSize
            };
            this.ajax
                .get(this.$store.state.api + "getChatHistory", params)
                .then((res) => {
                    this.tableData = res.data[0]
                    console.log("tableData", this.tableData);
                    this.total = res.data[0].length > 0 ? res.data[0][0].num : 0;
                    console.log("111111", this.total);


                })
                .catch((err) => {
                    console.error(err);
                });
        },
        pushFileData(data) {
            this.menuList.push(data)
            console.log("menuList", this.menuList);

        },
        // pushAiContent(aitext,userText){
        //     this.bianjiText = aitext
        //     this.userAsk = userText
        //     console.log("ai回答👉",this.bianjiText);
        //     if(this.bianjiText){
        //         this.fileMenu = 2
        //     }

        // },
        // pushAiContent(data){
        //     this.aiContentArea.push(...data),
        //     console.log("aiContentArea",this.aiContentArea);

        // },
        clearFileData() {
            this.menuList = []
        },
        changeMenuIndex(index) {
            this.menuIndex = index
        },
        async downUserAsk(){
          // console.log(this.userAsk)
          // console.log(this.userAsk)
          await this.generateDocx(this.lang.ssContentEditing,this.userAsk);
          this.$message.success(this.lang.ssDownloadSuccess)
        },
            // 导出docx
    async generateDocx(name, html) {
      // 将html文件中需要用到的数据挂载到store上
      const content = `<!DOCTYPE html>
      <html xmlns:v='urn:schemas-microsoft-com
      :vml'xmlns:o='urn:schemas-microsoft-com:office
      :office'xmlns:w='urn:schemas-microsoft-com:office
      :word'xmlns:m='http://schemas.microsoft.com/office/2004/12/omml'
      xmlns='http://www.w3.org/TR/REC-html40'
      xmlns='http://www.w3.org/1999/xhtml'>
      <head>
          <meta charset="UTF-8">
          <meta http-equiv="X-UA-Compatible" content="IE=edge">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>${name}</title>
          <style>
						*{
							font-family: '宋体';
							margin:0;
							padding:0;
							line-height:1;
						}
            table {
              border-collapse: collapse; /* 折叠边框 */
              width: 100%;
							font-size:10.5pt;
            }
            th, td {
              border: 1px solid black; /* 线条样式 */
              padding: 8px;
              text-align: left;
							font-size:10.5pt;
            }
						ol,ul{
							margin:0;
							padding:0;
							margin-right:-1in;
						}
						li{
							margin-bottom:0.1in
							margin-right:-1in;
						}
						p{
							line-height:1;
							margin:0;
							padding:0
						}
						.vue-office-docx{height:100%;overflow-y:auto}
						.vue-office-docx .docx-wrapper>section.docx{margin-bottom:5px}
						@media screen and (max-width: 800px){
							.vue-office-docx .docx-wrapper{padding:10px}
							.vue-office-docx .docx-wrapper>section.docx{padding:10px!important;width:100%!important}
						}

.docx-wrapper { background: gray; padding: 30px; padding-bottom: 0px; display: flex; flex-flow: column; align-items: center; }
.docx-wrapper>section.docx { background: white; box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); margin-bottom: 30px; }
.docx { color: black; hyphens: auto; text-underline-position: from-font; }
section.docx { box-sizing: border-box; display: flex; flex-flow: column nowrap; position: relative; overflow: hidden; }
section.docx>article { margin-bottom: auto; z-index: 1; }
section.docx>footer { z-index: 1; }
.docx table { border-collapse: collapse; }
.docx table td, .docx table th { vertical-align: top; }
.docx p { margin: 0pt; min-height: 1em; }
.docx span { white-space: pre-wrap; overflow-wrap: break-word; }
.docx a { color: inherit; text-decoration: inherit; }
.docx svg { fill: transparent; }
.docx {
  --docx-majorHAnsi-font: Calibri Light;
  --docx-minorHAnsi-font: Calibri;
  --docx-dk1-color: #000000;
  --docx-lt1-color: #FFFFFF;
  --docx-dk2-color: #44546A;
  --docx-lt2-color: #E7E6E6;
  --docx-accent1-color: #5B9BD5;
  --docx-accent2-color: #ED7D31;
  --docx-accent3-color: #A5A5A5;
  --docx-accent4-color: #FFC000;
  --docx-accent5-color: #4472C4;
  --docx-accent6-color: #70AD47;
  --docx-hlink-color: #0563C1;
  --docx-folHlink-color: #954F72;
}
.docx span {
  font-family: Times New Roman;
}
.docx p, p.docx_1 {
  text-align: justify;
}
.docx p, p.docx_1 span {
  font-family: var(--docx-minorHAnsi-font);
  min-height: 10.50pt;
  font-size: 10.50pt;
}
.docx table, table.docx_2 td {
  padding-top: 0.00pt;
  padding-left: 5.40pt;
  padding-bottom: 0.00pt;
  padding-right: 5.40pt;
}
table.docx_3 p {
  text-align: justify;
}
table.docx_3 td {
  border-top: 0.50pt solid black;
  border-left: 0.50pt solid black;
  border-bottom: 0.50pt solid black;
  border-right: 0.50pt solid black;
  padding-top: 0.00pt;
  padding-left: 5.40pt;
  padding-bottom: 0.00pt;
  padding-right: 5.40pt;
}
	p.docx-num-2-0:before {
  content: ""counter(docx-num-2-0, decimal)"、";
  counter-increment: docx-num-2-0;
}
p.docx-num-2-0 {
  display: list-item;
  list-style-position: inside;
  list-style-type: none;
}
p.docx-num-1-0:before {
  content: ""counter(docx-num-1-0, decimal)"、";
  counter-increment: docx-num-1-0;
}
p.docx-num-1-0 {
  display: list-item;
  list-style-position: inside;
  list-style-type: none;
}
.docx-wrapper {
  counter-reset: docx-num-2-0 4 docx-num-1-0 0;
}



          </style>
      </head>
      <body>
      ${html}
      </body>
      </html>`;
      // console.log(content)
      // return console.log(content)
      // debugger
      let blob = htmlDocx.asBlob(content);

      // const uploadFile = new File([blob], `${name}.docx`, {
      //   type:
      //     "application/vnd.openxmlformats-officedocument.wordprocessingml.document"
      // });
      saveAs(blob, `${name}.docx`);
      return true;
      // this.beforeUploadHtml(uploadFile);
    },
    },
    computed: {
        showFileUrl() {
            if (this.menuList.length) {
              if(this.menuList[this.menuIndex]){
								return this.menuList[this.menuIndex].url
							}else {
								return ""
							}
            } else {
                return "";
            }
        },
        aiBoxRightCid() {
            let _result = this.cid;

            let _cidList = _result.split(',');
            if (_cidList.length > 1) {
                _cidList.sort((a, b) => parseInt(b) - parseInt(a));
                _result = _cidList.join(',');
            }
            console.log("我是cid", _result);

            return _result
        }
    },
    mounted() {
        // this.getData();
        // this.getPageBase();
        // this.historyTalk();

    },
};
</script>

<style scoped>
.pb_content {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 0 20px;
}

.bbox_serch {
    width: 100%;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
}

.top {
    display: flex;
    justify-content: space-between;
    width: 100% !important;
    box-sizing: border-box;
    margin: 0px auto;
    padding: 10px 0;
    height: 54px;
    align-items: center;

}

.pb_head_t_left {
    display: flex;
    align-items: center;
}

/* .pb_head_t_right {} */
.preview_icon {
    background: url('../../../assets/icon/test/test_preview.png') no-repeat;
    width: 22px;
    height: 22px;
    display: inline-block;
    background-size: contain;
    cursor: pointer;
    margin-right: 20px;
}

.case_icon {
    background: url('../../../assets/icon/test/test_case.png') no-repeat;
    width: 22px;
    height: 22px;
    display: inline-block;
    background-size: contain;
    cursor: pointer;
    margin-right: 15px;
}

.problem_icon {
    background: url('../../../assets/icon/test/test_problem.png') no-repeat;
    width: 22px;
    height: 22px;
    display: inline-block;
    background-size: contain;
    cursor: pointer;
    margin-right: 10px;
}

.subClick {
    font-size: 16px;
    cursor: pointer;
    margin-left: 10px;
    /* color: #ab582f; */
    color: #409eff;
}

.sub_head {
    position: relative;
    font-size: 20px;
    font-weight: bold;
    padding: 0 15px;
}

.sub_head::after {
    content: "";
    width: 100%;
    background: #3681FC;
    height: 2px;
    position: absolute;
    left: 0;
    bottom: -8px;
}

.subClick {
    /* font-size: 16px; */
    font-size: 20px;
    cursor: pointer;
    /* margin-left: 17.5px; */
    /* color: #ab582f; */
    /* color: #409eff; */
    color: #999;
    padding: 0 15px;
}

.subClick:hover {
    color: #000;
}

.sub_head+.subClick,
.subClick+.subClick,
.subClick+.sub_head {
    margin-left: 17.5px;
}

.bbox {
    background: #fff;
    border-radius: 0 5px 5px 5px;
    padding: 15px 0;
    box-sizing: border-box;
    min-height: 900px;
}

.bbox_nav {
    display: flex;
    width: 100%;
    box-sizing: border-box;
    padding: 0 20px;
    align-items: center;
}

.teaLis {
    display: flex;
}

.teal {
    padding: 10px 20px;
    cursor: pointer;
}

.Tbor {
    border-bottom: 2px rgba(54, 129, 252, 1) solid;
    font-weight: 600;
}


.randarZong {
    max-width: 100%;
    width: 500px;
    height: 500px;
    margin: 0 auto;
}

.randarBox {
    padding: 20px;
    width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
}

.randarBox .title {
    width: 100%;
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 20px;
}

.randarTeacher {
    width: calc(100% / 4 - 20px);
    margin-right: 20px;
    margin-bottom: 20px;
}


.randarTitle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.randarTitle>span:nth-child(1) {}

.randarTitle>span:nth-child(2) {}

.randar {
    width: calc(100%);
    height: 350px;
    border: 1px solid #e4e4e4;
    border-radius: 5px;
}

@media screen and (max-width: 1280px) {
    .randarTeacher {
        width: calc(100% / 2 - 20px);
    }
}

@media screen and (max-width: 800px) {
    .randarTeacher {
        width: calc(100%);
        margin-right: 0;
    }
}

.iconfont {
    font-family: "iconfont" !important;
    font-size: 22px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

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

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

.student_table>>>.el-table--border td {
    border-right: 0px !important;
}

.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;
}

.cc_bottom {
    width: 100%;
    height: calc(100%);
    background-color: #fff;
    border-radius: 5px;
    display: flex;

}

.cc_b_middle {
    width: 50%;
    height: 100%;
    border-right: 1px solid #E4E7ED;
}

.cc_b_middle>div {
    width: 100%;
    height: 100%;
}

.cc_b_left {
    border-right: 1px solid #E4E7ED;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    width: 13%;
    overflow: hidden;
    border-radius: 5px;
}

.menu_container {
  width: 100%;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* 占据除折叠按钮外的所有空间 */
}

.menu_container>div{
  display: flex;
  align-items: center;
  width: calc(100% - 20px - 20px);
  height: 40px;
  background-color: #fff;
  margin: 20px 20px 0 20px;
  border-radius: 8px;
  box-sizing: border-box;
  padding-left: 10px;
  color: #828282;
  cursor: pointer;
}



.menu_container>div>span{
  width: 18px;
  height: 18px;
  margin-right: 10px;
}

.menu_container>span{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 40px;
  padding: 5px;
  background-color: #fff;
  box-sizing: border-box;
  color: #828282;
  cursor: pointer;
  /* margin-top: 10px; */
}

.menu_container>span>span{
  width: 18px;
  height: 18px;
  display: flex;
}

.cc_b_l_menu {
    padding: 10px;
    margin: 17px;
    border-radius: 7px;
    color: #828282;
    cursor: pointer;
    display: flex;
}

.menu_container .active {
    background-color: #3681fc !important;
    color: #fff;
}

.session_icon {
    background: url('../../../assets/icon/test/test_session.png') no-repeat center;
    display: inline-block;
    background-size: contain;
}

.session_icon.active {
    background: url('../../../assets/icon/test/test_session_active.png') no-repeat center;
    display: inline-block;
    background-size: contain;
}

.history_icon {
    background: url('../../../assets/icon/test/test_history.svg') no-repeat center;
    display: inline-block;
    background-size: contain;
}

.history_icon.active {
    background: url('../../../assets/icon/test/test_history_active.svg') no-repeat center;
    display: inline-block;
    background-size: contain;
}

/* .mysql_icon{
    background:url('../../../../assets/icon/test/test_mysql.png') no-repeat;
    width: 18px;
    height: 18px;
    display: inline-block;
    background-size: contain;
}
.mysql_icon.active{
    background:url('../../../../assets/icon/test/test_mysql_active.png') no-repeat;
    width: 18px;
    height: 18px;
    display: inline-block;
    background-size: contain;
} */
.fold_btn {
  width: 100%;
  height: 60px;
  border-top: 1px solid #E4E7ED;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  padding-left: 15px;
    /* padding: 27px 20px;
    cursor: pointer;
    border-top: 1px solid #E4E7ED;
    margin-top: auto; */
    /* 确保折叠按钮在底部 */
}

.more_icon {
    background: url('../../../assets/icon/test/test_fold.svg') no-repeat;
    background-size: 100%;
    width: 18px;
    height: 18px;
    display: inline-block;
    background-size: contain;
    cursor: pointer;

}

.cc_b_right {
    width: 50%;
    height: 100%;
    box-sizing: border-box;
		overflow: auto;
}

.preview_file,
.bianji_file {
    margin: 10px;
    width: 65px;
    cursor: pointer;
}

.preview_file.active {
    font-weight: bold;
    border-bottom: 2px solid blue;
}

.bianji_file.active {
  font-weight: bold;
    border-bottom: 2px solid blue;
}
[contenteditable="true"]:focus {
  outline: none;
  border: none;
}
.bianji_area {
    margin: 0;
   width: 100%;
   height: 100%;
   position: relative;
}

.bianji_area>span{
  width: 25px;
  height: 25px;
  position: absolute;
  right: 15px;
  top: 8px;
  z-index: 999;
  /* background-color: red; */
}

.bianji_area>span>img{
  width: 100%;
  height: 100%;
  cursor: pointer;
}
.aiText{
    margin-top:10px;
}
.userAsk{
    font-size: 20px;
    font-weight: bold;
}
/* .aiText>p{
    margin-top: 0;
    margin-bottom: 16px;
}
.aiText>ol{
    padding-left: 2em;
    margin-top: 0;
    margin-bottom: 0;
} */
.cc_b_r_menu {
    width: 100%;
    height: 50px;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    border-bottom: 1px solid #E4E7ED;
    overflow: auto;
}

.cc_b_r_menu>div {
    height: 49px;
    max-width: 100px;
    padding: 0 15px;
    display: flex;
    text-align: center;
    /* justify-content: center; */
    align-items: center;
    cursor: pointer;
    transition: all 0.3s;
    /* text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap; */
}

.cc_b_r_menu>div:hover {
    background-color: #F5F7FA;
}

.cc_b_r_menu>div>span {
    width: 100%;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.cc_b_r_menu_active {
    background-color: #3681FC !important;
    color: #fff;
}

.cc_b_r_content {
    width: 100%;
    overflow-y: auto;
    overflow-x: auto;
    max-height: calc(100% - 50px);
}

.cc_b_r_btn {
    display: flex;
    align-items: center;
}

.close_icon {
    width: 0 !important;
    height: 22px;
    display: inline-block;
    background-size: contain;
    cursor: pointer;
}

.close_icon.active {
    background: url('../../../assets/icon/test/test_close_active.png') no-repeat;
    width: 40px !important;
    height: 22px;
    display: inline-block;
    background-size: contain;
    cursor: pointer;
}

.b_r_menu{
  display: flex;
  justify-content: space-between;
}

.b_r_menu>div {
  flex: 1;
  height: auto;
}

.b_r_menu_content {
    display: block;
    height: auto;
    /* flex-direction: column; */
    background: linear-gradient(to bottom, #dfeaff, #ffffff, #f6f9ff);
    border-radius: 9px;
    margin-top: 15px;
    width: 95%;
    margin-right: 14px;
    padding:10px 0 10px 0;
}

.m_c_title {
    margin: 10px 7px 7px 21px;
    font-size: 16px;
    font-weight: bold;
}

.m_c_item {
    border-radius: 5px;
    padding: 8px 8px 8px 13px;
    margin: 7px;
    margin-top: 15px;
    border: 1px solid #E4E7ED;
}

.history_talk {
    background: linear-gradient(to bottom, #dfeaff, #ffffff, #f6f9ff);
    margin: 13px;
    padding: 10px;
}

.h_t_head {
    display: flex;
    justify-content: space-between;
}

.t_h_left {
    margin-left: 13px;
    font-size: 13px;
}

.h_t_table {
    margin: 10px;
    box-shadow: 0px 0px 12px rgb(190 193 199);
}

.h_t_table>>>.el-table td,
.el-table th {
    padding: 9px 0;
}

.bianji {
    display: flex;
    align-items: center;
    margin-right: 10px;
}

.bianji:hover {
    color: rgb(14, 173, 236);
    cursor: pointer;
}

.rename_btn {
    display: flex;
    justify-content: flex-end;
}

.h_t_bottom {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-right: 9px;
}

.el_select {
    width: 89px;
}


.table_title {
    background-color: gray;
}

.student_input>>>.el-input__inner {
    height: 30px;
    width: 179px;
    font-size: 13px;
    padding: 0 10px;
}

.serach_icon {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 13px;
    height: 13px;
    background: url("../../../assets/icon/test/test_search.png") no-repeat;
    background-size: 100% 100%;
    cursor: pointer;
}

.el-input {
    position: relative;
    font-size: 14px;
    display: inline-block;
    width: 100%;
}

.editor>>>.text{
  height: calc( 100% - 42px);
}
</style>
