<script lang="ts" setup>
defineProps({
  modelValue: {
    type: Boolean,
    default: false,
  },
  row: {
    type: Object,
    default: null,
  },
  loading: {
    type: Boolean,
    default: false,
  },
  records: {
    type: Array,
    default: () => [],
  },
  total: {
    type: Number,
    default: 0,
  },
  page: {
    type: Number,
    default: 1,
  },
  pageSize: {
    type: Number,
    default: 20,
  },
});

const emit = defineEmits(['update:modelValue', 'update:page', 'update:pageSize', 'refresh']);

function statusText(status: unknown) {
  const value = String(status || '');
  if (value === 'success' || value === '1') return '成功';
  if (value === 'failed' || value === '0') return '失败';
  return value || '-';
}

function statusType(status: unknown) {
  const value = String(status || '');
  if (value === 'success' || value === '1') return 'success';
  if (value === 'failed' || value === '0') return 'danger';
  return 'info';
}
</script>

<template>
  <el-drawer
    class="equipment-record-drawer"
    :model-value="modelValue"
    title="激活记录"
    size="760px"
    direction="rtl"
    @update:model-value="(v) => emit('update:modelValue', v)"
    @opened="emit('refresh')"
  >
    <div class="record-header">
      <div>
        <div class="record-title">{{ row?.name || '-' }}</div>
        <div class="record-subtitle">设备编号：{{ row?.deviceNo || '-' }}</div>
      </div>
      <el-button :loading="loading" @click="emit('refresh')">刷新</el-button>
    </div>

    <el-table v-loading="loading" :data="records" border stripe style="width: 100%">
      <el-table-column prop="id" label="ID" width="80" />
      <el-table-column label="状态" width="90" align="center">
        <template #default="{ row: item }">
          <el-tag :type="statusType(item.status)" size="small">
            {{ statusText(item.status) }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="account" label="激活账号" min-width="150" show-overflow-tooltip />
      <el-table-column prop="ip" label="IP" min-width="130" show-overflow-tooltip />
      <el-table-column prop="clientVersion" label="客户端版本" width="120" />
      <el-table-column prop="createdAt" label="激活时间" width="180" />
      <el-table-column prop="remark" label="备注" min-width="180" show-overflow-tooltip />
    </el-table>

    <div class="record-pager">
      <el-pagination
        :current-page="page"
        :page-size="pageSize"
        background
        layout="total, prev, pager, next, jumper"
        :total="total"
        @update:current-page="(v) => emit('update:page', v)"
        @update:page-size="(v) => emit('update:pageSize', v)"
      />
    </div>
  </el-drawer>
</template>

<style scoped lang="less">
.record-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.record-title {
  font-weight: 600;
  color: #303133;
  line-height: 1.6;
}

.record-subtitle {
  color: #909399;
  font-size: 13px;
}

.record-pager {
  display: flex;
  justify-content: flex-end;
  margin-top: 14px;
}

@media (max-width: 768px) {
  :deep(.equipment-record-drawer) {
    width: 100vw !important;
  }

  .record-header {
    align-items: flex-start;
  }

  .record-pager {
    justify-content: center;
  }
}
</style>
