<template>
  <div class="history-box">
    <section v-show="list.length > 0">
      <div class="history-title">聊天历史记录</div>
      <div class="history-list">
        <div class="history-item" v-for="item in list" :key="item.id" @click="getMessageInfo(item.id)">
          <div class="history-row-title">{{ formatFristIssue(item) }}</div>
          <div class="history-row-icon" @click.stop="delMessageItem(item.id)">
            <n-icon size="14" color="#F25D44" class="del-icon">
              <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 32 32">
                <path d="M12 12h2v12h-2z" fill="currentColor"></path>
                <path d="M18 12h2v12h-2z" fill="currentColor"></path>
                <path d="M4 6v2h2v20a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V8h2V6zm4 22V8h16v20z" fill="currentColor"></path>
                <path d="M12 2h8v2h-8z" fill="currentColor"></path>
              </svg>
            </n-icon>
          </div>
        </div>
      </div>
    </section>
    <section v-show="boardLsit.length > 0">
      <div class="history-title">看板历史记录</div>
      <div class="history-list">
        <div class="history-item" v-for="item in boardLsit" :key="item.id" @click="getBoardInfo(item.id)">
          <div class="history-row-title">{{ item.projectName }}</div>
          <div class="history-row-icon" @click.stop="delProjectItem(item.id)">
            <n-icon size="14" color="#F25D44" class="del-icon">
              <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 32 32">
                <path d="M12 12h2v12h-2z" fill="currentColor"></path>
                <path d="M18 12h2v12h-2z" fill="currentColor"></path>
                <path d="M4 6v2h2v20a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V8h2V6zm4 22V8h16v20z" fill="currentColor"></path>
                <path d="M12 2h8v2h-8z" fill="currentColor"></path>
              </svg>
            </n-icon>
          </div>
        </div>
      </div>
    </section>
  </div>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import { projectListApi, deleteProjectApi, historyMessageRoomList, historyMessageRoomDel } from '@/api/path'
import { useRouter } from 'vue-router'

let list = ref([])
let boardLsit = ref([])
const router = useRouter()
//获取看板List
const fetchList = async () => {
  const res = await projectListApi({
    page: 1,
    limit: 100,
    status: 1
  })
  boardLsit.value = res.data
}
//删除项目看板
const delProjectItem = async id => {
  await deleteProjectApi({ ids: id })
  fetchList()
}

const getBoardInfo = id => {
  router.push('/board/' + id)
}

const formatFristIssue = value => {
  const data = JSON.parse(value.content)
  return data[0].text
}
//获取聊天记录list
const messageList = async () => {
  const res = await historyMessageRoomList()
  list.value = res.data.records
}
//删除聊天记录
const delMessageItem = async id => {
  const res = await historyMessageRoomDel(id)
  if (res) {
    messageList()
  }
}

const getMessageInfo = id => {
  router.push('/chat/' + id)
}

onMounted(() => {
  fetchList()
  messageList()
})

defineExpose({
  fetchList,
  messageList
})
</script>

<style lang="scss" scoped>
.history-box {
  padding-top: 37px;
}
.history-title {
  font-size: 14px;
  color: #ffffff;
  font-weight: bold;
}
.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;
    }
    .del-icon {
      display: none;
    }
  }
  .history-item:hover {
    background-color: #3d424d;
    .del-icon {
      display: block;
    }
  }
}
</style>
