<template>
  <div>
    <div style="text-align: center">草稿箱</div>
    <!-- <div>
      <el-button type="primary"
        ><el-icon><Delete /></el-icon> 删除</el-button
      >
    </div> -->
    <el-button @click="delEmail()" size="mini" type="danger"> 删除 </el-button>
    <!-- <div style="margin-top: 10px">
      <el-alert title="未使用任何数据" type="warning" show-icon />
    </div> -->
    <div style="margin-top: 10px; overflow: auto; height: 540px">
      <el-table
        v-loading="loading"
        ref="multipleTableRef"
        :data="tableData"
        style="width: 100%"
        @selection-change="handleSelectionChange1"
      >
        <el-table-column width="55" type="selection" align="center" />
        <el-table-column></el-table-column>
        <el-table-column
          prop="mainTitle"
          label="邮件标题"
          width="810"
          show-overflow-tooltip
        >
          <template #default="scope">
            <el-button size="mini" type="text" @click="viewEmail(scope)">
              <div>
                <div
                  style="display: inline-block"
                  v-if="scope.row.mailState !== null"
                >
                  <el-icon
                    :style="{
                      color:
                        scope.row.mailState === '1'
                          ? 'white'
                          : scope.row.mailState === '2'
                          ? 'orange'
                          : 'red',
                    }"
                    ><Bell
                  /></el-icon>
                </div>
                <div style="display: inline-block; margin-left: 10px">
                  {{ scope.row.mainTitle }}
                </div>
              </div></el-button
            >
          </template>
        </el-table-column>
        <!-- <el-table-column
          align="center"
          property="name"
          label="收件人"
          width="300"
        /> -->
        <el-table-column
          align="center"
          prop="sendTime"
          label="保存时间"
          show-overflow-tooltip
        >
          <template #default="scope">
            {{ parseTime(scope.row.sendTime, "{y}-{m}-{d} {h}:{i}") }}
          </template>
        </el-table-column>
        <el-table-column></el-table-column>

        <!-- <el-table-column align="center" label="操作">
          <template #default="scope">
            <el-button
              @click="viewEmail(scope)"
              text="primary"
              type="primary"
              size="mini"
            >
              <el-icon style="margin-left: 5px"><View /></el-icon> 查看
            </el-button>
            <el-button type="success" text="success"
              ><el-icon style="margin-left: 5px"><Edit /></el-icon>
              编辑</el-button
            >
            <el-button
              @click="delEmail(scope.row.mailId)"
              size="mini"
              type="danger"
              text="danger"
            >
              <el-icon style="margin-left: 5px"><Delete /></el-icon> 删除
            </el-button>
          </template>
        </el-table-column> -->
      </el-table>
    </div>
    <div style="float: right; margin-top: 10px">
      <el-pagination
        v-model:current-page="queryParams.pageNum"
        v-model:page-size="queryParams.pageSize"
        :page-sizes="[10, 20, 30, 50]"
        :small="small"
        :disabled="disabled"
        :background="background"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </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)">
          <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: 0px">
            <el-icon style="color: #1b6ef3; font-size: 26px; padding-top: 0px"
              ><Paperclip style="padding-top: 10px" /></el-icon
            ><a
              style="color: #1b6ef3; font-size: 15px"
              target="_blank"
              :href="item.url"
              >{{ item.name }}</a
            >
          </div>
        </div>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="editorEmail"> 修改 </el-button>
          <el-button @click="dialogVisible1 = false">关闭</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { drafts, draftsDel, selectUsers } from "@/api/email/drafts";
import { detail } from "@/api/email/inbox";
export default {
  created() {
    this.drafts();
  },
  mounted() {},
  watch: {},
  data() {
    return {
      dialogVisible1: false,
      total: null,
      loading: false,
      tableData: [],
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
      mailId2: null,
    };
  },
  methods: {
    //编辑
    editorEmail() {
      this.dialogVisible1 = false;
      this.mailId2 = this.mailId;
      this.$emit("selectPage2", 0, this.mailId2, 3);
    },
    async drafts() {
      this.loading = true;
      let { rows, total } = await drafts();
      this.tableData = rows;
      this.total = total;
      this.loading = false;
    },
    // 多选框选中数据
    handleSelectionChange1(selection) {
      this.delids = selection.map((item) => item.mailId);
      this.single = selection.length !== 1;
      this.multiple = !selection.length;

      // this.delInfo.mailId = this.delids;
    },
    //删除邮件
    async delEmail() {
      const delids = this.delids;

      if (delids.length == 0) {
        this.$modal.msgError("请选择删除邮件");
      } else {
        this.$modal
          .confirm("是否删除已勾选邮件 ?")
          .then(function () {
            return draftsDel(delids);
          })
          .then(() => {
            this.$modal.msgSuccess("删除邮件成功");
            this.drafts();
            this.$emit("updateUnreadAndDrafts");
          })
          .catch(() => {});
      }
    },
    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.row.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;
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep img {
  max-width: 790px;
}
.example-showcase .el-dropdown-link {
  cursor: pointer;
  // color: var(--el-color-primary);
  display: flex;
  align-items: center;
}
</style>
