<template>
  <div
    style="
      width: 100vw;
      height: 100vh;
      background-color: #f0f2f5;
      padding: 20px;
      display: flex;
    "
  >
    <div class="right">
      <!-- <el-autocomplete
        style="width: 17vw"
        v-model="state"
        :fetch-suggestions="querySearchAsync"
        placeholder="输入标题查询"
        @select="handleSelect"
      /> -->
      <el-button
        @click="selectPage(0, mailId)"
        :class="{ active: selectedPage === 0 }"
        style="
          width: 13.5vw;
          margin-top: 15px;
          font-weight: 550;
          font-size: 16px;
          cursor: pointer;
        "
        type="primary"
        size="large"
        ><el-icon style="margin-right: 8px"><EditPen /></el-icon
        >写&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;信</el-button
      >
      <div
        @click="selectPage(1, mailId)"
        :class="{ active: selectedPage === 1 }"
        style="
          width: 13.5vw;
          height: 50px;
          line-height: 50px;
          margin-top: 10px;
          border-bottom: 1px solid #e7eaec;
          cursor: pointer;
        "
      >
        <div
          style="
            display: inline-block;
            font-size: 15px;
            color: #666666;
            vertical-align: bottom;
          "
        >
          <el-icon style="color: #409eff"><ChatLineRound /></el-icon> 收件箱
        </div>
        <div
          style="
            background-color: #f8ac59;
            width: 30px;
            float: right;
            border-radius: 5px;
            height: 20px;
            margin-top: 17px;
            text-align: center;
            justify-content: center;
            height: 18px;
            line-height: 18px;
          "
        >
          <div id="INBOXVALUE" style="color: white; font-size: 15px"></div>
        </div>
      </div>
      <!-- 草稿箱 -->
      <div
        @click="selectPage(3, mailId)"
        :class="{ active: selectedPage === 3 }"
        style="
          width: 13.5vw;
          height: 50px;
          line-height: 50px;
          border-bottom: 1px solid #e7eaec;
          cursor: pointer;
        "
      >
        <div style="display: inline-block; font-size: 15px; color: #666666">
          <el-icon style="color: orange"><Box /></el-icon> 草稿箱
        </div>
        <div
          style="
            background-color: #f8ac59;
            width: 30px;
            float: right;
            border-radius: 5px;
            height: 20px;
            margin-top: 17px;
            text-align: center;
            justify-content: center;
            height: 18px;
            line-height: 18px;
          "
        >
          <div id="DRAFTSVALUE" style="color: white; font-size: 15px">
            <!-- {{ DRAFTS }} -->
          </div>
        </div>
      </div>
      <div
        @click="selectPage(2, mailId)"
        :class="{ active: selectedPage === 2 }"
        style="
          width: 13.5vw;
          height: 50px;
          line-height: 50px;
          cursor: pointer;
          border-bottom: 1px solid #e7eaec;
        "
      >
        <div style="display: inline-block; font-size: 15px; color: #666666">
          <el-icon style="color: #63c122"><Promotion /></el-icon> 发件箱
        </div>
      </div>

      <!-- 垃圾箱 -->
      <div
        @click="selectPage(4, mailId)"
        :class="{ active: selectedPage === 4 }"
        style="
          width: 13.5vw;
          height: 50px;
          line-height: 50px;
          cursor: pointer;
          border-bottom: 1px solid #e7eaec;
        "
      >
        <div style="display: inline-block; font-size: 15px; color: #666666">
          <el-icon style="color: #f56c6c"><DeleteFilled /></el-icon> 垃圾箱
        </div>
      </div>
    </div>
    <div class="left">
      <component
        @selectPage="selectPage"
        @selectPage1="selectPage1"
        @selectPage2="selectPage2"
        @updateUnreadAndDrafts="updateUnreadAndDrafts"
        :showWrite="false"
        :writeValueId="writeValueId"
        :writeValueId1="writeValueId1"
        :writeValueId2="writeValueId2"
        :typeEmail="typeEmail"
        :typeEmail1="typeEmail1"
        :is="getSelectedComponent"
      />
    </div>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, computed, ref, nextTick } from "vue";
import { getCurrentInstance } from "vue";
import write from "./fileBox/write.vue";
import inbox from "./fileBox/inbox.vue";
import outbox from "./fileBox/outbox.vue";
import drafts from "./fileBox/drafts.vue";
import dustbin from "./fileBox/dustbin.vue";
import type { TabsPaneContext } from "element-plus";
import { ElInput } from "element-plus";
import { allbox } from "../../api/email/index";
import { unread } from "../../api/email/inbox";

const { proxy } = getCurrentInstance();
const selectedPage = ref(0);
const writeValueId = ref(0);
const writeValueId1 = ref(0);
const writeValueId2 = ref(0);
const typeEmail = ref(0);
const typeEmail1 = ref(0);
const page1 = proxy.$route.query.page11;
//回复
const selectPage = (pageIndex: number, mailId: number) => {
  selectedPage.value = pageIndex;
  writeValueId.value = mailId;
};
//转发
const selectPage1 = (pageIndex: number, mailId1: number, type: number) => {
  selectedPage.value = pageIndex;
  writeValueId1.value = mailId1;
  typeEmail.value = type;
};
//编辑
const selectPage2 = (pageIndex: number, mailId2: number, type: number) => {
  selectedPage.value = pageIndex;
  writeValueId2.value = mailId2;
  typeEmail1.value = type;
};
const getSelectedComponent = computed(() => {
  switch (selectedPage.value) {
    case 0:
      return write;
    case 1:
      return inbox;
    case 2:
      return outbox;
    case 3:
      return drafts;
    case 4:
      return dustbin;
    default:
      return null;
  }
});
const activeName = ref("first");
const state = ref("");
const mailId = ref(null);
const inputValue = ref("");
const dynamicTags = ref(["Tag 1", "Tag 2", "Tag 3"]);
const inputVisible = ref(false);
const InputRef = ref<InstanceType<typeof ElInput>>();
// 标签
const handleClose = (tag: string) => {
  dynamicTags.value.splice(dynamicTags.value.indexOf(tag), 1);
};
const queryChange = () => {
  console.log("queryChange", proxy.$route.query.page11);
  if (proxy.$route.query.page11 != undefined) {
    selectedPage.value = Number(proxy.$route.query.page11);
  }
};
const showInput = () => {
  inputVisible.value = true;
  nextTick(() => {
    InputRef.value!.input!.focus();
  });
};
function updateUnreadAndDrafts1() {
  // alert("111");
}
const updateUnreadAndDrafts = async () => {
  try {
    const res = await unread();
    const INBOXLable = document.getElementById("INBOXVALUE");
    if (INBOXLable) INBOXLable.textContent = res;

    const result = await allbox();
    const DRAFTSLable = document.getElementById("DRAFTSVALUE");
    if (DRAFTSLable) DRAFTSLable.textContent = result.DRAFTS;
  } catch (error) {
    console.error("Error fetching data: ", error);
  }
};

// unread().then((res) => {
//   //console.log("res", res);
//   const unreadNum = res;
//   const INBOXLable = document.getElementById("INBOXVALUE");
//   INBOXLable.textContent = unreadNum;
// });
// allbox().then((result) => {
//   const DRAFTS = result.DRAFTS;
//   const DRAFTSLable = document.getElementById("DRAFTSVALUE");
//   DRAFTSLable.textContent = DRAFTS;
// });
const handleInputConfirm = () => {
  if (inputValue.value) {
    dynamicTags.value.push(inputValue.value);
  }
  inputVisible.value = false;
  inputValue.value = "";
};
// 搜索
interface LinkItem {
  value: string;
  link: string;
}

const links = ref<LinkItem[]>([]);

const loadAll = () => {
  return [
    { value: "vue", link: "https://github.com/vuejs/vue" },
    { value: "element", link: "https://github.com/ElemeFE/element" },
    { value: "cooking", link: "https://github.com/ElemeFE/cooking" },
    { value: "mint-ui", link: "https://github.com/ElemeFE/mint-ui" },
    { value: "vuex", link: "https://github.com/vuejs/vuex" },
    { value: "vue-router", link: "https://github.com/vuejs/vue-router" },
    { value: "babel", link: "https://github.com/babel/babel" },
  ];
};

let timeout: ReturnType<typeof setTimeout>;
const querySearchAsync = (queryString: string, cb: (arg: any) => void) => {
  const results = queryString
    ? links.value.filter(createFilter(queryString))
    : links.value;

  clearTimeout(timeout);
  timeout = setTimeout(() => {
    cb(results);
  }, 3000 * Math.random());
};
const createFilter = (queryString: string) => {
  return (restaurant: LinkItem) => {
    return (
      restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0
    );
  };
};

const handleSelect = (item: Record<string, any>) => {};
queryChange();
onMounted(() => {
  links.value = loadAll();
  updateUnreadAndDrafts();
});
</script>

<style lang="scss" scoped>
.right {
  width: 16%;
  height: 92%;
  background-color: white;
  padding: 15px;
  min-height: 780px;
}
.left {
  width: 72%;
  height: 92%;
  min-height: 780px;
  padding: 20px;
  background-color: white;
  margin-left: 20px;
  margin-right: 40px;
}
::v-deep .el-autocomplete .el-input__wrapper {
  box-shadow: 0 0 0 !important;
}
::v-deep .el-tabs__item {
  padding: 0 20px 0 0 !important;
}
</style>
