<template>
  <div class="page-content">
    <div class="normal-title f-b text-center inboxTitle p-10">{{ workInbox.inboxTitle }}</div>
    <div class="text-center">
      <van-tag type="primary" size="medium" v-if="workInbox.stockCode">
        {{ workInbox.stockCode }}【{{ workInbox.stockName }}】
      </van-tag>
      <van-tag type="success" size="medium" class="ms-10">{{ workInbox.inboxTypeSecondName }}</van-tag>
    </div>
    <div class="content text-end mb-5 pe-16">{{ workInbox.firstChargeUserName }}</div>
    <div class="content text-end pe-16">{{ workInbox.createTime }}</div>
    <div v-html="workInbox.inboxContent" class="p-16 inboxContent content"></div>
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import emitter from '@/utils/mitt'
import { useRoute, useRouter } from 'vue-router'
const route = useRoute()
const router = useRouter()
const init = () => {
  if (route.query && route.query.inboxId) {
    emitter.emit('showLoading', '')
    let inboxId = route.query.inboxId
    getWorkInboxDetail(inboxId)
  } else {
    router.push({ name: '404' })
  }
}

let workInbox = ref({
  inboxTitle: '',
  stockCode: '',
  stockName: '',
  inboxTypeSecondName: '',
  firstChargeUserName: '',
  createTime: '',
  inboxContent: ''
})

import { workInboxInfo } from '@/utils/api'
const getWorkInboxDetail = async (inboxId: any) => {
  const { data } = await workInboxInfo(inboxId)
  workInbox.value = data.workInbox
  emitter.emit('setTitle', { title: workInbox.value.inboxTitle, type: 'comment' })
  emitter.emit('hiddenLoading', '')
}
init()
</script>
<style lang='scss' scoped>
.inboxContent {
  margin: 12px 16px 0;
  width: calc(100vw - 32px);
  line-height: 20px;
  font-size: 16px;
  overflow-y: auto;
  height: calc(100vh - 140px);

  @media screen and (min-width: 678px) {
    margin: 12px 0;
    width: calc(674px);
  }
}

:deep(table) {
  border-top: 1px solid #ccc;
  border-left: 1px solid #ccc;
}


:deep(td) {
  border-bottom: 1px solid #ccc;
  border-right: 1px solid #ccc;
  white-space: nowrap;
}

:deep(img) {
  width: 100%;
}

:deep(pre) {
  white-space: pre-wrap;
  word-wrap: break-word;
}

.inboxTitle {
  max-width: 678px;
  word-break: break-all;
}
</style>
