<script lang="ts" setup>
import { useRouter } from 'vue-router'

import { deleteMailbox, getMailboxList } from '#/api'
import { useEmail } from '#/store'
import XbTableClass from '#/utils/xbTable'

import column from './column.jsx'

const Email = useEmail()
const router = useRouter()

const pageData = reactive({
  size: 20,
  current: 1,
  total: 0,
})

const xbTable = reactive(
  new XbTableClass(
    {
      column: column({ handleClick }, pageData),
      page: pageData,
      data: [],
    },
    {
      handlePageSize,
      handlePageCurrent,
    },
  ),
)
provide('xbTable', xbTable)
// 分页处理
function handlePageSize({ size }: { size: number }) {
  pageData.size = size
  init()
}
function handlePageCurrent({ current }: { current: number }) {
  pageData.current = current
  init()
}
async function init() {
  const res = await getMailboxList({
    ...pageData,
  })
  pageData.total = res.totalRows
  xbTable.table.data = res.rows
}

function handleClick(val: anyObj, type = 0) {
  switch (type) {
    case 0: {
      Email.setData(val)
      router.push(`/mail-mgr/sys-mail-detail/${val.id}`)
      break
    }
    case 1: {
      deleteMailbox(val.id).then(() => {
        pageData.current = 1
        init()
      })
      break
    }
  }
}

const diaData = ref<anyObj>({})
function handleSend() {
  diaData.value = {}
  router.push(`/mailboxManage/systemEmail/systemEmailDetail/0`)
}

const tableRef = ref()
const tableHeight = computed(() => {
  if (tableRef.value && tableRef.value.getBox) {
    const { top, pageHeight } = tableRef.value!.getBox()
    return `${window.innerHeight - top - pageHeight}px`
  }
  return '600px'
})

onMounted(() => {
  init()
})
</script>

<template>
  <div class="page">
    <Table ref="tableRef" class="page-table" :height="tableHeight">
      <template #neck>
        <div class="btn">
          <el-button type="primary" @click="handleSend"> 发邮件 </el-button>
        </div>
      </template>
    </Table>
  </div>
</template>

<style lang="scss" scoped>
@include xbj_table;
@include cell_user;

.page {
  .btn {
    margin-bottom: $box-mt;

    .el-button {
      padding: 6px 8px;
    }

    .icon-add {
      margin-right: 6px;
    }
  }
}
</style>
<style lang="scss">
.texts {
  color: red;
  text-decoration: none;
}

.wordImgPopover {
  position: fixed !important;
  inset: 0 50% 0 0 !important;

  .image-grid {
    display: grid;
    grid-template-rows: repeat(2, 1fr);
    grid-template-columns: repeat(2, 1fr);
    gap: 4px;
    width: 100%;
    height: 100%;

    .box-card {
      box-sizing: border-box;
      width: 100%;
      height: 100%;
    }

    .el-card__body {
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      width: 100%;
      height: 100%;
    }

    .img {
      display: flex;
      flex: 1;
      align-items: center;
      justify-content: center;
      max-height: 317px;
      overflow: hidden;

      .el-image {
        width: 100%;
        height: 100%;
      }

      .image-slot {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
        font-size: 30px;
        color: var(--el-text-color-secondary);
        background: var(--el-fill-color-light);
      }
    }

    .footer {
      box-sizing: border-box;
      flex-shrink: 0;
      margin-top: 20px;
      font-size: 24px;
      text-align: center;
    }
  }
}
</style>
