<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">{{ from.id || '-' }}</div>
        </div>
        
        <div class="info-row">
          <div class="info-label">用户名</div>
          <div class="info-value">{{ from.name || '-' }}</div>
        </div>
        
        <div class="info-row">
          <div class="info-label">手机号</div>
          <div class="info-value">{{ from.phone || '-' }}</div>
        </div>
        
        <div class="info-row">
          <div class="info-label">用户角色</div>
          <div class="info-value">
            <span class="role-tag" :class="from.role ? 'admin' : 'inspector'">
              {{ from.role ? "管理员" : "巡查员" }}
            </span>
          </div>
        </div>
        
        <div class="password-section">
          <div class="info-label">设置新密码</div>
          <el-input
            v-model="from.password"
            class="password-input"
            type="password"
            placeholder="请输入新密码"
            show-password
          />
        </div>
        

      </div>
      <div class="passwordsection">
        <div class="button-item">
          <el-button style="width: 70%;" type="primary" @click="resetPasswordFn">确认修改</el-button>
        </div>
        <div class="button-item">
          <el-button style="width: 100%;" @click="closeResetPasswordDialogFn" >取消</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref } from 'vue';
import {staffResetPasswordApi} from '../../../api/staff'
import { ElMessageBox } from 'element-plus';
// 接收父组件传入的用户信息
const props = defineProps(['userInfo','isResetPasswordDialogVisible']);
const emits = defineEmits(['closeResetPasswordDialogFn']);
const from = ref({
  id: '',
  password: '',
  name: '',
  phone: '',
  role: ''
});
watch(() => props.isResetPasswordDialogVisible, (newVal) => {

  if (newVal) {
    // console.log('抽屉已打开，执行初始化代码');
    initFormData();
  }
});
onMounted(() => {
  // 在这里处理初始化逻辑
   initFormData();
});
const closeResetPasswordDialogFn = () => {
  // 在这里处理关闭弹窗的逻辑
  console.log('关闭弹窗');
  ElMessageBox.confirm('确定要取消吗？未保存的内容将丢失', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }

    ).then(() => {
    console.log('取消修改');
    emits( "closeResetPasswordDialogFn")
  }).catch(() => {

  });

  
}
const initFormData = () => {
  from.value = {
    id: props.userInfo.id,
    password: props.userInfo.password,
    name: props.userInfo.name,
    phone: props.userInfo.phone,
    role: props.userInfo.role
  };
}
const resetPasswordFn = () => {
  // 在这里处理密码重置的逻辑
  console.log('重置密码', userInfo.value);
  const { id, password } = from.value;
  const submitData = { id, password }; // 发送请求到后端进行密码重置
  // console.log('提交数据', submitData);
  staffResetPasswordApi(submitData).then(res => {
    console.log('重置密码成功', res);
    // 关闭弹窗
    // closeResetPasswordDialogFn();
  }).catch(err => {
    console.error('重置密码失败', err);
  });
  

  // 关闭弹窗

};


// 定义一个响应式变量来存储用户信息
const userInfo = ref(props.userInfo);



</script>

<style scoped>
/* 主容器样式 */
.user-info-modal {
  background-color: #fff;
  border-radius: 8px;
  padding: 24px;
 
  width: 100%;
}

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

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

/* 信息行样式 */
.info-row {
  display: flex;
  padding: 12px 0;
  border-bottom: 1px solid #f5f5f5;
  
  &:last-child:not(.password-section) {

    border-bottom: none;
  }
}
.password-section{
  margin-top: 1rem;

    
}
.passwordsection {
  display: flex;
  justify-content: end;
  width: 50%;
  margin-left: 30%;
  margin-top: 20px;

}

.button-item {
  /* flex: 1; */
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  margin-right: 1rem;
  /* background-color: #303133; */
}

/* 响应式调整 */
@media (max-width: 768px) {
  .user-info-modal {
    width: 100%;
    max-width: 400px;
  }
  
  .info-label, .info-value {
    width: 40% and 60%;
  }
}
/* 表单标签 */
.info-label {
  width: 30%;
  color: #606266;
  font-size: 14px;
  line-height: 32px;
}

/* 表单值 */
.info-value {
  width: 70%;
  color: #303133;
  font-size: 14px;
  line-height: 32px;
}

/* 角色标签样式 */
.role-tag {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
}

/* 管理员标签 */
.admin {
  background-color: #ecf5ff;
  color: #409eff;
}

/* 巡查员标签 */
.inspector {
  background-color: #f0f9eb;
  color: #67c23a;
}

/* 密码区域样式 */
.password-section {
  display: flex;
  align-items: center;
  padding: 16px 0 8px;
}

/* 密码输入框 */
.password-input {
  width: 70%;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .user-info-modal {
    width: 100%;
    max-width: 400px;
  }
  
  .info-label, .info-value {
    width: 40% and 60%;
  }
}
</style>