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

const openDialog = () => {
  dialogVisible.value = true
}
defineExpose({
  openDialog
})
</script>

<template>
  <el-dialog v-model="dialogVisible" class="log-dialog" title="AI API Log" width="1000" top="10vh">
    <div class="request-section">
      <div class="title">Request Content</div>
      <div class="content">
        Hello, I would like to check the status of my package. The tracking number is ABC123456789.
      </div>
    </div>
    <el-divider style="margin: 16px 0" />
    <div class="response-section">
      <div class="title">Request Content</div>
      <p class="content">
        Hey there! For the package with tracking number ABC123456789, the latest update is: [insert
        latest tracking status here, e.g., shipped, in transit, arrived at the delivery hub, out for
        delivery, etc.]. You can see more details by clicking this link: [insert detailed tracking
        link here].Hey there! For the package with tracking number ABC123456789, the latest update
        is: [insert latest tracking status here, e.g., shipped, in transit, arrived at the delivery
        hub, out for delivery, etc.]. You can see more details by clicking this link: [insert
        detailed tracking link here].Hey there! For the package with tracking number ABC123456789,
        the latest update is: [insert latest tracking status here, e.g., shipped, in transit,
        arrived at the delivery hub, out for delivery, etc.]. You can see more details by clicking
        this link: [insert detailed tracking link here].Hey there! For the package with tracking
        number ABC123456789, the latest update is: [insert latest tracking status here, e.g.,
        shipped, in transit, arrived at the delivery hub, out for delivery, etc.]. You can see more
        details by clicking this link: [insert detailed tracking link here].Hey there! For the
        package with tracking number ABC123456789, the latest update is: [insert latest tracking
        status here, e.g., shipped, in transit, arrived at the delivery hub, out for delivery,
        etc.]. You can see more details by clicking this link: [insert detailed tracking link
        here].Hey there! For the package with tracking number ABC123456789, the latest update is:
        [insert latest tracking status here, e.g., shipped, in transit, arrived at the delivery hub,
        out for delivery, etc.]. You can see more details by clicking this link: [insert detailed
        tracking link here].
      </p>
    </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;
    background-color: var(--color-share-link-bg);
  }
}
</style>
<style>
.log-dialog {
  height: 80%;
  .el-dialog__body {
    padding: 0;
  }
}
</style>
