<script setup lang="ts">
import Other from '@/components/common/leftAside/Other.vue'
import Conversation from '@/components/common/leftAside/Conversation.vue'
import { getSVGConversations } from '@/api/aiSVG'
import { onMounted, ref, watch, computed } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { userStore } from '@/stores/user'
import useCreateConversationStore from '@/stores/svgConversation'
import { useThreeProduct } from "@/stores/product.ts";
import { cdnUrl } from "@/utils/common.ts"
import { ConversationActions } from '@/types/conversationActions'

const user = userStore()
const createConversationStore = useCreateConversationStore()
const route = useRoute()
const router = useRouter()
/**
 * 封装获取会话列表的方法
 */
const getConversations = async () => {
  const res = await getSVGConversations()
  createConversationStore.saveConversationList(res)
}

/**
 * 如果用户首次登录成功，获取会话列表
 */
watch(() => user.checkUserLoggedIn, (value) => {
  if (value) {
    getConversations()
  }
}, { immediate: true })





/**
 * 封装新建对话的方法
 */
const newChat = async () => {
  //如果当前就是新会话，不做任何处理
  if (createConversationStore.conversationId === "-1") {
    return;
  }
  createConversationStore.newConversation()
  createConversationStore.conversationId = '-1'
  router.push({ name: 'AiCreate', query: { conversationId: -1 } })
}
const $useThreeProduct = useThreeProduct();
const useTheme = (template: any) => {
  $fabricEditor.setTheme({ ...template })
}
const dataList = computed(() => $useThreeProduct.getThemeList)
const searchValue = ref<string>('')
const handleSearch = () => {
  $useThreeProduct.getSearchValue(searchValue.value)
  dataList.value = $useThreeProduct.searchValues
}

// 封装方法对象，符合 ConversationActions 接口
const actions: ConversationActions = {
  updateConversationTitle: async (messageId, title, isEdit) => {
    await createConversationStore.updateConversationMesg(messageId, title)
    isEdit.value = false
  },
  deleteConversation: async (conversationId) => {
    createConversationStore.deleteConversation(conversationId)
  },
  onSelect: (conversationId) => {
    createConversationStore.conversationId = conversationId
    setActiveIndex(conversationId) // 设置当前高亮的索引

    router.push({ name: 'AiCreate', query: { conversationId } })
  }
}
const activeIndex = ref('')
const setActiveIndex = (index: string) => {
  activeIndex.value = index // 设置当前高亮的索引
}
</script>
<template>
  <aside id="aside">
    <button type="button" v-auth="() => newChat()" class="new-chat">新建对话</button>
    <div class="sys-theme-list">
      <div class="sticker-container">
        <!--        <div class="sticker-header">-->
        <!--          <span>主体设计</span>-->
        <!--          <span>我的图库</span>-->
        <!--        </div>-->
        <div class="sticker-search">
          <input type="text" v-model="searchValue" @keyup.enter="handleSearch" placeholder="贴图名称/编号">
          <svg @click="handleSearch" width="16" height="16" viewBox="0 0 16 16" fill="none"
            xmlns="http://www.w3.org/2000/svg">
            <path
              d="M15.7 14.3L11.5 10.1C12.4 9 13 7.6 13 6C13 2.7 10.3 0 7 0C3.7 0 1 2.7 1 6C1 9.3 3.7 12 7 12C8.6 12 10 11.4 11.1 10.5L15.3 14.7C15.5 14.9 15.8 14.9 16 14.7C16.1 14.5 16.1 14.3 15.7 14.3ZM2 6C2 3.2 4.2 1 7 1C9.8 1 12 3.2 12 6C12 8.8 9.8 11 7 11C4.2 11 2 8.8 2 6Z"
              fill="#9CA3AF" />
          </svg>
        </div>
        <div class="sticker-grid">
          <div class="sticker-item" v-for="template in dataList" @click="useTheme(template)" :key="template.id">
            <img :src="cdnUrl(template.cover)" :alt="template.name" />
          </div>
          <el-empty v-if="!dataList.length"
            style="position: absolute; top: 50%;left: 50%;transform: translate(-50%, -50%);" image-size="80"
            description="暂无数据" />
        </div>
      </div>
    </div>
    <el-divider />
    <div class="histort-conversation-title" style="align-self: flex-start;margin-left:16px ;">历史会话</div>
    <el-scrollbar max-height="400px" style="width: 100%;max-height: 400px;">
      <div class="history">
        <el-menu>
          <el-menu-item v-for="conversation in createConversationStore.conversationList"
            :key="conversation.conversationId">
            <Conversation :conversation :actions :activeIndex @setActiveIndex="setActiveIndex" />
          </el-menu-item>
        </el-menu>
      </div>
    </el-scrollbar>

    <Other :activeIndex @setActiveIndex="setActiveIndex" />
  </aside>
</template>

<style scoped>
#aside {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-items: center;
  align-items: center;
  background-color: #EEEAEA;

  .new-chat {
    width: 231px;
    height: 36px;
    margin-top: 13px;
    border-radius: 15px;
    padding-top: 9px;
    padding-right: 77px;
    padding-bottom: 9px;
    padding-left: 77px;
    background-color: #000000;
    color: #FFFFFF;
    font-size: 15px;
  }

  .sys-theme-list {
    width: 100%;
    padding: 26px 10px 10px 10px;
    box-sizing: border-box;
  }
}

.history {
  margin-left: 10px;

  .el-menu-item {
    background-color: #EEEAEA;

    .dialog {
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 13px;
    }
  }


}

.histort-conversation-title {
  font-family: Inter;
  font-weight: 300;
  font-size: 12px;

}

.sticker-container {
  background-color: #FFFFFF;
  border-radius: 8px;
  padding: 12px;
  width: 100%;
  box-sizing: border-box;
  max-width: 100%;
}

.sticker-header {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
  font-size: 14px;
  font-weight: 500;
  color: #4B5563;
}

.sticker-header span {
  flex: 1;
  cursor: pointer;
  text-align: center;
}

.sticker-search {
  position: relative;
  margin-bottom: 12px;
}

.sticker-search input {
  width: 100%;
  height: 36px;
  border: 1px solid #E5E7EB;
  border-radius: 18px;
  padding: 0 36px 0 12px;
  font-size: 13px;
  outline: none;
  box-sizing: border-box;
}

.sticker-search svg {
  position: absolute;
  right: 12px;
  top: 10px;
}

.sticker-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 12px;
  height: 209px;
  overflow-y: auto;
  position: relative;
}

.sticker-item {
  aspect-ratio: 1/1;
  background-color: #F9FAFB;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  width: 55px;
  height: 55px;
}

.sticker-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sticker-more {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #F9FAFB;
  border-radius: 8px;
  padding: 8px;
  cursor: pointer;
  color: #6B7280;
  font-size: 13px;
}

.sticker-more svg {
  margin-left: 8px;
}
</style>
