<template>
  <div class="main-container">
    <el-row :gutter="10" class="content-row">
      <!-- 左侧聊天对话框 -->
      <el-col :span="showChart ? 14 : 24" class="chat-panel">
        <ChatBox 
         v-if="isRemarkLoaded" 
          :chat-type="chatType"
          :user-id="userId"
          :placeholder="placeholder"
          :openRemark="openRemark"
          :recommend-questions="recommendQuestions"
          @stream-complete="handleStreamComplete"
          @source-click="handleSourceClick"
          @message-received="handleMessageReceived"
          @chat-created="handleChatCreated"
          @chat-switched="handleChatSwitched"
        />
      </el-col>

      <!-- 右侧图表区域 -->
      <el-col :span="10" v-if="showChart" v-loading="loadChart" class="chart-panel">
        <div class="chart-div">
          <div class="chart-content">
            <ChatChart :chatData="chatData" />
          </div>
          <!-- <div class="chart-actions">
            <el-button type="primary" @click="openPdftable">显示 PDF 列表</el-button>
          </div> -->
        </div>
      </el-col>
    </el-row>
    <el-dialog title="PDF 列表" v-model="dialogVisible" width="50%" @close="handleClose">
      <el-table :data="pdfFiles" style="width: 100%">
        <el-table-column prop="key" label="名称" fit></el-table-column>
        <el-table-column label="操作" width="180">
          <template #default="scope">
            <el-button size="small" @click="openPdf(scope.row.value)">打开</el-button>
          </template>
        </el-table-column>
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">关闭</el-button>
      </span>
    </el-dialog>
    <el-dialog v-model="pdfVisible">
      <PdfTable ref="pdftableref" :pdfUrl="pdfUrl" />
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import ChatChart from './components/ChatChart.vue'
import ChatBox from './components/ChatBox.vue'
import { webSocketService } from '@/utils/websocket'
import { useUserStore } from '@/store/modules/user'
import { useAclStore } from '@/store/modules/acl'
import { ref, reactive, onMounted, onBeforeUnmount, computed } from 'vue'
import { getFilePathList } from '@/api/pdfTbale'
import PdfTable from './components/PdfTable.vue'
import { sendMessages } from '@/api/historicalRecords'
import { getMaintStatData, type TraceFile } from '@/api/chat'
import { ElMessage } from 'element-plus'
import { useI18n } from 'vue-i18n'
import { getRemark,getRecommendations} from '@/api/prologue'

const { t, locale } = useI18n()
const userStore = useUserStore()
const aclStore = useAclStore()

// ChatBox组件所需的配置
const chatType = ref('1') // 聊天类型
const userId = computed(() => aclStore.getUserId) // 用户ID
const placeholder = ref('输入您的问题...') // 输入框占位符
const openRemark = ref('')
const recommendQuestions = ref<string[]>([]) 
// const openRemark = ref(`Hello😊, I am a BRI assistant, a senior train fault analysis expert. You can ask questions about train faults, and I can analyze the retrieved data. Please refer to the following tips:
// | Question templates for different functions | Description |
// |--------------|----------|
// | Fault diagnosis | [Train car number] + [Fault problem/fault phenomenon] |
// | Maintenance record query | [Train car number] + [Latest N maintenance records] |`) // 开场白
// const recommendQuestions = ref(['T34 train, What to do if the Passenger Door cannot be opened','The latest 5 maintenance records of T34 train'])

const showChart = ref(false)
const pdfUrl = ref('/static-resources/files/pdfFile/开悟大模型智能体平台简介1.pdf')
const pdfVisible = ref(false)
const dialogVisible = ref(false)
const pdfFiles = ref([])
const loadChart = ref(true)
const isRemarkLoaded = ref(false)

// 定义类型
type ConversationIdInfo = Record<string, string>

// 响应式变量（初始值解析为对象）
const conversationIdInfo = ref<ConversationIdInfo | null>(parseLocalStorageValue(localStorage.getItem('conversationIdInfo')))

// 安全解析 localStorage 值
function parseLocalStorageValue(value: string | null): ConversationIdInfo | null {
  if (!value) return null
  try {
    const parsed = JSON.parse(value) as ConversationIdInfo
    return Object.keys(parsed).length > 0 ? parsed : null
  } catch {
    return null
  }
}

const tableData = ref([])
const pieChartData = ref([])
const chatData = reactive({
  tableData: [] as TableDataItem[],
  pieChartData: [] as PieChartDataItem[],
})

// 定义类型接口
interface TableDataItem {
  date: string
  rootCause: string
  incidentId: number
  symptom: string
  trainNo: string
  carNo: string
  location: string
  findings: string
  action: string
  system: string
  system1: string
  equipment: string
  time: string
}

interface PieChartDataItem {
  percent: string
  name: string
}

// 获取数据库中的 openRemark 数据
const fetchOpenRemark = async () => {
  try {
    const response = await getRemark(chatType.value)  // 根据 chatType 获取开场白内容
    if (response.data && response.data.content) {
      openRemark.value = response.data.content  // 更新 openRemark
    } else {
      openRemark.value = '默认的开场白'  // 如果没有返回内容，设置默认值
    }
    isRemarkLoaded.value = true  // 数据加载完成后设置为 true
  } catch (error) {
    ElMessage.error('加载开场白失败，请稍后重试')
    console.error(error)
    isRemarkLoaded.value = true
  }
}

// 获取推荐问题
const fetchRecommendations = async () => {
  try {
    const response = await getRecommendations(chatType.value) // 根据 chatType 获取推荐问题列表
    if (response.data) {
      recommendQuestions.value = response.data.map(item => item.questionContent) // 更新推荐问题
    } else {
      recommendQuestions.value = [] 
    }
  } catch (error) {
    ElMessage.error('加载推荐问题失败，请稍后重试')
    console.error(error)
  }
}

// 在组件加载时获取 openRemark 和推荐问题数据
onMounted(() => {
  fetchOpenRemark()
  fetchRecommendations()
})



const openPdf = (url: string) => {
  pdfUrl.value = url.replace('/var/www/assets/', '/')
  console.log('pdfUrl.value', pdfUrl.value)
  pdfVisible.value = true
}

const handleClose = () => {
  //  console.log('Dialog closed');
}

const openPdftable = () => {
  console.log('conversationIdInfo@@', conversationIdInfo)
  const values = Object.values(conversationIdInfo.value || {})
  let conversationId = ''
  if (values.length > 0) {
    const firstValue = values[0]
    conversationId = typeof firstValue === 'string' ? firstValue : ''
  }
  console.log('conversationId@@', conversationId)
  if (conversationId) {
    getFilePathList(conversationId).then(({ data }) => {
      console.log('data', data)
      pdfFiles.value = data
    })
  }
  console.log('pdfFiles.value', pdfFiles.value)
  dialogVisible.value = true
}

// 处理 storage 事件
const handleStorageChange = (event: StorageEvent) => {
  if (event.key === 'conversationIdInfo') {
    conversationIdInfo.value = parseLocalStorageValue(event.newValue)
  }
}

// ChatBox组件事件处理器

// 处理流式请求完成事件
const handleStreamComplete = ({ conversationId, messageId, content }) => {
  console.log('流式请求完成:', { conversationId, messageId, content })
  getMaintStatData(conversationId,messageId).then(({ data }) => {
    //console.log('data', data)
    console.log('data', data)
    if(data.isExistRecord){
      chatData.tableData = data.tableData
      chatData.pieChartData = data.pieChartData
      showChart.value = true
      loadChart.value = false
    }else{
    console.log('常规问答: data',data)
    showChart.value = false
    loadChart.value = false
    }
    
  })
}

// 处理文件来源点击事件
const handleSourceClick = (source: TraceFile) => {
  console.log('点击文件来源:', source)
  ElMessage.info(`点击了文件: ${source.fileName}`)
  // 可以在这里添加文件预览或下载逻辑
}

// 处理消息接收事件
const handleMessageReceived = (message: any) => {
  console.log('收到新消息:', message)
  // 可以在这里处理消息接收后的逻辑
}

// 处理新会话创建事件
const handleChatCreated = (chatIndex: number) => {
  console.log('创建新会话:', chatIndex)
  // 可以在这里处理新会话创建后的逻辑
}

// 处理会话切换事件
const handleChatSwitched = (chatIndex: number) => {
  console.log('切换会话:', chatIndex)
  // 可以在这里处理会话切换后的逻辑
}

onMounted(() => {

  
  window.addEventListener('storage', handleStorageChange)
  webSocketService.on('message', (data) => {
    try {
      const parsedData = JSON.parse(JSON.parse(data))
      if (parsedData.pieChartData && parsedData.tableData) {
        chatData.tableData = parsedData.tableData
        chatData.pieChartData = parsedData.pieChartData
        console.log('send chatData', chatData)
        showChart.value = true
        loadChart.value = false
      }
    } catch (error) {
      console.error('JSON解析错误:', error)
    }
  })
})

onBeforeUnmount(() => {
  window.removeEventListener('storage', handleStorageChange)
})

// 发送历史消息
const sendHistoryMessage = (conversationId: string, query: string) => {
  const dateTime = new Date()
  const options: Intl.DateTimeFormatOptions = {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit',
    second: '2-digit',
    hour12: false,
  }
  const message = {
    conversationId: conversationId,
    questionTime: dateTime
      .toLocaleString('zh-CN', options)
      .replace(/\//g, '-')
      .replace(/(\d+)-(\d+)-(\d+), (\d+):(\d+):(\d+)/, '$1-$2-$3 $4:$5:$6'),
    content: query,
  }
  sendMessages(message).then(({ data }) => {
    console.log('data', data)
  })
}
</script>

<style scoped>
.main-container {
  height: 100vh;
  padding: 8px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-sizing: border-box;
}

.content-row {
  flex: 1;
  height: 100%;
  margin: 0 !important;
}

.chat-panel {
  height: 100%;
  padding: 0 4px;
}

.chart-panel {
  height: 100%;
  padding: 0 4px;
}

.chart-div {
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.chart-content {
  flex: 1;
  min-height: 0;
}

.chart-actions {
  flex-shrink: 0;
  padding: 10px 0;
  text-align: center;
}

.chart-area {
  height: calc(100vh - 40px);
}

.chart-item {
  margin-bottom: 15px;
}

.el-card {
  margin-bottom: 15px;
  transition: box-shadow 0.2s;
}

.el-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

h4 {
  margin: 0 0 16px 0;
  font-size: 16px;
  color: #1f2d3d;
}

/* 确保行和列占满容器高度 */
.el-row {
  height: 100%;
}

.el-col {
  height: 100%;
}
</style>
