<template>
  <div class="page-content">
    <div class="title">請求詳情</div>
    <div class="request">
      <div class="request-detail">
        <div class="name">note</div>
        <div class="content">{{ logData.note }}</div>
      </div>
      <div class="request-detail">
        <div class="name">userName</div>
        <div class="content">{{ logData.userName }}</div>
      </div>
    </div>
    <div class="title mt-16">日志详情</div>
    <div class="card mt-16" v-for="item in logList" :key="item.id">
      <div class="d-flex pb-16 border-bottom-1 justify-content-between">
        <div>类型：<span :style="{ color: item.logLevelColor }">{{ item.logLevelName }}</span></div>
        <div class="create-time">创建时间：{{ item.createTime }}</div>
      </div>
      <div class="d-flex mt-16">
        详情：
        <div class="note flex-1" :class="!item.showAll ? 'text-ellipsis' : ''">{{ item.note }}
          <div style="margin-top: 4px;" v-if="item.logLevel === 40000">错误信息：{{ item.errorMsg }}</div>
        </div>
        <span class="activeColor" @click="item.showAll = !item.showAll">{{ item.showAll ? '收起' : '展开' }}</span>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { reactive, ref } from 'vue'
import { type IUserLog } from '@/utils/types'
const logData = reactive<IUserLog>({
  note: '',
  userName: ''
})
const logList = ref<any[]>([])
import emitter from '@/utils/mitt'
import { sysLog  } from '@/utils/api'
import { useRoute, useRouter } from 'vue-router'
const route = useRoute()
const router = useRouter()
const requestId = ref()
const init = () => {
  if (route.query && route.query.requestId) {
    requestId.value = route.query.requestId
    getData()
  } else {
    router.push({ name: '404' })
  }
}
const getData = async () => {
  emitter.emit('showLoading', '')
  const { data } = await sysLog(requestId.value)
  logData.note = data.sysUserLog.note
  logData.userName = data.sysUserLog.userName
  logList.value = data.sysUserLogDetail.map((ele: any) => {
    ele.showAll = false
    return ele
  })
  emitter.emit('hiddenLoading', '')
}
init()
</script>

<style lang="scss" scoped>
.page-content {
  padding: 10px;
  font-size: 13px;
}
.pb-10{
  padding-bottom: 10px;
}
table {
  width: 100vw;
  overflow: auto;
}
.create-time {
  font-size: 12px;
  color: #909090;
}
.title {
  font-weight: bold;
  text-align: center;
  padding: 4px 0;
  background-color: #d9d9d9;
}
.request {
  border: 1px solid #e2e2e2;
  .request-detail {
    display: flex;
    border-bottom: 1px solid #e2e2e2;
    .name {
      width: 100px;
      padding: 10px;
      text-align: center;
      border-right: 1px solid #e2e2e2;
    }
    .content {
      word-break: break-all;
      padding: 10px;
      flex: 1;
      text-align: center;
      color: #1989fa;
    }
  }
}
.note {
  word-break: break-all;
  margin-right: 4px;
}
</style>