<template>
  <div class="message-log">
    <el-card class="!border-none mb-4" shadow="never">
      <el-form class="mb-[-16px]" ref="queryFormRef" :model="queryParams" inline>
        <el-form-item class="w-[220px]" label="手机号" prop="mobile">
          <el-input v-model="queryParams.mobile" placeholder="请输入手机号" clearable @keyup.enter="handleQuery" />
        </el-form-item>
        <el-form-item class="w-[220px]" label="模板键名" prop="template_key">
          <el-input
            v-model="queryParams.template_key"
            placeholder="请输入模板键名"
            clearable
            @keyup.enter="handleQuery"
          />
        </el-form-item>
        <el-form-item class="w-[220px]" label="网关" prop="gateway">
          <el-input v-model="queryParams.gateway" placeholder="请输入网关" clearable @keyup.enter="handleQuery" />
        </el-form-item>
        <el-form-item class="w-[220px]" label="状态" prop="status">
          <el-select v-model="queryParams.status" placeholder="请选择" clearable>
            <el-option label="全部" value="" />
            <el-option label="成功" :value="1" />
            <el-option label="失败" :value="2" />
          </el-select>
        </el-form-item>
        <el-form-item label="发送时间">
          <el-date-picker
            v-model="dateRange"
            type="datetimerange"
            range-separator="-"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            value-format="YYYY-MM-DD HH:mm:ss"
            clearable
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleQuery">搜索</el-button>
          <el-button @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-card class="!border-none" shadow="never" v-loading="isLoading">
      <el-table size="large" :data="tableData">
        <el-table-column prop="id" label="ID" width="80" align="center" />
        <el-table-column prop="mobile" label="手机号" min-width="140" align="center" />
        <el-table-column prop="template_key" label="模板键名" min-width="160" />
        <el-table-column prop="gateway" label="网关" min-width="120" />
        <el-table-column label="状态" min-width="90" align="center">
          <template #default="{ row }">
            <el-tag :type="row.status === 1 ? 'success' : row.status === 2 ? 'danger' : 'info'">
              {{ row.status === 1 ? '成功' : row.status === 2 ? '失败' : '处理中' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="error_message" label="错误信息" min-width="200" />
        <el-table-column label="发送时间" min-width="160">
          <template #default="{ row }">
            {{ formatTime(row.send_time) }}
          </template>
        </el-table-column>
      </el-table>
      <div class="flex mt-4 justify-end">
        <Pagination v-model="queryParams" :total="total" @change="getLists" />
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts" name="MessageLog">
import type { FormInstance } from 'element-plus'
import { logList } from '@/api/message/log'

// 组件参数
const queryFormRef = shallowRef<FormInstance>()
const queryParams = reactive({
  page: 1,
  limit: 10,
  mobile: '',
  template_key: '',
  gateway: '',
  status: ''
})
const dateRange = ref<string[] | null>(null)
const total = ref(0)
const isLoading = ref(false)
const tableData = ref<any[]>([])

// 获取列表
const getLists = async () => {
  isLoading.value = true
  logList({
    ...queryParams,
    start_time: dateRange.value?.[0] || '',
    end_time: dateRange.value?.[1] || ''
  })
    .then((res) => {
      tableData.value = res.data || []
      total.value = res.total || 0
      isLoading.value = false
    })
    .catch(() => {
      isLoading.value = false
    })
}
// 搜索
const handleQuery = () => {
  queryParams.page = 1
  getLists()
}
// 重置
const resetQuery = () => {
  queryFormRef.value?.resetFields()
  dateRange.value = null
  handleQuery()
}
// 格式化时间
const formatTime = (value: number) => {
  if (!value) return ''
  const date = new Date(value * 1000)
  const pad = (num: number) => String(num).padStart(2, '0')
  return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())} ${pad(
    date.getHours()
  )}:${pad(date.getMinutes())}:${pad(date.getSeconds())}`
}

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

<style lang="scss" scoped>
:deep(.el-date-editor) {
  @media screen and (max-width: 768px) {
    --el-date-editor-datetimerange-width: 280px;
  }
}
</style>
