<template>
  <div class="main-content">
    <BaseTable
      :tableHeader="tableHeader"
      :tableData="tableData"
      :searchParams="searchParams"
      :control="false"
      @searchFn="searchFn"
      @resetFn="resetFn"
    >
      <template #search>
        <el-form-item label="手机号">
          <el-input v-model.trim="searchParams.mobile" placeholder="请输入手机号" />
        </el-form-item>
        <el-form-item label="发送时间">
          <el-date-picker
            v-model="searchParams.dateRange"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="YYYY-MM-DD"
          />
        </el-form-item>
      </template>
    </BaseTable>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import { ElNotification } from 'element-plus'
import { querySmsLogPage } from '@/api/sms-log'

const defaultSearch = { current: 1, size: 10, total: 0 }

const searchParams = reactive<any>({
  ...defaultSearch,
  mobile: '',
  dateRange: null
})

const tableHeader = [
  { label: '手机号', prop: 'mobile', align: 'center' as const, minWidth: 120 },
  { label: '短信内容', prop: 'content', align: 'center' as const, minWidth: 200 },
  { label: '发送时间', prop: 'createTime', align: 'center' as const, minWidth: 160 },
  { label: '状态', prop: 'status', align: 'center' as const, width: 100 }
]

const tableData = ref<any[]>([])

function searchFn(isReset = false) {
  if (isReset) Object.assign(searchParams, defaultSearch)
  const params = { ...searchParams }
  if (params.dateRange && Array.isArray(params.dateRange)) {
    params.startTime = params.dateRange[0]
    params.endTime = params.dateRange[1]
    delete params.dateRange
  }
  querySmsLogPage(params).then(
    (res: any) => {
      tableData.value = res.data.records
      searchParams.total = res.data.total
    },
    (error: any) => ElNotification.error({ title: error?.data?.msg || '', message: error?.data?.data || '' })
  )
}

function resetFn() {
  Object.assign(searchParams, defaultSearch, { mobile: '', dateRange: null })
  searchFn()
}

searchFn()
</script>
