<template>
  <div v-loading="loading" class="box">
    <div class="top">
      <div class="top-row">
        <div class="label">发 件 人：</div>
        <div class="value">
          <span
            v-for="item in replyTo"
            :key="item.id"
            style="margin-right: 10px"
          >
            {{ item.personalName }}</span
          >
        </div>
      </div>
      <div class="top-row">
        <div class="label">收 件 人：</div>
        <div class="value">
          <span v-for="item in to" :key="item.id" style="margin-right: 10px">{{
            item.personalName
          }}</span>
        </div>
      </div>
      <div class="top-row" v-if="cc.length > 0">
        <div class="label">抄 送 人：</div>
        <div class="value">
          <span v-for="item in cc" :key="item.id" style="margin-right: 10px">
            {{ item.personalName }}</span
          >
        </div>
      </div>
      <div class="top-row" v-if="bcc.length > 0">
        <div class="label">密 送 人：</div>
        <div class="value">
          <span v-for="item in bcc" :key="item.id" style="margin-right: 10px">
            {{ item.personalName }}</span
          >
        </div>
      </div>
      <div class="top-row">
        <div class="label">时 间：</div>
        <div class="value">{{ time }}</div>
      </div>
    </div>
    <div class="body">
      <iframe
        frameborder="0"
        allowTransparency="true"
        style="
          width: 99% !important;
          overflow-x: scroll;
          padding-top: 10px;
          height: 600px;
        "
        :srcdoc="showBodyText(detailsData.data.content)"
        :ref="'iframeText_' + mailStore.currentId"
        :id="'iframeText_' + mailStore.currentId"
      >
      </iframe>
    </div>
  </div>
</template>

<script setup>
import byTable from "@/components/byTable/index";
import useMailStore from "@/store/modules/mail";
const { proxy } = getCurrentInstance();
const mailStore = useMailStore();
let loading = ref(false);
const detailsData = reactive({
  data: {},
});
const to = ref([]);
const cc = ref([]);
const bcc = ref([]);
const replyTo = ref([]);
const requestData = ref({});
const getDetails = () => {
  loading.value = true;
  proxy
    .post("/mailService/getMessageDetail", {
      ...mailStore.currentMenu,
    })
    .then((res) => {
      detailsData.data = res;
      to.value = res.messageAddressList.filter((x) => x.type === 1);
      cc.value = res.messageAddressList.filter((x) => x.type === 2);
      bcc.value = res.messageAddressList.filter((x) => x.type === 3);
      replyTo.value = res.messageAddressList.filter((x) => x.type === 4);
      loading.value = false;
    });
};

const showBodyText = (text) => {
  if (text) {
    let val = JSON.parse(JSON.stringify(text));
    val = val.replace("body {", "tbody {");
    val = val.replace(
      "td, p, li, th {",
      "tbody td, tbody p, tbody li, tbody th {"
    );
    val = val.replace(
      /<p>/g,
      '<p style="margin-block-start: 0; margin-block-end: 0;">'
    );
    return val;
  } else {
    return text;
  }
};

const init = () => {
  getDetails();
};

onMounted(() => {
  // init();
});

defineExpose({
  initFn: init,
});
</script>

<style lang="scss" scoped>
.box {
  padding: 0 10px;
  font-size: 12px;
  .top {
    padding: 10px;
    background: #f1f1f1;
    .top-row {
      display: flex;
      margin-bottom: 10px;
      .label {
        min-width: 60px;
        color: #999999;
        text-align: right;
      }
      .value {
        flex: 1;
        color: #333333;
        font-weight: 700;
        margin-right: 10px;
      }
    }
  }
}
</style>