<!--
 * @Description: 
 * @Author: gcz
 * @Date: 2025-03-10 10:33:30
 * @LastEditors: gcz
 * @LastEditTime: 2025-03-10 11:49:56
 * @FilePath: \knowledge_userui\src\views\SolutionChat.vue
 * @Copyright: Copyright (c) 2016~2025 by gcz, All Rights Reserved. 
-->

<template>
  <div class="solution-chat">
    <!-- 左侧部分 -->
    <div class="left-panel">
      <!-- 对话内容区域 -->
      <div class="chat-content">
        <div v-for="(msg, index) in chatMessages" :key="index" 
             class="message" 
             :class="{ 'user-message': msg.type === 'user', 'ai-message': msg.type === 'ai' }">
          <div class="avatar">
            <img :src="msg.type === 'user' ? userAvatar : assistantAvatar" alt="avatar">
          </div>
          <div class="message-content">
            {{ msg.content }}
          </div>
        </div>
      </div>
      
      <!-- 对话输入区域 -->
      <div class="chat-input">
        <div v-if="template.content" class="template-content">
          <div class="template-title">{{ template.name }}</div>
          <div class="template-body">{{ template.content }}</div>
          <div class="template-reply">
            如果你对方案中内容有更细致的想法，欢迎随时告诉我，我可以进一步完善。
          </div>
        </div>
        <div class="input-box">
          <textarea v-model="inputMessage" placeholder="请输入内容" @keyup.enter="sendMessage"></textarea>
          <div class="send-icon" @click="sendMessage">
            <img src="@/assets/icon-send-red.png" alt="">
          </div>
        </div>
      </div>
    </div>

    <!-- 右侧部分 -->
    <div class="right-panel">
      <!-- 操作按钮 -->
      <div class="action-buttons">
        <div class="button-group">
          <el-tooltip content="复制">
            <img src="@/assets/icon-copy.png" @click="copyContent">
          </el-tooltip>
          <el-tooltip content="收藏">
            <img src="@/assets/icon-star.png" @click="toggleFavorite">
          </el-tooltip>
          <el-tooltip content="下载">
            <img src="@/assets/icon-download.png" @click="downloadContent">
          </el-tooltip>
          <div class="regenerate" @click="regenerateAnswer">
            <img src="@/assets/icon-reanswer.png" @click="regenerateAnswer">
            <span>重新回答</span>
          </div>
          <div class="feedback">
            <img src="@/assets/icon-like.png" @click="like">
            <img src="@/assets/icon-dislike.png" @click="dislike">
          </div>
        </div>
      </div>

      <!-- AI生成的方案内容 -->
      <div class="solution-content">
        {{ solutionContent }}
      </div>
    </div>
  </div>
</template>

<script>
import { ElMessage } from 'element-plus'
import userAvatar from '@/assets/user-avatar.png'
import assistantAvatar from '@/assets/assistant-avatar.png'

export default {
  name: 'SolutionChat',
  data() {
    return {
      chatMessages: [],
      inputMessage: '',
      template: {
        id: null,
        name: '',
        content: ''
      },
      solutionContent: '',
      isFavorite: false,
      isLiked: false,
      isDisliked: false,
      userAvatar,
      assistantAvatar
    }
  },
  created() {
    // 获取路由参数中的模板
    const templateParam = this.$route.query.template
    if (templateParam) {
      try {
        this.template = JSON.parse(templateParam)
      } catch (error) {
        ElMessage.error('模板参数解析失败')
      }
    }
    // 获取方案内容
    this.getSolutionContent()
  },
  methods: {
    async getSolutionContent() {
      try {
        // TODO: 调用后端API获取方案内容
        this.solutionContent = '这里是AI生成的方案内容...'
      } catch (error) {
        ElMessage.error('获取方案内容失败')
      }
    },
    async sendMessage() {
      if (!this.inputMessage.trim()) return
      const message = this.inputMessage
      this.chatMessages.push({
        content: message,
        type: 'user'
      })
      this.inputMessage = ''
      
      try {
        // TODO: 调用后端API发送消息
        const response = '这是AI的回复'
        this.chatMessages.push({
          content: response,
          type: 'ai'
        })
      } catch (error) {
        ElMessage.error('发送消息失败')
      }
    },
    async copyContent() {
      try {
        await navigator.clipboard.writeText(this.solutionContent)
        ElMessage.success('复制成功')
      } catch (error) {
        ElMessage.error('复制失败')
      }
    },
    async toggleFavorite() {
      try {
        // TODO: 调用后端API进行收藏/取消收藏
        this.isFavorite = !this.isFavorite
        ElMessage.success(this.isFavorite ? '收藏成功' : '已取消收藏')
      } catch (error) {
        ElMessage.error(this.isFavorite ? '收藏失败' : '取消收藏失败')
      }
    },
    downloadContent() {
      try {
        const blob = new Blob([this.solutionContent], { type: 'text/plain;charset=utf-8' })
        const url = window.URL.createObjectURL(blob)
        const link = document.createElement('a')
        link.href = url
        link.download = '方案内容.txt'
        document.body.appendChild(link)
        link.click()
        document.body.removeChild(link)
        window.URL.revokeObjectURL(url)
        ElMessage.success('下载成功')
      } catch (error) {
        ElMessage.error('下载失败')
      }
    },
    async regenerateAnswer() {
      try {
        // TODO: 调用后端API重新生成答案
        await this.getSolutionContent()
        ElMessage.success('重新生成成功')
      } catch (error) {
        ElMessage.error('重新生成失败')
      }
    },
    async like() {
      if (this.isDisliked) {
        this.isDisliked = false
      }
      this.isLiked = !this.isLiked
      try {
        // TODO: 调用后端API进行点赞
        ElMessage.success(this.isLiked ? '点赞成功' : '已取消点赞')
      } catch (error) {
        this.isLiked = !this.isLiked
        ElMessage.error('操作失败')
      }
    },
    async dislike() {
      if (this.isLiked) {
        this.isLiked = false
      }
      this.isDisliked = !this.isDisliked
      try {
        // TODO: 调用后端API进行踩
        ElMessage.success(this.isDisliked ? '已踩' : '已取消踩')
      } catch (error) {
        this.isDisliked = !this.isDisliked
        ElMessage.error('操作失败')
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.solution-chat {
  display: flex;
  height: 100vh;
  
  .left-panel {
    width: 400px;
    display: flex;
    flex-direction: column;
    background-color: $background-gray;
    border-radius: 0px 30px 30px 0px;
    box-shadow: 2px 0px 10px 0px rgba(172,165,165,0.5);
    margin-right: 20px;
    
    .chat-content {
      flex: 1;
      overflow-y: auto;
      padding: 20px;
      
      .message {
        display: flex;
        align-items: flex-start;
        margin-bottom: 20px;
        gap: 12px;
        
        .avatar {
          width: 40px;
          height: 40px;
          flex-shrink: 0;
          
          img {
            width: 100%;
            height: 100%;
            border-radius: 50%;
            object-fit: cover;
          }
        }
        
        .message-content {
          max-width: calc(100% - 60px);
          padding: 12px 16px;
          border-radius: 12px;
          font-size: 14px;
          line-height: 1.5;
        }
        
        &.user-message {
          flex-direction: row-reverse;
          
          .message-content {
            background-color: #e8f3ff;
            border-radius: 12px 2px 12px 12px;
            color: #333;
          }
        }
        
        &.ai-message {
          .message-content {
            background-color: #f5f7fa;
            border-radius: 2px 12px 12px 12px;
            color: #333;
          }
        }
      }
    }
    
    .chat-input {
      padding: 20px;
      
      .template-content {
        margin-bottom: 15px;
        padding: 15px;
        background: #f5f7fa;
        border-radius: 4px;
        border: 1px solid #e0e0e0;
        
        .template-title {
          font-size: 16px;
          font-weight: bold;
          margin-bottom: 10px;
          color: #333;
        }

        .template-body {
          color: #666;
          line-height: 1.5;
          margin-bottom: 10px;
        }
        
        .template-reply {
          color: #666;
          margin-top: 10px;
          font-size: 14px;
          padding-top: 10px;
          border-top: 1px dashed #e0e0e0;
        }
      }
      
      .input-box {
        position: relative;
        
        textarea {
          width: 100%;
          height: 80px;
          padding: 12px;
          border: 1px solid #dcdfe6;
          border-radius: 4px;
          resize: none;
          font-size: 14px;
          line-height: 1.5;
          transition: border-color 0.2s;
          border-radius: 20px;
          
          &:focus {
            border-color: $primary-color;
            outline: none;
          }
        }
        
        .send-icon {
          position: absolute;
          right: 12px;
          bottom: 12px;
          cursor: pointer;
          color: #409EFF;
          width: 24px;
          height: 24px;
          display: flex;
          align-items: center;
          justify-content: center;
          border-radius: 50%;
          transition: all 0.2s;
          
          &:hover {
            background: #ecf5ff;
          }
          
          img {
            width: 24px;
            height: 24px;
          }
        }
      }
    }
  }
  
  .right-panel {
    flex: 1;
    padding: 20px;
    background: #fff;
    
    .action-buttons {
      margin-bottom: 20px;
      padding: 15px;
      border-radius: 4px;
      
      .button-group {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 15px;
        
        img {
          width: 20px;
          height: 20px;
          cursor: pointer;
        }
        
        .regenerate {
          display: flex;
          align-items: center;
          gap: 8px;
          cursor: pointer;
          padding: 8px 16px;
          border-radius: 4px;
          transition: all 0.2s;
          
          &:hover {
            background: #ecf5ff;
            color: $primary-color;
          }
          
          i {
            font-size: 16px;
          }
          
          span {
            font-size: 14px;
          }
        }
        
        .feedback {
          display: flex;
          gap: 15px;
          
          i {
            &.reverse {
              transform: rotate(180deg);
              
              &:hover {
                transform: rotate(180deg) scale(1.1);
              }
              
              &.active {
                color: #f56c6c;
              }
            }
            
            &.active:not(.reverse) {
              color: #67c23a;
            }
          }
        }
      }
    }
    
    .solution-content {
      padding: 20px;
    }
  }
}
</style>
