<script lang="ts" setup>
import { computed } from 'vue';
import { ElMessage } from 'element-plus';

const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false,
  },
  row: {
    type: Object,
    default: null,
  },
});

const emit = defineEmits(['update:modelValue']);

const statusMap: Record<string, { label: string; type: string }> = {
  active: { label: '正常', type: 'success' },
  inactive: { label: '未激活', type: 'info' },
  disabled: { label: '禁用', type: 'danger' },
  expired: { label: '已过期', type: 'warning' },
};

const statusInfo = computed(() => {
  const status = String(props.row?.status || 'inactive');
  return statusMap[status] || { label: status || '-', type: 'info' };
});

function display(value: unknown) {
  if (value === null || value === undefined || value === '') return '-';
  return String(value);
}

function copyText(text: unknown, label = '内容') {
  const value = String(text || '').trim();
  if (!value) {
    ElMessage.warning(`暂无${label}可复制`);
    return;
  }
  navigator.clipboard.writeText(value).then(() => {
    ElMessage.success(`${label}已复制`);
  });
}
</script>

<template>
  <el-dialog
    class="equipment-detail-dialog"
    :model-value="modelValue"
    title="设备详情"
    width="760px"
    @update:model-value="(v) => emit('update:modelValue', v)"
  >
    <el-descriptions v-if="row" :column="2" border>
      <el-descriptions-item label="设备ID">
        {{ display(row.id) }}
      </el-descriptions-item>
      <el-descriptions-item label="设备状态">
        <el-tag :type="statusInfo.type">{{ statusInfo.label }}</el-tag>
      </el-descriptions-item>
      <el-descriptions-item label="设备名称">
        {{ display(row.name) }}
      </el-descriptions-item>
      <el-descriptions-item label="设备编号">
        <span class="value-with-action">
          <span>{{ display(row.deviceNo) }}</span>
          <el-button v-if="row.deviceNo" link type="primary" @click="copyText(row.deviceNo, '设备编号')">
            复制
          </el-button>
        </span>
      </el-descriptions-item>
      <el-descriptions-item label="机器码">
        <span class="code-text">{{ display(row.machineCode) }}</span>
      </el-descriptions-item>
      <el-descriptions-item label="授权码">
        <span class="code-text">{{ display(row.licenseCode) }}</span>
      </el-descriptions-item>
      <el-descriptions-item label="系统平台">
        {{ display(row.os) }}
      </el-descriptions-item>
      <el-descriptions-item label="版本">
        {{ display(row.version) }}
      </el-descriptions-item>
      <el-descriptions-item label="绑定账号">
        {{ display(row.account) }}
      </el-descriptions-item>
      <el-descriptions-item label="归属用户">
        {{ display(row.owner) }}
      </el-descriptions-item>
      <el-descriptions-item label="激活次数">
        {{ Number(row.activationCount || 0) }}
      </el-descriptions-item>
      <el-descriptions-item label="提取次数">
        {{ Number(row.extractCount || 0) }}
      </el-descriptions-item>
      <el-descriptions-item label="最后激活时间">
        {{ display(row.lastActivatedAt) }}
      </el-descriptions-item>
      <el-descriptions-item label="最后提取时间">
        {{ display(row.lastExtractedAt) }}
      </el-descriptions-item>
      <el-descriptions-item label="过期时间">
        {{ display(row.expiredAt) }}
      </el-descriptions-item>
      <el-descriptions-item label="创建时间">
        {{ display(row.createdAt) }}
      </el-descriptions-item>
      <el-descriptions-item label="备注" :span="2">
        <span class="remark-text">{{ display(row.remark) }}</span>
      </el-descriptions-item>
    </el-descriptions>

    <template #footer>
      <el-button @click="emit('update:modelValue', false)">关闭</el-button>
    </template>
  </el-dialog>
</template>

<style scoped lang="less">
.value-with-action {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
}

.code-text,
.remark-text {
  word-break: break-all;
  white-space: pre-wrap;
  line-height: 1.6;
}

:deep(.equipment-detail-dialog) {
  max-width: calc(100vw - 24px);
}

@media (max-width: 768px) {
  :deep(.equipment-detail-dialog) {
    width: calc(100vw - 24px) !important;
    margin: 0 auto;
  }

  :deep(.equipment-detail-dialog .el-dialog__body) {
    padding: 12px;
    max-height: 70vh;
    overflow-y: auto;
  }

  :deep(.el-descriptions__body .el-descriptions__table) {
    display: block;
  }

  :deep(.el-descriptions__body tbody),
  :deep(.el-descriptions__body tr),
  :deep(.el-descriptions__body th),
  :deep(.el-descriptions__body td) {
    display: block;
    width: 100% !important;
  }
}
</style>
