<template>
  <div>
    <!-- 搜索表单 -->
    <el-form inline>
      <el-form-item :label="$t.value.LicensePlateNo">
        <el-input
          v-model="queryForm.plate_number"
          :placeholder="$t.value.carPlateInput"
          clearable
        />
      </el-form-item>

      <el-form-item :label="$t.value.RFID_Tag">
        <el-input
          v-model="queryForm.rfid_tag"
          placeholder="RFID"
          clearable
        />
      </el-form-item>

      <el-form-item>
        <el-button
          type="primary"
          @click="getRecordList"
        >{{ $t.value.Search }}</el-button>
        <el-button @click="resetQuery">{{ $t.value.Reset }}</el-button>
      </el-form-item>
    </el-form>

    <!-- 表格 -->
    <el-table
      :data="recordList"
      height="605"
      border
    >
      <el-table-column
        :label="$t.value.licensePlate"
        prop="plate_number"
        align="center"
      />
      <el-table-column
        :label="$t.value.RFID_Tag"
        prop="rfid_tag"
        align="center"
      />

      <el-table-column
        :label="$t.value.EntryTime"
        align="center"
      >
        <template #default="scope">
          {{ formatTime(scope.row.entry_time) }}
        </template>
      </el-table-column>

      <el-table-column
        :label="$t.value.ExitTime"
        align="center"
      >
        <template #default="scope">
          {{ formatTime(scope.row.exit_time) || $t.value.notOut }}
        </template>
      </el-table-column>

      <el-table-column
        :label="$t.value.ExitTime"
        align="center"
      >
        <template #default="scope">
          {{ scope.row.stay_time || 0 }} {{ $t.value.minute }}
        </template>
      </el-table-column>

      <el-table-column
        :label="$t.value.Fee"
        align="center"
      >
        <template #default="scope">
          ¥ {{ scope.row.fee || 0 }}
        </template>
      </el-table-column>

      <el-table-column
        :label="$t.value.PayStatus"
        align="center"
      >
        <template #default="scope">
          <el-tag :type="scope.row.payment_status === 'paid' ? 'success' : 'warning'">
            {{ scope.row.payment_status === 'paid' ? $t.value.paid : $t.value.unpaid }}
          </el-tag>
        </template>
      </el-table-column>

      <el-table-column
        :label="$t.value.Action"
        align="center"
        width="100"
      >
        <template #default="scope">
          <el-button
            type="primary"
            text
            icon="View"
            @click="openDetail(scope.row)"
          >
            {{ $t.value.view }}
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <div style="display: flex; justify-content: end; margin-top:10px">
      <el-pagination
        v-model:current-page="queryForm.page"
        v-model:page-size="queryForm.page_size"
        :page-sizes="[10, 30, 50, 100]"
        :total="total"
        layout="total, sizes, prev, pager, next, jumper"
      />
    </div>

    <!-- 查看详情弹窗 -->
    <el-dialog
      v-model="detailShow"
      :title="$t.value.recordDetail"
      width="700px"
    >
      <el-form label-width="100px">
        <el-form-item :label="$t.value.licensePlate">{{ detail.plate_number }}</el-form-item>
        <el-form-item label="RFID">{{ detail.rfid_tag }}</el-form-item>
        <el-form-item :label="$t.value.EntryTime">{{ formatTime(detail.entry_time) }}</el-form-item>
        <el-form-item :label="$t.value.ExitTime">{{ formatTime(detail.exit_time) || $t.value.notOut }}</el-form-item>
        <el-form-item :label="$t.value.StayDuration">{{ detail.stay_time || 0 }} {{ $t.value.minute }}</el-form-item>
        <el-form-item :label="$t.value.Fee">¥ {{ detail.fee || 0 }}</el-form-item>
        <el-form-item :label="$t.value.PayStatus">
          {{ detail.payment_status === 'paid' ? $t.value.paid : $t.value.unpaid }}
        </el-form-item>
      </el-form>

      <!-- 图片展示 -->
      <div style="display: flex; gap:10px; margin-top:10px">
        <el-form-item :label="$t.value.entryImg">
          <el-image
            style="width: 200px; height:120px; object-fit:cover"
            :src="detail.entry_image"
            fit="cover"
            :alt="$t.value.entryImg"
          />
        </el-form-item>

        <el-form-item :label="$t.value.exitImg">
          <el-image
            style="width: 200px; height:120px; object-fit:cover"
            :src="detail.exit_image"
            fit="cover"
            :alt="$t.value.exitImg"
          />
        </el-form-item>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { queryVehicleRecordList } from '@/api/vehicle' // 你的真实接口
import { ElMessage } from 'element-plus'

// 查询条件
const queryForm = reactive({
  plate_number: '',
  rfid_tag: '',
  page: 1,
  page_size: 10
})

const recordList = ref([])
const total = ref(0)
const detailShow = ref(false)
const detail = ref({})

// 时间格式化
const formatTime = (time) => {
  if (!time) return ''
  return time.replace('T', ' ').split('+')[0]
}

// 获取记录列表
const getRecordList = async() => {
  try {
    const res = await queryVehicleRecordList(queryForm)
    if (res.code === 0) {
      recordList.value = res.data.list
      total.value = res.data.total
    }
  } catch (e) {
    ElMessage.error(t.value.getListFail)
  }
}

// 重置
const resetQuery = () => {
  queryForm.plate_number = ''
  queryForm.rfid_tag = ''
  queryForm.page = 1
  getRecordList()
}

// 打开详情
const openDetail = (row) => {
  detail.value = row
  detailShow.value = true
}

// 初始化
onMounted(() => {
  getRecordList()
})
</script>

<style scoped>
</style>
