<script setup lang="ts">
const dialogVisible = ref(false)

const requestContent = ref()
// const requestList = ref([])
const responseContent = ref()
// const responseList = ref()
const requestContentRef = ref<HTMLElement | null>(null)
const responseHeight = ref(580)
const openDialog = (request, response) => {
  dialogVisible.value = true
  requestContent.value = request
  responseContent.value = response.choices[0].message.content
  // requestList.value = JSON.stringify(request).split('\n')
  // responseList.value = JSON.stringify(response).split('\n')
  nextTick(() => {
    if (requestContentRef.value) {
      const height = requestContentRef.value.scrollHeight
      responseHeight.value = 726 - height - 122
    }
  })
}
defineExpose({
  openDialog
})
</script>

<template>
  <el-dialog
    v-model="dialogVisible"
    class="ai-api-log-dialog"
    title="AI API Log"
    width="1000"
    top="10vh"
  >
    <div class="request-section">
      <div class="title">Request Content</div>
      <div class="content" ref="requestContentRef">
        {{ requestContent }}
        <!-- <p v-for="(item, index) in requestList" :key="index">
          {{ item }}
        </p> -->
      </div>
    </div>
    <el-divider style="margin: 16px 0" />
    <div class="response-section">
      <div class="title">Response Content</div>
      <div class="content" :style="{ height: responseHeight + 'px' }">
        <!-- <p v-for="(item, index) in responseList" :key="index">
          {{ item }}
        </p> -->
        {{ responseContent }}
      </div>
    </div>
  </el-dialog>
</template>

<style lang="scss" scoped>
.title {
  margin-bottom: 8px;

  font-size: 18px;
  font-weight: 700;
  line-height: 22px;
}
.content {
  line-height: 21px;
}
.request-section {
  padding: 16px;
  padding-bottom: 0;
}
.response-section {
  padding: 16px;
  padding-top: 0;
  .content {
    padding: 8px 16px 20px 16px;
    border-radius: 6px;
    overflow: auto;
    background-color: var(--color-share-link-bg);
  }
}
</style>
<style lang="scss">
.ai-api-log-dialog {
  height: 80%;
  .el-dialog__body {
    padding: 0;
  }
}
</style>
