<script lang="ts" setup>
import { onMounted } from 'vue'
import { fetchToolList } from '@/api/config'
import HistoryRecord from './components/HistoryRecord.vue'

interface ToolItem {
  toolName: string
  toolIcon: string
  toolType: string
  toolContent: string
}

const toolList = ref<ToolItem[]>([])
async function getToolList() {
  const res = await fetchToolList()
  toolList.value = res.data ? res.data : []
}

function onClickToolItem(item: ToolItem) {
  if (item.toolType === '01')
    window.location.href = item.toolContent
}

function updateCurConversation(id: string) {
  console.log(id)
}

onMounted(() => {
  getToolList()
})

</script>

<template>
  <div class="page-more-container">
    <div class="top-tool">
      <div v-for="(item, index) in toolList" :key="index">
        <div class="item" @click="onClickToolItem(item)">
          <img class="icon" :src="item.toolIcon" alt="">
          <div class="name">
            {{ item.toolName }}
          </div>
        </div>
      </div>
    </div>
    <div class="history-box">
      <HistoryRecord @updateCurConversation="updateCurConversation"></HistoryRecord>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.page-more-container {
  background-image: url('../../assets/images/sdream/bg.png');
  background-repeat: no-repeat;
  background-size: 100% auto;
  padding: 16px;
  .top-tool {
    display: flex;
    justify-content: space-between;
    margin-bottom: 12px;
    .item {
      box-sizing: border-box;
      width: 166px;
      height: 60px;
      background: #FFFFFF;
      box-shadow: 0px 2px 4px 0px rgba(236,242,248,0.3);
      border-radius: 16px;
      border: 1px solid #FFFFFF;
      backdrop-filter: blur(8px);
      display: flex;
      padding: 16px 20px;
      .icon {
        width: 32px;
        height: 32px;
      }
      .name {
        font-size: 16px;
        color: #27353C;
        line-height: 22px;
        margin: 4px 0 0 13px;
      }
    }
  }
  .history-box {
    width: 343px;
    height: calc(100vh - 120px);
    background: #FFFFFF;
    border-radius: 16px;
    margin: 0 auto;
  }
}
</style>
