<!--
  Description: 批改界面中 用于显示写作过程记录的组件
  Author: XiaoYu
  Created Date: 2024-7-27
-->
<!-- update: 已弃用 -->
<template>  
  <div class="content-selector">  
    <!-- 按钮组 -->  
    <div class="button-group">
      <el-button color="#597D3B" class="submit-button" @click="selectContent(0)">AI对话</el-button>
    </div>  
  
    <!-- update: 删掉了字典和浏览器记录的按钮，只保留AI对话 -->  
    <div class="content-input-box">  
      <!-- 根据selectedContent的值动态显示内容 -->  
      <div v-if="selectedContent === 0" class="content-item">  
        <!-- TODO:调取AI对话内容，并显示在这里 -->  
        <AIChatter :dialogueId="dataForm.dialogueId" :messages="dataForm.messages" />  
      </div>  
    </div>  
  </div>  
</template>

<script setup lang="ts">  
import AIChatter from '@/components/AIChatter/AIChatter.vue';
import { IDialogue } from '@/types/dialogue';
import { reactive, ref } from 'vue';
import { useRoute } from 'vue-router';
import { useStore } from '@/store';
import useApis from '@/apis';

const route = useRoute()
const assignmentId  = Number(route.params.assignmentId) 
const apis = useApis()
const store = useStore()


const dataForm =reactive<{
  messages: IDialogue[],
  dialogueId: string,

}>({
  messages: [],
  dialogueId: ''
})
</script>

<script>  
export default {  
  name: 'ContentSelector', // 组件名称  
  data() {  
    return {  
      // selectedContent用于跟踪当前选中的内容索引  
      selectedContent: 0,  
    };  
  },  
  methods: {  
    // selectContent方法用于更新selectedContent的值  
    selectContent(index) {  
      this.selectedContent = index;  
    },  
  },  
};  
</script>



<style scoped>

.content-selector {  
  display: flex;  
  align-items: flex-start; /* 确保按钮和内容输入框垂直对齐 */  
  padding: 10px;  
}  
  
.button-group {  
  display: flex;  
  flex-direction: column; /* 设置为竖向排列 */  
  margin-right: 20px; /* 与内容输入框之间保持一定距离 */  
}   
  
.button-group button {  
  margin: 5px 0;  
  padding: 10px 20px;  
  font-size: 16px;  
  cursor: pointer;  
  border-radius: 5px; 
  
}  
  
/* .button-group button:hover {  
  background-color: #e0e0e0;  
}   */
  
.content-input-box {  
  height: 25vh; 
  width: 65vh;
  border: 2px solid #ccc; /* 实线边框 */  
  padding: 10px;  
  border-radius: 5px;  
  position: relative; /* 为内部元素定位做准备（如果需要的话） */  
}  
  
 
  
textarea {  
  width: 100%; /* 宽度占满内容输入框 */  
  height: 24vh; /* 示例高度，可以根据需要调整 */  
  border: none; /* 移除默认的textarea边框 */  
  resize: none; /* 禁止用户调整大小 */  
  background-color: #f9f9f9; /* 可选的背景色 */  
  padding: 10px;  
  box-sizing: border-box; /* 使得padding和border不会增加元素的宽度 */  
}  


</style>