<template>
  <!-- 用户信息弹窗组件 -->
  <div class="user-info-modal" >

      
      <!-- 内容区域 -->
      <div class="modal-body">
        <div class="info-table">
          <div class="info-row">
            <div class="info-label">用户ID</div>
            <div class="info-value">{{ form.id || '-' }}</div>
          </div>
          
          <div class="info-row">
            <div class="info-label">用户名</div>
            <div class="info-value">{{ form.name || '-' }}</div>
          </div>
          
          <div class="info-row">
            <div class="info-label">性别</div>
            <div class="info-value">{{ form.gender === 'man' ? '男' : '女' || '-' }}</div>
          </div>
          
          <div class="info-row">
            <div class="info-label">手机号</div>
            <div class="info-value">{{ form.phone || '-' }}</div>
          </div>
          
          <div class="info-row">
            <div class="info-label">用户角色</div>
            <div class="info-value">
              <span class="role-tag">{{ form.role==='0' ? "管理员": "巡查员" }}</span>
            </div>
          </div>
          
          <div class="info-row">
            <div class="info-label">创建时间</div>
            <div class="info-value">{{ (form.createTime) || '-' }}</div>
          </div>
          
          <div class="info-row">
            <div class="info-label">更新时间</div>
            <div class="info-value">{{ (form.updateTime) || '-' }}</div>
          </div>
          
          <div class="info-row">
            <div class="info-label">启用状态</div>
            <div class="info-value">
              <span class="status-tag" :class=" form.status ? 'status-active' : 'status-inactive'">{{form.status ? '启用' : '禁用' || '-' }}</span>
            </div>
          </div>

          <div class="info-row">
            <div class="info-label">备注</div>
            <div class="info-value">{{ (form.remarks) || '-' }}</div>
          </div>
        </div>
      </div>
    </div>

</template>

<script setup>

import { ref, computed, onActivated, onMounted } from 'vue';


// 接收父组件传入的用户信息和显示状态
const props = defineProps({
  userInfo: {
    type: Object,
    default: () => ({})
  },
  isUserInfoDialogVisible: {
    type: Boolean,
    default: false
  }

});
const form = ref({
 
});
watch(() => props.isUserInfoDialogVisible, (newVal) => {
  console.log('抽屉已打开，执行初始化代码',props.isUserInfoDialogVisible);
  if (newVal) {
    // console.log('抽屉已打开，执行初始化代码');
    initFormData();
  }
});

const initFormData = () => { 
 
  form.value = props.userInfo;
  console.log("99999-------------999999999",form.value);
};
// 定义关闭弹窗的事件
const emit = defineEmits(['close']);

onMounted(() => { 
  initFormData();
});
// const closeModal = () => {
//   emit('close');
// };

// 计算状态标签样式
// const statusClass = computed(() => {
//   const status = userInfo.isUsed;
//   return 
// });

// 格式化日期时间
const formatDate = (timestamp) => {
  if (!timestamp) return '';
  
  const date = new Date(timestamp);
  return date.toLocaleString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit',
    second: '2-digit'
  }).replace(/\//g, '-');
};
</script>

<style scoped>
/* 遮罩层样式 */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

/* 弹窗内容样式 */
.modal-content {
  background-color: #fff;
  border-radius: 8px;
  width: 500px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  z-index: 1001;
}

/* 弹窗头部 */
.modal-header {
  padding: 16px 20px;
  border-bottom: 1px solid #e8e8e8;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.modal-title {
  margin: 0;
  font-size: 16px;
  font-weight: 500;
  color: #1f2937;
}

.close-btn {
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
  color: #6b7280;
  transition: color 0.2s;
  
  &:hover {
    color: #1f2937;
  }
}

/* 内容区域 */
.modal-body {
  padding: 20px;
}

/* 信息表格样式 */
.info-table {
  width: 100%;
}

.info-row {
  display: flex;
  padding: 12px 0;
  border-bottom: 1px solid #f3f4f6;
  
  &:last-child {
    border-bottom: none;
  }
}

.info-label {
  width: 30%;
  color: #6b7280;
  font-size: 14px;
}

.info-value {
  width: 70%;
  color: #1f2937;
  font-size: 14px;
}

/* 角色标签样式 */
.role-tag {
  display: inline-block;
  padding: 2px 8px;
  background-color: #f3f4f6;
  color: #6b7280;
  border-radius: 12px;
  font-size: 12px;
}

/* 状态标签样式 */
.status-tag {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 12px;
}

.status-active {
  background-color: #d1fae5;
  color: #059669;
}

.status-inactive {
  background-color: #fee2e2;
  color: #dc2626;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .modal-content {
    width: 90%;
    max-width: 500px;
  }
}
</style>