<template>
  <div class="input-container">
    <!-- 搜索选项 -->
    <div class="search-options">
      <a-checkbox-group v-model:value="searchOptions">
        <a-tooltip title="Knowledge Base">
          <a-checkbox value="knowledge">
            <img src="../../assets/svg/database.svg" alt="Knowledge Base" class="option-icon"/>
          </a-checkbox>
        </a-tooltip>
        <a-tooltip title="Web Search">
          <a-checkbox value="web">
            <img src="../../assets/svg/globe.svg" alt="Web Search" class="option-icon"/>
          </a-checkbox>
        </a-tooltip>
        <a-tooltip title="Local Files">
          <a-checkbox value="local">
            <img src="../../assets/svg/folder.svg" alt="Local Files" class="option-icon"/>
          </a-checkbox>
        </a-tooltip>
      </a-checkbox-group>
    </div>

    <!-- 标签栏 -->
    <div class="tabs-wrapper">
      <div class="tab-item active">
        <img src="../../assets/svg/hot-for-ux.svg" alt="hot topics" class="tab-icon" />
        <span>Hot Topics</span>
      </div>
      <div class="tab-item">
        <img src="../../assets/svg/read.svg" alt="design guide" class="tab-icon" />
        <span>Design Guide</span>
      </div>
    </div>

    <!-- 附件面板 -->
    <div v-if="showAttachments" class="attachments-panel">
      <!-- 保持原有的附件面板内容 -->
    </div>

    <!-- 输入框部分 -->
    <div class="input-wrapper">
      <button class="attachment-btn" @click="toggleAttachments">
        <img src="../../assets/svg/attachment.svg" alt="attachment" class="tab-icon" />
      </button>
      <input
        type="text"
        class="message-input"
        v-model="inputContent"
        @keyup.enter="handleSend"
        placeholder="Type a message..."
      />
      <button
        class="send-btn"
        @click="handleSend"
        :disabled="!inputContent && attachedFiles.length === 0"
      >
        <img src="../../assets/svg/up.svg" alt="send" />
      </button>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const inputContent = ref('');
const showAttachments = ref(false);
const searchOptions = ref(['knowledge']);
const attachedFiles = ref([]);

const toggleAttachments = () => {
  showAttachments.value = !showAttachments.value;
};

const handleSend = () => {
  if (!inputContent.value.trim() && attachedFiles.value.length === 0) return;
  
  emit('send', {
    content: inputContent.value,
    searchOptions: searchOptions.value,
    files: attachedFiles.value
  });
  
  inputContent.value = '';
  attachedFiles.value = [];
  showAttachments.value = false;
};

const emit = defineEmits(['send', 'attachment-toggle']);
</script>

<style lang="less" scoped>
// 将原来 report.vue 中的相关样式复制过来
</style> 