<template>
  <div class="page">
    <div class="page-body">
      <div style="padding: .2rem;" v-if="list.length > 0">
        <div
          class="flex-sb"
          v-for="(item, index) in list"
          :key="index"
          @click="openDetails(item)"
        >
          <h-img
            :src="
              !item.readAt ? 'perfil/email_.png' : 'perfil/email_icon_2.png'
            "
          />
          <div class="content">{{ item.title }}</div>
          <div class="right">
            <p>Tempo de envio：</p>
            <span>{{ fomartDate(item.createdAt) }}</span>
          </div>
        </div>
      </div>
      <div class="no-data" v-if="list.length == 0">
        <h-img type="local" src="base/bg_di1.png" />
        Opa! Ainda não há dados!
      </div>
    </div>
    <h-center-popup
      class="details"
      v-model="showDetails"
      title="announcemengt"
      contentBgcolor="#002E2C"
    >
      <div class="details-box">
        <div v-html="otherImg(itemRow.content)"></div>
        <div class="annex-box">
          <div v-for="(item, index) in itemRow.propsList" :key="index">
            <van-image class="icon" :src="getImage(iconUrl(item.propId))" />
            <span>x{{ Math.trunc(item.num / 10000) }}</span>
          </div>
        </div>
        <div class="btn" @click="receber(itemRow)">
          {{
            itemRow.propsList.length > 0 && !itemRow.getAt
              ? "RECEBER"
              : "FECHAR"
          }}
        </div>
      </div>
    </h-center-popup>
    <h-table-paging
      :total="total"
      v-if="list.length > 0"
      :page-size="pageInfo.pageSize"
      @on-previous="previous"
      @on-nextPage="nextPage"
    />
  </div>
</template>
  <script setup lang="ts">
import socketApi from "@/socket/socketApi";
import storage, { actions } from "@/utils/storage";
import { ref, onMounted, computed, watchEffect } from "vue";
import { getImage } from "@/utils";
import { fomartDate, otherImg } from "@/utils";
import { propsStore } from "@/stores/modules/props";
import { toast } from "@/utils/toast";
import { useUserStore } from "@/stores/modules/user";
import http from "@/https/index";

const emit = defineEmits(["update-parent-value"]);
const userStore = useUserStore();
const propsDataStore = propsStore();
const propsData = computed(() => {
  return JSON.parse(storage.getStorage(actions.PROPS_DATA) || "") || [];
});
const iconUrl = computed(() => (propId: any) => {
  let obj: any = propsData.value.find((item: any) => item._id == propId);
  return obj.iconUrl;
});
const showDetails = ref<Boolean>(false);
const itemRow = ref<any>({});
onMounted(async () => {
  await getMail();
});
const receber = (item: any) => {
  if (item.propsList.length > 0 && !item.getAt) {
    http.receiveMailAttachments({
      _id:item._id
    }).then((res: any) => {
      if (res.code == 0) {
        toast("Recebido com sucesso");
        itemRow.value.getAt = true;
        getMail();
        userStore.getUserInfo();
      }
    });
  } else {
    return (showDetails.value = false);
  }
};
const list = ref<Array<any>>([]);
const templates = ref<Array<any>>([]);
const total = ref<number>(0);
function openDetails(item: any) {
  showDetails.value = true;
  itemRow.value = { ...item };
  if (item.readAt) return;
  http.setMailRead({
    _id:item._id
  }).then((res: any) => {
    getMail();
    emit("update-parent-value", 2);
  });
}
const pageInfo = ref<any>({
  pageIndex: 1,
  pageSize: 10,
});
async function previous(pageNum: number) {
  pageInfo.value.pageIndex = pageNum;
  await getMail();
}
async function nextPage(pageNum: number) {
  pageInfo.value.pageIndex = pageNum;
  await getMail();
}
const getMail = async () => {
  const res = await http.getMail(pageInfo.value);
  if (res.code == 0) {
    total.value = res.data.mails.total || 0;
    list.value = res.data.mails.rows || [];
    console.log(list.value, "list");
    templates.value = res.data.templates;
    for (let i = 0; i < list.value.length; i++) {
      let rowsItem = { ...list.value[i] };
      if (rowsItem.templateId) {
        res.data.templates.forEach((element: any) => {
          if (rowsItem.templateId === element._id) {
            list.value[i].title = element.title;
            list.value[i].content = element.content;
          }
        });
      }
    }
    for (let i = 0; i < list.value.length; i++) {
      if (list.value[i].variables) {
        for (const key in list.value[i].variables) {
          let str = `{#${key}}`;
          list.value[i].content = list.value[i].content.replace(
            new RegExp(str, "g"),
            list.value[i].variables[key]
          );
        }
      }
    }
    if (res.data.props) {
      for (let i = 0; i < res.data.props.length; i++) {
        propsDataStore.setPropsData(res.data.props[i]);
      }
    }
  }
};
</script>
  <style lang="scss" scoped>
.page {
  height: 100%;
}
.page-body {
  height: calc(100% - $nav-bar-height - 3.1rem);
  overflow: auto;
  padding: 0;
  .no-data {
    text-align: center;
    font-size: 0.4rem;
  }

  .flex-sb {
    padding: 0.3rem 0.1rem;
    background-color: #092727;
    margin-bottom: 0.2rem;
    border-radius: $border-radius;
    .content {
      width: 40%;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      font-size: 0.3rem;
    }
    .right {
      width: 50%;
      text-align: right;
      font-size: 0.3rem;
      span {
        color: #f3e615;
      }
    }
  }
}
.details {
  &-box {
    padding: 0.2rem;
    font-size: 0.35rem;
    color: $font-text4;
  }
  .annex-box {
    display: flex;
    justify-content: left;
    align-items: center;
    margin: 0.4rem 0;
    > div {
      position: relative;
      border-radius: $border-radius;
      overflow: hidden;
      display: flex;
      margin-right: 0.2rem;
      background-color: rgba(#000, 0.8);
      .icon {
        width: 1.4rem;
        height: auto;
      }
      span {
        position: absolute;
        right: 0.1rem;
        bottom: 0;
        color: #6bca3c;
        font-size: 0.3rem;
      }
    }
  }
  .btn {
    width: 35%;
    background-color: #a9792e;
    padding: 0.2rem;
    text-align: center;
    border-radius: $border-radius;
    margin: 0.2rem auto;
    color: #f8e700;
    cursor: pointer;
  }
}
</style>
  