<script lang="ts" setup>
const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false,
  },
  row: {
    type: Object,
    default: null,
  },
  loading: {
    type: Boolean,
    default: false,
  },
});

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

function close() {
  emit('update:modelValue', false);
}
</script>

<template>
  <el-dialog
    class="equipment-delete-dialog"
    :model-value="modelValue"
    title="删除设备"
    width="460px"
    @update:model-value="(v) => emit('update:modelValue', v)"
  >
    <el-alert type="warning" :closable="false" show-icon>
      删除后设备及相关记录可能无法恢复，请谨慎操作。
    </el-alert>

    <div v-if="props.row" class="delete-content">
      <div class="delete-row">
        <span class="label">设备名称：</span>
        <span>{{ props.row.name || '-' }}</span>
      </div>
      <div class="delete-row">
        <span class="label">设备编号：</span>
        <span>{{ props.row.deviceNo || '-' }}</span>
      </div>
      <div class="delete-row">
        <span class="label">机器码：</span>
        <span class="code">{{ props.row.machineCode || '-' }}</span>
      </div>
    </div>

    <template #footer>
      <el-button @click="close">取消</el-button>
      <el-button type="danger" :loading="loading" @click="emit('confirm')">确认删除</el-button>
    </template>
  </el-dialog>
</template>

<style scoped lang="less">
.delete-content {
  margin-top: 16px;
  padding: 12px 14px;
  background: #f8fafc;
  border-radius: 6px;
}

.delete-row {
  display: flex;
  gap: 8px;
  line-height: 1.8;
  font-size: 14px;

  .label {
    flex-shrink: 0;
    color: #909399;
  }

  .code {
    word-break: break-all;
  }
}

:deep(.equipment-delete-dialog) {
  max-width: calc(100vw - 24px);
}
</style>
