<template>
  <div v-if="userStore.hasPermission('scrap_list:view')" class="app-container">
    <div class="filter-container">
      <el-input v-model="sku" placeholder="SKU" style="width: 200px" @keyup.enter="fetchData" />
      <el-date-picker
        v-model="dateRange"
        type="daterange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        value-format="YYYY-MM-DD"
        style="margin-left: 10px; width: 240px"
      />
      <el-button type="primary" @click="fetchData">查询</el-button>
      <el-button @click="resetFilter">重置</el-button>
    </div>

    <el-table
      :data="list"
      border
      stripe
      style="margin-top: 20px"
      v-loading="loading"
    >
      <el-table-column prop="sku" label="SKU" width="140" show-overflow-tooltip />
      <el-table-column label="物料名称" min-width="160">
        <template #default="{ row }">
          {{ row.material_name || '-' }}
        </template>
      </el-table-column>
      <el-table-column label="规格型号" min-width="140">
        <template #default="{ row }">
          {{ row.spec_model || '-' }}
        </template>
      </el-table-column>
      <el-table-column prop="quantity" label="报废数量" width="100" align="right" />
      <el-table-column prop="reason" label="报废原因" min-width="160" show-overflow-tooltip />
      <el-table-column prop="operator_name" label="操作人" width="100" />
      <el-table-column prop="operation_time" label="报废时间" width="160" />
      <el-table-column label="损失金额" width="100" align="right">
        <template #default="{ row }">
          {{ row.total_loss ? `¥${row.total_loss}` : '-' }}
        </template>
      </el-table-column>
      <el-table-column prop="approval_status" label="审批状态" width="100" align="center">
        <template #default="{ row }">
          <el-tag :type="getStatusType(row.approval_status)">
            {{ getStatusText(row.approval_status) }}
          </el-tag>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      background
      layout="prev, pager, next, total"
      :total="total"
      :page-size="pageSize"
      :current-page="page"
      @current-change="handlePage"
      style="margin-top: 10px; text-align: right"
    />
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { getScrapRecords } from '@/api/scrap'
import { useUserStore } from '@/stores/user'

const userStore = useUserStore()

const list = ref<any[]>([])
const total = ref(0)
const page = ref(1)
const pageSize = ref(50)
const sku = ref('')
const dateRange = ref<[string, string] | null>(null)
const loading = ref(false)

const fetchData = async () => {
  loading.value = true
  try {
    const params: any = {
      page: page.value,
      pageSize: pageSize.value,
      sku: sku.value
    }
    if (dateRange.value && dateRange.value.length === 2) {
      params.start_date = dateRange.value[0]
      params.end_date = dateRange.value[1]
    }
    const res = await getScrapRecords(params)
    list.value = res.data.list || []
    total.value = res.data.total || 0
  } finally {
    loading.value = false
  }
}

const handlePage = (val: number) => {
  page.value = val
  fetchData()
}

const resetFilter = () => {
  sku.value = ''
  dateRange.value = null
  page.value = 1
  fetchData()
}

const getStatusType = (status: string) => {
  const map: Record<string, string> = {
    approved: 'success',
    rejected: 'danger',
    pending: 'warning'
  }
  return map[status] || 'info'
}

const getStatusText = (status: string) => {
  const map: Record<string, string> = {
    approved: '已审批',
    rejected: '已拒绝',
    pending: '待审批'
  }
  return map[status] || status
}

onMounted(fetchData)
</script>

<style scoped>
.filter-container {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}
</style>
