<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { Search, Document, Plus, Refresh } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import request from '@/api/request'
import { useRouter } from 'vue-router'

const router = useRouter()

const loading = ref(false)
const logs = ref<any[]>([])
const total = ref(0)
const page = ref(1)
const size = ref(20)
const keyword = ref('')
const dateRange = ref<string[]>([])

const fetchLogs = async () => {
  loading.value = true
  try {
    const params: Record<string, any> = { page: page.value, size: size.value }
    if (keyword.value) params.keyword = keyword.value
    if (dateRange.value?.length === 2) {
      params.start_date = dateRange.value[0]
      params.end_date = dateRange.value[1]
    }
    const data: any = await request.get('/api/sales-logs', { params })
    logs.value = data?.items || []
    total.value = data?.total || 0
  } catch {
    ElMessage.error('销售日志加载失败')
  } finally {
    loading.value = false
  }
}

const handleSearch = () => { page.value = 1; fetchLogs() }
const handlePageChange = (p: number) => { page.value = p; fetchLogs() }

onMounted(fetchLogs)
</script>

<template>
  <div class="sales-logs-container">
    <!-- 搜索栏 -->
    <el-card shadow="never" class="filter-card">
      <el-row :gutter="12" align="middle">
        <el-col :span="8">
          <el-input
            v-model="keyword"
            placeholder="搜索日志内容..."
            :prefix-icon="Search"
            clearable
            @keyup.enter="handleSearch"
            @clear="handleSearch"
          />
        </el-col>
        <el-col :span="8">
          <el-date-picker
            v-model="dateRange"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="YYYY-MM-DD"
            @change="handleSearch"
            style="width: 100%"
          />
        </el-col>
        <el-col :span="8">
          <el-button type="primary" :icon="Search" @click="handleSearch">搜索</el-button>
          <el-button :icon="Refresh" @click="keyword = ''; dateRange = []; handleSearch()">重置</el-button>
          <el-button type="success" :icon="Plus" @click="router.push('/logs?action=new')">写日志</el-button>
        </el-col>
      </el-row>
    </el-card>

    <!-- 日志列表 -->
    <el-card shadow="never" class="list-card">
      <el-table :data="logs" v-loading="loading" stripe>
        <el-table-column prop="log_date" label="日期" width="120" />
        <el-table-column prop="customer_name" label="关联客户" width="180">
          <template #default="{ row }">
            {{ row.customer_name || '未关联' }}
          </template>
        </el-table-column>
        <el-table-column prop="content" label="日志内容" show-overflow-tooltip />
        <el-table-column prop="author_name" label="记录人" width="100" />
        <el-table-column prop="created_at" label="创建时间" width="160">
          <template #default="{ row }">
            {{ row.created_at?.slice(0, 16)?.replace('T', ' ') }}
          </template>
        </el-table-column>
      </el-table>

      <div class="pagination-wrap" v-if="total > size">
        <el-pagination
          layout="total, prev, pager, next"
          :total="total"
          :page-size="size"
          :current-page="page"
          @current-change="handlePageChange"
        />
      </div>
    </el-card>
  </div>
</template>

<style scoped>
.sales-logs-container {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.filter-card, .list-card {
  border-radius: 8px;
  border: none;
}
.pagination-wrap {
  display: flex;
  justify-content: flex-end;
  margin-top: 16px;
}
</style>
