<template>
  <div>
    <van-grid :border="false" :column-num="4" :gutter="10" class="emlBox">
      <!-- 上傳更多圖片 -->
      <van-grid-item v-for="(item, index) in list" :key="index">
        <div class="picBox">
          <div @click.stop="preview(item)">
            <svg-icon
              icon-class="new-fujian"
              icon="new-fujian"
              class-name="file-svg-icon"
            />
          </div>
          <van-icon
            @click.stop="list.splice(index,1)"
            class="closeIcon"
            name="clear"
            v-if="isEdit"
          />
        </div>
      </van-grid-item>

      <van-grid-item class="uploadGrid" v-if="list.length < maxCount && isEdit">
        <van-uploader
          :max-count="maxCount"
          :max-size="maxSize*1024*1024"
          :accept="accept"
          class="file-upload__uploader"
          :preview-image="false"
          upload-icon="plus"
          :before-read="beforeRead"
        />
      </van-grid-item>
    </van-grid>
    <div class="tip" v-if="isEdit">只能上傳{{ acceptFile }}文件，不超過{{ maxSize }}M</div>
  </div>
</template>
<script setup>
import { useVModel } from "@vueuse/core"
import { ref, defineProps, defineEmits } from "vue"
import inspectionApi from "@/service/apis/modules/inspectionApi.js"
import { useToast } from '@/hooks'
import * as emlFormat from 'eml-format';
import * as Codec from 'emailjs-mime-codec';
import { Dialog } from "vant";
import nativeApi from '@/tools/native.js'

const props = defineProps({
  maxCount: {
    type: [Number, String],
    defaule: 5
  },
  maxSize: {
    type: [Number, String],
    defaule: 20
  },
  filelList: {
    type: Array,
    default: () => []
  },
  accept: {
    type: String,
    default: 'message/rfc822'
  },
  acceptFile: {
    type: String,
    default: "eml"
  },
  isEdit: {
    type: Boolean,
    default: true
  }
})
const emit = defineEmits(['update:filelList'])
const list = useVModel(props, 'filelList', emit, {
  defaultValue: []
})
const { createToast } = useToast()
const beforeRead = (file) => {
  if (!props.accept.includes(file.type)) {
    createToast.fail({ getContainer: 'body', message: '文件格式錯誤' })
    return false
  }
  let formData = new FormData();
  formData.append("file", file);
  inspectionApi.uploadVideoAPI(formData).then(res => {
    list.value.push(res);
  })
  return true
}
function removeGarbledChars(html) {
  // 刪除最後一個div閉合標籤後的多餘字符
  let content = html;
  let lastDivIndex = html.lastIndexOf('</div>');
  if (lastDivIndex !== -1) {
    content = content.substring(0, lastDivIndex + 6);
  }
  return content
}
// 拼接郵件內容的發件人/收件人/抄送/附件等信息
function concatHeader (file, title) {
  const {to, from, cc, attachments, html} = file;
  let header = `<div><b>主題：</b>${title}</div>`;
  header += `<div><b>發件人：</b>${from.name} <${from.email}></div>`;
  let toList = to.map(item => `${item.name} <${item.email}>`).join('; ');
  header += `<div><b>收件人：</b>${toList}</div>`;
  let ccList = cc.map(item => `${item.name} <${item.email}>`).join('; ');
  header += `<div><b>抄送：</b>${ccList}</div>`;
  header += '<div><b>郵件內容：</b></div>';
  header += removeGarbledChars(html);
  return header;
}
const preview = async (item) => {
  // 郵件預覽功能暫時取消，直接下載文件，附件回顯問題無法解決
  if (item.split(".").at(-1).toLowerCase() === 'eml') {
    fetch(encodeURI(item)).then(res => res.blob()).then((data) => {
      const blob = new Blob([data]);
      const reader = new FileReader();
      reader.onload = async (e) => {
        let emlContent = e.target.result;
        emlContent = Codec.quotedPrintableDecode(emlContent);
        emlFormat.read(emlContent, (err, data) => {
          let title = ''
          if (data.subject) {
            title = Codec.mimeWorsdDecode(data.subject);
          }
          Dialog({
            message: concatHeader(data, title),
            messageAlign: 'left',
            className: "eml-dialog",
            showCancelButton: true,
            confirmButtonText: "下載"
          })
        })
      }
      reader.readAsText(blob);
    })
  }
}
// 文件對象中的type和後綴名不一定一致，所以需要判斷，寫一個函數根據文件的type返回文件後綴名


</script>
<style lang="less">
.eml-dialog {
  .van-dialog__message {
    display: flex;
    flex-direction: column;
  }
  .van-dialog__message > div {
    width: fit-content;
  }
}
</style>
<style lang="less" scoped>
.tip {
  color: #999999;
  margin-bottom: 12px;
  padding-left: 16px !important;
}
.closeIcon {
  position: absolute;
  right: 0px;
  top: 10px;
  font-size: 20px;
}
.file-upload__uploader {
  width: 100%;
  ::v-deep {
    .van-uploader__upload {
      margin: 0;
    }
    .van-uploader__upload-icon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      color: #999999;
      font-weight: bold;
      width: 100%;
      height: 80px;
      background: #fdfdfd;
      border-radius: 6px;
      border: 1px solid #e5e5e5;
      overflow: hidden;
      font-size: 12px;
    }
  }
}
.emlBox {
  padding-left: 16px !important;
  padding-right: 6px;
  .picBox {
    width: 100%;
  }
  .uploadGrid {
    padding-right: 0 !important;
  }
  ::v-deep {
    .van-grid-item__content {
      padding: 10px 0;
      justify-content: start;
      position: relative;
    }
  }
}
.file-svg-icon {
  width: 100%;
  height: 80px;
}
</style>