<template>
  <div>
    <div v-if="tableData.length != 0" id="hover" style="margin-top: 10px">
      <div
        v-for="item in tableData"
        :key="item"
        style="display: flex; padding: 8px; height: 65px"
      >
        <div>
          <div style="width: 10px; display: inline-block">
            <div
              style="
                width: 6px;
                height: 6px;
                /* margin-top: 5px; */
                background-color: #409eff;
                border-radius: 50%;
                margin-bottom: 8px;
              "
            ></div>
          </div>
          <div
            id="titleHover"
            style="
              display: inline-block;
              font-size: 15px;
              width: 15vw;
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
              cursor: pointer;
              margin-left: 5px;
            "
            @click="viewEmail(item)"
          >
            <span
              v-if="item.mailState == 3"
              style="color: #f46c6c; margin-right: 2px"
              >急</span
            >
            <span>{{ item.mainTitle }}</span>
            <div style="width: 1vw; display: inline-block">
              <el-icon v-if="item.isRead == 'Y'"></el-icon>
              <el-icon style="margin-left: 5px" v-else
                ><Message color="#f8ac59" size="30px"
              /></el-icon>
            </div>
          </div>

          <div
            style="
              font-size: 14px;
              margin-top: 0.5vh;
              margin-left: 15px;
              color: #a8a8a8;
            "
          >
            {{ item.sendUserName }}
          </div>
        </div>
        <div
          style="font-size: 14px; color: #a6a4aa; position: absolute; right: 0"
        >
          <div style="width: 120px">
            {{ parseTime(item.sendTime, "{y}-{m}-{d} {h}:{i}") }}
          </div>
          <div
            style="
              margin-top: 1vh;
              position: absolute;
              right: 10px;
              font-size: 17px;
            "
          >
            <el-tooltip
              class="item"
              effect="dark"
              content="回复"
              placement="bottom"
            >
              <el-icon
                @click="recover(item)"
                style="cursor: pointer; margin-left: 10px"
                ><Promotion
              /></el-icon>
            </el-tooltip>
            <el-tooltip
              class="item"
              effect="dark"
              content="转发"
              placement="bottom"
            >
              <el-icon
                @click="Forwarding(item)"
                style="margin-left: 10px; cursor: pointer"
              >
                <Share
              /></el-icon>
            </el-tooltip>
          </div>
        </div>
      </div>
    </div>
    <div style="margin-top: 5vh" v-else>
      <el-empty :image="emptyImage" />
    </div>
    <el-dialog
      v-model="dialogVisible1"
      title="查看邮件"
      width="45%"
      :before-close="handleClose"
    >
      <div style="border-bottom: 1px solid #e8e8e8; padding-bottom: 15px">
        <div style="font-size: 16px">
          标题：<span style="font-weight: 700; font-size: 15px">{{
            mainTitle
          }}</span>
        </div>

        <div style="font-size: 15px; margin-top: 12px">
          发件人：{{ sendUserName }}
        </div>
        <div style="font-size: 15px; margin-top: 12px">
          发件时间： {{ parseTime(sendTime, "{y}-{m}-{d} {h}:{i}") }}
        </div>
        <div></div>
      </div>
      <div style="height: 520px; overflow: auto">
        <div style="padding: 10px 0" v-html="mailContent"></div>
        <div v-for="image in getImagesFromData(mailContent)" :key="image">
          <el-image
            :fit="contain"
            :src="image.src"
            :alt="image.alt"
            :width="image.width"
            :height="image.height"
          />
        </div>
        <div v-if="this.files !== []">
          <div v-for="item in files" :key="item" style="margin-top: 20px">
            <el-icon style="color: #1b6ef3; font-size: 26px; padding-top: 15px"
              ><Paperclip style="padding-top: 10px" /></el-icon
            ><a
              style="color: #1b6ef3; font-size: 16px"
              target="_blank"
              :href="item.url"
              >{{ item.name }}</a
            >
          </div>
        </div>
      </div>

      <template #footer>
        <span class="dialog-footer">
          <!-- <el-button type="primary" @click="recover"> 回复 </el-button>
          <el-button type="primary" @click="forwardEmail"> 转发 </el-button> -->
          <el-button @click="dialogVisible1 = false">关闭</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import {
  inboxList,
  setAsRead,
  unread,
  deleteBoxMail,
  unreadList,
  detail,
} from "@/api/email/inbox";
import emptyImage from "@/assets/images/none.png";
export default {
  name: "YinetoaInBox",

  data() {
    return {
      tableData: [],
      emptyImage,
      dialogVisible1: false,
      queryParams1: {
        pageNum: 1,
        pageSize: 10,
        mainTitle: undefined,
      },
    };
  },
  created() {
    this.inboxList();
  },
  mounted() {},

  methods: {
    getImagesFromData(data) {
      // 在这里解析数据，提取图片信息并返回一个包含图片相关属性的数组
      // 例如，假设数据中的图片信息是以<img>标签的形式呈现的：
      const imagePattern =
        /<img\s*src="([^"]+)"\s*alt="([^"]+)"\s*width="(\d+)"\s*height="(\d+)"\s*\/?>/g;
      const images = [];
      let match;
      while ((match = imagePattern.exec(data)) !== null) {
        const src = match[1];
        const alt = match[2];
        const width = parseInt(match[3], 10);
        const height = parseInt(match[4], 10);
        images.push({ src, alt, width, height });
      }
      return images;
    },
    async viewEmail(scope) {
      let { data } = await detail(scope.mailId);
      this.dialogVisible1 = true;
      this.sendTime = data.sendTime;
      this.sendUserName = data.sendUserName;
      this.mailContent = data.mailContent;
      this.mainTitle = data.mainTitle;
      this.mailId = data.mailId;
      this.files = data.files;
      this.inboxList();
      this.unread();
      this.$nextTick(() => {
        this.$emit("updateUnreadAndDrafts");
      });
    },
    //未读数量
    async unread() {
      const unreadNum = await unread();
      this.unreadNum = unreadNum;
      this.$nextTick(() => {
        this.$emit("updateUnreadAndDrafts");
      });
    },
    Forwarding(item) {
      this.$router.push({
        path: "/email",
        query: {
          mailId1: item.mailId,
        },
      });
    },
    recover(item) {
      this.$router.push({
        path: "/email",
        query: {
          mailId: item.mailId,
        },
      });
    },
    //收件箱数据
    async inboxList() {
      let { rows, total } = await inboxList(this.queryParams1);
      this.tableData = rows.slice(0, 5);
    },
  },
};
</script>

<style lang="scss" scoped>
#titleHover :hover {
  color: #409eff !important;
  text-decoration: underline !important;
}
#hover :hover {
  background-color: aliceblue;
}
</style>
