<template>
  <div class="h-full flex flex-col bg-white p-2">
    <p class="font-bold text-lg leading-10 border-b-2">邮件列表</p>
    <el-form class="pt-2" :model="searchForm" inline size="small">
      <el-form-item label="发送者">
        <el-input placeholder="发送者" v-model="searchForm.sender"></el-input>
      </el-form-item>
      <el-form-item label="邮件主题">
        <el-input placeholder="邮件主题" v-model="searchForm.subject"></el-input>
      </el-form-item>
      <!-- <el-form-item label="收件时间">
        <el-date-picker v-model="searchForm.receivedDate" type="date" placeholder="收件时间" />
      </el-form-item> -->
      <el-form-item>
        <el-button @click="resetForm">重置</el-button>
        <el-button type="primary" @click="queryEmail">查询</el-button>
      </el-form-item>
    </el-form>
    <div class="flex-1 flex overflow-hidden border rounded">
      <el-scrollbar class="scroll-container" v-loading="loading">
        <ListItem :list="emailList" @selected="onSelected" />
      </el-scrollbar>
      <div class="flex-1 flex flex-col">
        <EmailContent :seleted-emeil="seletedEmeil" />
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, onUnmounted, reactive, ref } from 'vue'
import { getEmailList } from '@/api/email'
import ListItem from './components/ListItem.vue'
import EmailContent from './components/EmailContent.vue'

let timer: number | undefined = undefined

const emailList = ref([])
const loading = ref(false)
const seletedEmeil = reactive<Record<string, any>>({})
const searchForm = reactive({
  subject: '',
  sender: '',
  // receivedDate: ''
})

const onSelected = (email: any) => Object.assign(seletedEmeil, email)
const resetForm = () => {
  Object.assign(searchForm, {
    subject: '',
    sender: '',
    // receivedDate: ''
  })
}

const queryEmail = async () => {
  const params = {
    column: 'emailOrderId',
    order: 'desc',
    currentPage: 1,
    pageSize: 100
  }
  Object.assign(params, searchForm)
  loading.value = true
  try {
    const { data } = await getEmailList(params)
    emailList.value = data.result.records
  } catch {}
  loading.value = false
}

onMounted(async () => {
  await queryEmail()
  timer = setInterval(() => queryEmail, 1000 * 20)
})

onUnmounted(() => {
  clearInterval(timer)
})
</script>
<style lang="scss" scoped>
.scroll-container {
  width: 260px;
  border-right: 2px solid #ccc;
}
</style>
