<template>
  <div class="inspection-list page-container">
    <div class="toolbar" style="margin-bottom: 20px;">
      <a-space>
        <a-button type="primary" @click="dialogVisible = true">
          <template #icon><icon-plus /></template> 新增巡检记录
        </a-button>
        <a-button @click="fetchInspections">
          <template #icon><icon-refresh /></template> 刷新
        </a-button>
      </a-space>
    </div>

    <a-card :bordered="false">
      <a-table :data="inspections" :loading="loading" :pagination="{ pageSize: 10 }">
        <template #columns>
          <a-table-column title="巡检时间" data-index="CheckTime" :width="200">
            <template #cell="{ record }">
              {{ new Date(record.CheckTime).toLocaleString() }}
            </template>
          </a-table-column>
          <a-table-column title="设备ID" data-index="DeviceID" :width="300" />
          <a-table-column title="状态" data-index="Status" :width="100">
            <template #cell="{ record }">
              <a-tag :color="record.Status === 'NORMAL' ? 'green' : 'red'">
                {{ record.Status }}
              </a-tag>
            </template>
          </a-table-column>
          <a-table-column title="校准功率" data-index="CalibratedPower" />
        </template>
      </a-table>
    </a-card>

    <a-modal v-model:visible="dialogVisible" title="新增巡检记录" @ok="handleSubmit" @cancel="dialogVisible = false">
      <a-form :model="form" layout="vertical">
        <a-form-item field="DeviceID" label="设备ID">
          <a-input v-model="form.DeviceID" placeholder="请输入设备UUID" allow-clear />
        </a-form-item>
        <a-form-item field="Status" label="状态">
          <a-select v-model="form.Status">
            <a-option label="正常" value="NORMAL" />
            <a-option label="异常" value="ABNORMAL" />
          </a-select>
        </a-form-item>
        <a-form-item field="CalibratedPower" label="校准功率">
          <a-input-number v-model="form.CalibratedPower" />
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, reactive } from 'vue';
import { Message } from '@arco-design/web-vue';
import { IconPlus, IconRefresh } from '@arco-design/web-vue/es/icon';

interface Inspection {
    ID?: string;
    CheckTime: string;
    DeviceID: string;
    Status: string;
    CalibratedPower: number;
    InspectorID?: string;
}

const inspections = ref<Inspection[]>([
    { CheckTime: new Date().toISOString(), DeviceID: 'Device-001', Status: 'NORMAL', CalibratedPower: 45 },
    { CheckTime: new Date().toISOString(), DeviceID: 'Device-002', Status: 'ABNORMAL', CalibratedPower: 0 },
]);
const loading = ref(false);
const dialogVisible = ref(false);

const form = reactive<Partial<Inspection>>({
  DeviceID: '',
  Status: 'NORMAL',
  CalibratedPower: 0
});

const fetchInspections = async () => {
  loading.value = true;
  try {
    // inspections.value = await getInspections();
    setTimeout(() => {
        loading.value = false;
    }, 300);
  } catch (error) {
    Message.error('获取巡检记录失败');
    loading.value = false;
  }
};

const handleSubmit = async () => {
  try {
    // Mock Inspector ID
    form.InspectorID = '00000000-0000-0000-0000-000000000000';
    // await createInspection(form);
    
    inspections.value.unshift({ ...form, CheckTime: new Date().toISOString() } as Inspection);
    Message.success('创建成功 (Demo)');
    dialogVisible.value = false;
    // fetchInspections();
  } catch (error) {
    Message.error('操作失败');
  }
};

onMounted(() => {
  fetchInspections();
});
</script>

<style scoped>
.page-container {
  padding: 20px;
}
</style>
