<template>
  <div class="history-box">
    <div class="add-new" @click="handlerAdd">
      <img src="~@/assets/images/ai/add-new.png" alt="" />
      <span>新建聊天</span>
    </div>
    <section>
      <div class="history-title">历史记录</div>
      <div class="history-list" v-if="list.length > 0">
        <div class="history-item" v-for="item in list" :key="item.id" @click="getMessageInfo(item.id)">
          <div class="history-row-title">{{ formatFristIssue(item) }}</div>
          <img src="~@/assets/images/ai/icon-delet.png" class="del-icon" alt="" @click.stop="delMessageItem(item.id)" />
        </div>
      </div>
      <div class="history-list" v-else>
        <n-empty description="暂无记录"></n-empty>
      </div>
    </section>
  </div>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import { historyMessageRoomList, historyMessageRoomDel, historyMessageRoomById } from '@/api/path'
import { httpErrorHandle } from '@/utils'

const emits = defineEmits(['finishInfo','handlerAddmsg'])

let list = ref([])


/**
 * 新建聊天
 */
 const handlerAdd = () =>{
  emits('handlerAddmsg')
 }

/**
 * 过滤出第一条问题作为标题
 * @param value
 */
const formatFristIssue = value => {
  const data = JSON.parse(value.content)
  return data[0].text
}
/**
 * 获取聊天记录list
 */
const messageList = async () => {
  const res = await historyMessageRoomList({
    current: 1,
    size: 100
  })
  list.value = res.data.records
}
/**
 * 删除聊天记录
 * @param id
 */
const delMessageItem = async id => {
  const res = await historyMessageRoomDel(id)
  if (res && res.code === 200) {
    window['$message'].success('删除成功')
    messageList()
    return
  }
  httpErrorHandle()
}

/**
 * 获取聊天详情
 * @param id
 */
const getMessageInfo = async id => {
  const res = await historyMessageRoomById(id)
  if (res && res.code === 200) {
    res.data.content = JSON.parse(res.data.content)
   console.log(res.data);
    
    emits('finishInfo', res.data)
    return
  }
  httpErrorHandle()
}

onMounted(() => {
  messageList()
})
defineExpose({
  messageList
})
</script>

<style lang="scss" scoped>
.history-box {
}
.add-new {
  cursor: pointer;
  height: 38px;
  border-radius: 4px;
  border: 1px solid #507afc;
  margin-bottom: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 14px;
  color: #507afc;
  font-weight: 400;
  font-family: 'AlibabaPuHuiTi-Regular';
  img {
    height: 13px;
    width: 13px;
  }
}
.history-title {
  font-size: 14px;
  color: #ffffff;
  font-weight: bold;
  font-family: 'AlibabaPuHuiTi-Medium';
}
.history-list {
  margin: 10px 0;
  min-height: 5vh;
  max-height: 25vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;

  .history-item {
    cursor: pointer;
    box-sizing: border-box;
    padding: 10px;

    border-radius: 4px;
    display: flex;
    align-items: center;
    gap: 3px;
    .history-row-title {
      flex: 1;
      font-size: 14px;
      color: #cfd5e5;
      font-weight: 400;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      font-family: 'AlibabaPuHuiTi-Regular';
    }

    .del-icon {
      display: block;
      height: 13px;
      width: 13px;
      display: none;
    }
  }
  .history-item:hover {
    background-color: #3d424d;
    .del-icon {
      display: block;
    }
  }
}
</style>
