<template>
  <div class="contenter">
    <!-- 建筑管理 -->
    <div class="box_title">
      人员管理
    </div>
    <div class="contenterTitle">
      <div class="title">
        <!-- <div class="title1">建筑详情</div> -->
      
      </div>

      <div class="buildfilter">
        <div class="buildf1">
           <div class="filter-item">
            <div class="buildf1t1">人员名称:</div>
            <el-select class="buildf1t2 select__" placeholder="请选择人员名称" v-model="staffInfoSearch.staffName" >
              <el-option v-for="item in personNmaeList" :key="item.value" :label="item.name" :value="item.value">
              </el-option>
            </el-select>
           </div>
          <div class="filter-item">
            <div class="buildf1t1">人员权限:</div>
            <el-select class="buildf1t2 select__" placeholder="请选权限名称" v-model="staffInfoSearch.staffPermission" >
              <el-option v-for="item in personPermissionList" :key="item.value" :label="item.name" :value="item.value">
              </el-option>
            </el-select>
          </div>
        </div>
        <div class="buildf2">
              <el-button type="primary" size="large" color="#06B0E1" style="width: 150px;color: #fff;" @click="detailStallListShow" >查询</el-button>
        </div>
      </div>
       <div class="horizontal-container">
        <div >人员信息</div>
        <div class="addPerson">
         <el-button  type="primary" size="large" style="width: 150px;  color: #fff;" color="#06B0E1" @click="updataStaffInfo">新增人员</el-button>
     
        </div>
        
       </div>
      
      <el-table stripe :data="staffInfoList" width="1000" v-loading="loading1" class="table___"
        element-loading-background="rgba(0, 0, 0, 0.3)" :max-height="515" style="overflow: auto">
       <!-- :max-height="515"，显示10行记录 -->
        <el-table-column label="人员名称" align="center">
          <template #default="scope">
            <div >{{ scope.row.name }}</div>
          </template>
        </el-table-column>
        <el-table-column label="权限级" align="center">
          <template #default="scope">
            {{ scope.row.department }}
          </template>
        </el-table-column>
        <el-table-column label="手机号" align="center">
          <template #default="scope">
             {{ scope.row.phone }}
          </template>
        </el-table-column>
        <el-table-column label="登陆密码" align="center">
          <template #default="scope">
            {{ scope.row.password }}
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template #default="scope">
            <el-button type="primary" :icon="Edit" color="#06B0E1" style="color: #fff;" @click="updataStaffInfo(scope.row)">修改</el-button>
          </template>
        </el-table-column>
       
      </el-table>
      <div class="page">
        <el-pagination class="page__" v-model:current-page="pagination.PageNum" v-model:page-size="pagination.PageSize"
          layout="prev, pager, next " :total="pagination.total" @current-change="handleCurrentChange" />
      </div>

    </div>

    <el-dialog class="dialogbig" v-model="imgShow" style="background-color: rgba(0, 0, 0, 0)">
      <div style="text-align: center; margin-top: 10px;">
        <img src="../../static/image/loginback.png" alt="" style="width: 100%;height: 100%;"></img>
      </div>
    </el-dialog>


    <!-- 修改人员信息 -->
     <el-drawer 
        v-model="drawer" 
        :with-header="false" 
        direction="ttb" 
        custom-class="top-center-drawer"
        size="auto"
        @close="closeDrawer">
        <div class="drawer-content">
          <el-form 
            ref="userForm"
            :model="StaffInfoForm"
            :rules="addStaffRules"
            label-width="100px"
            label-position="left">
            
            <!-- 姓名 -->
            <el-form-item label="姓名" prop="name">
              <el-input 
                v-model="StaffInfoForm.name" 
                placeholder="请输入姓名"
                clearable>
              </el-input>
            </el-form-item>
            
            <!-- 工号 -->
            <el-form-item label="工号" prop="employeeId">
              <el-input 
                v-model="StaffInfoForm.employeeId" 
                placeholder="请输入工号"
                clearable>
              </el-input>
            </el-form-item>
            
            <!-- 部门 -->
            <el-form-item label="部门" prop="department">
              <el-select 
                v-model="StaffInfoForm.department" 
                placeholder="请选择部门"
                style="width: 100%">
                <el-option
                  v-for="dept in departments"
                  :key="dept.value"
                  :label="dept.label"
                  :value="dept.value">
                </el-option>
              </el-select>
            </el-form-item>
            
            <!-- 职位 -->
            <el-form-item label="职位" prop="position">
              <el-input 
                v-model="StaffInfoForm.position" 
                placeholder="请输入职位"
                clearable>
              </el-input>
            </el-form-item>
            
            <!-- 联系电话 -->
            <el-form-item label="联系电话" prop="phone">
              <el-input 
                v-model="StaffInfoForm.phone" 
                placeholder="请输入联系电话"
                clearable>
              </el-input>
            </el-form-item>
            
            <!-- 邮箱 -->
            <el-form-item label="密码" prop="password">
              <el-input 
                v-model="StaffInfoForm.password" 
                placeholder="请输入密码"
                clearable>
              </el-input>
            </el-form-item>
            
            <!-- 操作按钮（关键修改部分） -->
            <el-form-item class="action-buttons">
              <el-button 
                v-if="StaffInfoForm.clickType"
                type="success" 
                @click="submitForm"
                style="flex: 1;width: 10px;">
                确认新增
              </el-button>
              <el-button 
                v-else
                type="primary" 
                @click="submitForm"
                style="flex: 1;width: 10px;">
                确认修改
              </el-button>
              <el-button 
                @click="closeDrawer"
                style="flex: 1; margin-left: 100px;">
                取消
              </el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-drawer>

  </div>
</template>
<script setup>


import { ref, onMounted, reactive } from 'vue';
import { ElMessage, ElLoading } from 'element-plus';
import { useRoute, useRouter } from 'vue-router';
const drawer = ref(false)//抽屉控制标志
const imgShow = ref(false)//放大图片
const imgUrl = ref('')//图片地址
const bigImgFn = () => {
  imgUrl.value = '../../static/image/loginback.png'
  imgShow.value = true
}
// 声明一个名为userForm的ref变量，用于存储用户表单的引用
const userForm = ref(null)
// 定义一个响应式对象pagination，用于存储分页信息,在获取到列表信息的后要更新信息
const pagination = ref({
  // 当前页码
  PageNum: 1,
  // 每页显示的条数
  PageSize: 10,
  // 总条数
  total: 100
})
// 定义一个StaffInfoForm的ref对象，包含name、employeeId、department、position(职位)、phone、passward等属性
const StaffInfoForm = ref({
  name: '',
  employeeId: '',
  // 不知道自己写，还是后端传递全部门的分类
  department: '',
  position: '',
  phone: '',
  password: '',
  clickType: false
})
const departments = [{ label: '技术部', value: '技术部' }, { label: '市场部', value: '市场部' }, { label: '人事部', value: '人事部' }, { label: '财务部', value: '财务部' }, { label: '运营部', value: '运营部'}]
const addStaffRules = ref({
  name: [
    { required: true, message: '请输入姓名', trigger: 'blur' },
    { min: 2, max: 5, message: '长度在 2 到 5 个字符', trigger: 'blur' },
    {
      pattern: /^[\u4e00-\u9fa5]+$/,
      message: '姓名只能为中文',
      trigger: 'blur'
    }
  ],
  employeeId: [
    { required: true, message: '请输入工号', trigger: 'blur' },
    {
      pattern: /^[A-Za-z0-9]{6,12}$/,
      message: '工号应为6-12位字母或数字',
      trigger: 'blur'
    }
  ],
  department: [
    { required: true, message: '请选择部门', trigger: 'change' },
    {
      validator: (rule, value, callback) => {
        const validDepartments = ['技术部', '市场部', '人事部', '财务部', '运营部'];
        if (!validDepartments.includes(value)) {
          callback(new Error('请选择有效的部门'));
        } else {
          callback();
        }
      },
      trigger: 'change'
    }
  ],
  position: [
    { required: true, message: '请输入职位', trigger: 'blur' },
    { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
  ],
  phone: [
    { required: true, message: '请输入联系电话', trigger: 'blur' },
    {
      pattern: /^1[3-9]\d{9}$/,
      message: '请输入正确的手机号码',
      trigger: 'blur'
    }
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 6, max: 18, message: '长度在 6 到 18 个字符', trigger: 'blur' },
    {
      validator: (rule, value, callback) => {
        if (!/[A-Za-z]/.test(value) || !/\d/.test(value)) {
          callback(new Error('密码必须包含字母和数字'));
        } else {
          callback();
        }
      },
      trigger: 'blur'
    }
  ]
});
const submitForm = () => {
  console.log('submitForm', StaffInfoForm.value)
  userForm.value.validate((valid) => {
    if (valid) {
      alert('submit!');
      console.log('submitForm******************', StaffInfoForm.value)
    } else {}
  })
}
const staffInfoSearch = ref({
  staffName: '',
  staffPermission: ''
}) 
const detailStallListShow = () => {
  if (staffInfoSearch.value.staffName == '' && staffInfoSearch.value.staffPermission == '') {
    ElMessage({
      message: '请选择人员信息',
      type: 'warning',
    })
  } else {
    console.log('人员信息', staffInfoSearch.value.staffName==''?item.name:staffInfoSearch.value.staffName)
     const temp = staffInfoList.value.filter(item => item.name == (staffInfoSearch.value.staffName==''?item.name:staffInfoSearch.value.staffName ) && item.department ==( staffInfoSearch.value.staffPermission==''?item.department:staffInfoSearch.value.staffPermission))
      console.log("0.000000000000000000000",temp)
     if (temp.length == 0) {
        ElMessage({
          type: 'warning',
          message: "没有找到相关记录",
          })
          // 最好是将列表再查一遍
          staffInfoList.value = staffInfoListOriginal.value
        }else {
          staffInfoList.value = temp
          }
  }
 
}

const updataStaffInfo=(info)=>{
  // 这里要进行权限的校验
  if (info.type == 'click') {
    // 这是新增入口

    StaffInfoForm.value.clickType = true

  } else {
    // 这是修改入口
     Object.assign(StaffInfoForm.value, info)
  }
  // Object.assign(StaffInfoForm.value, info)
  // // staffInfoList = info
  drawer.value = true
  console.log('修改人员信息', StaffInfoForm)
}
//切换分页
const handleCurrentChange = () => {
  console.log('切换分页',pagination.value)
}
const closeDrawer = () => {
  userForm.value?.resetFields() 
  drawer.value = false
  StaffInfoForm.value = {}
}

const build = ref({
  name: '',
})
const personNmaeList = ref([
  { name: '张三', value: '张三' }, { name: '李四', value: '李四' }, { name: '王五', value: '王五'  }
])
const personPermissionList = ref([
  { name: '巡检人员', value: '巡检人员' }, { name: '管理员', value: '管理员' }
])

// 定义一个包含员工原始信息的列表
const staffInfoListOriginal = ref([
  {
    name: '张三',
    employeeId: '001',
    department: '巡检',
    position: '巡检人员',
    phone: '15145456113',
    password: '123456789',
   
  },
  {
    name: '张打三',
    employeeId: '002',
    department: '巡检',
    position: '巡检人员',
    phone: '15145456113',
    password: '123456789',
 

  },
  {
    name: '张撒三',
    employeeId: '003',
    department: '巡检',
    position: '巡检人员',
    phone: '15145456113',
    password: '123456789',
  },
   {
    name: '张啊三',
    employeeId: '004',
    department: '巡检',
    position: '巡检人员',
    phone: '15145456113',
    password: '123456789',
  },
  {
    name: '张放到三',
    employeeId: '005',
    department: '巡检',
    position: '巡检人员',
    phone: '15145456113',
    password: '123456789',

  },
  {
    name: '张打的撒三',
    employeeId: '006',
    department: '巡检',
    position: '巡检人员',
    phone: '15145456113',
    password: '123456789',
  },
   
])
// 定义一个ref对象，用于存储员工信息列表
const staffInfoList = ref(staffInfoListOriginal.value)
//切换选项时更新列表
const buildchangeFn = () => {

}
</script>
<style scoped>
.title {
  height: 30px;
  display: flex;
  justify-content: flex-start;
}

.title1 {
  font-family: SourceHanSansCN, SourceHanSansCN;
  font-weight: bold;
  font-size: 16px;
  color: #FFFFFF 国际花园小区鸟瞰图
}

.title2 {
  width: 80px;
  height: 25px;
  background-color: #06B0E1;
  /* background-color: linear-gradient(194deg, #06B0E1 0%, #06B0E1 100%); */
  /* color: #ffffff; */
  text-align: center;
  line-height: 25px;
  margin-left: 20px;
  border-radius: 5px;


}

.titleimg {
  width: 25vw;
  height: 30vh;
  margin-top: 10px;
}

.titleimg1 {
  width: 100%;
  height: 100%;
}

.buildfilter {
  display: flex;
  width: 100%;
  height: 20%;
  margin-top: -30px;
  border: 1px solid #064d77 ;
  border-radius: 1%;
}

.buildf1 {
  width: 40vw;
  height: 100%;
  display: flex;
  flex-direction: column;
 /* background-color: aquamarine; */
}
.filter-item {
  /* 让标签和选择框水平排列 */
  display: flex;
  justify-content: space-between;
  align-items: center; /* 垂直居中对齐 */
  margin-top: 10px;
  margin-bottom: 10px; 
}
.buildf1t2{
  display: flex;
  flex-direction: column;
  background-color: #062e51;
}

.buildf1t1 {
  font-size: 14px;
  line-height: 40px;
  width: 200px;
  text-align: center;
  flex-direction:row  ;
  /* background-color: #69878f; */
}

.buildf2 {
  width: 100%;
  height: 40px;
  margin-top: 50px;
  align-items: center;
  display: flex;
  /* justify-content: space-between; */
  justify-content: flex-end;
  margin-right: 80px;
  color: #fff;

}

.buildbutton {
  
  width: 150px;
  height: 25px;
  border-radius: 5px;
  text-align: center;
  line-height: 25px;
  margin-right: 25px;
  color: #ffffff;
}
.horizontal-container {
  margin: 20px 0 10px 0;
  display: flex;
  justify-content: space-between;
  align-items: center; /* 垂直居中对齐 */
}

.bucolor1 {
  background-color: #072547;
  color: #06a8d9;
  border: 1px solid #0194f4;
}

.bucolor2 {
  background-color: #06b0e1;
  color: #ffffff;
}
.addPerson {
  display: flex;
  justify-content: flex-end;
  margin-right: 80px;
}
:deep().el-select .el-select__wrapper {
  background-color: #06325c !important;
  border: 1px solid #064d77 !important;
  box-shadow: none;
}

/* :deep() .el-table--border .el-table__cell {
  background-color: #062e51;
} */

/* 斑马行的背景色 */
:deep() .el-table--striped .el-table__body tr.el-table__row--striped td {
  background-color: #062e51 !important;
}

:deep() .el-table--striped .el-table__body tr.el-table__row td {
  background-color: #072547;
  border: none !important;
}

/* 表头背景色 */
:deep() .el-table th {
  background: linear-gradient(to bottom, #063563, #063563);
  border: none !important;
}

/* 表头字体色 */
:deep() .el-table thead {
  font-weight: 400;
  font-size: 14px;
  color: #ffffff;
  line-height: 16px;
  text-align: right;
}

/* 鼠标经过时 行的背景色 */
:deep() .el-table__body tr:hover>td {
  background-color: #072547 !important;
}

.table___ {
  --el-table-border: 0.5px solid #69878f;
  --el-table-border-color: #69878f;
  border-radius: 5px;
  color: #ffffff;
  max-height: calc(100% - 195px - 30vh);
  overflow: auto;
}

:deep() .el-table__inner-wrapper::before {
  border: none;
  height: 0 !important;
}

/* //分页 */
.page {
  height: 40px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 5px;
}

.page__ {
  /* width: 100%; */
  height: 40px;
}

:deep().el-pagination {
  background-color: rgba(0, 0, 0, 0) !important;
}

:deep().el-pagination .btn-prev {
  background-color: rgba(0, 0, 0, 0) !important;
  border: 1px solid #06a0cf !important;
  color: #ffffff;
}

:deep() .el-pagination .btn-next {
  background-color: rgba(0, 0, 0, 0) !important;
  border: 1px solid #06a0cf !important;
  color: #ffffff;
  margin-left: 5px;
}

:deep().el-pagination .el-pager .number {
  background-color: rgba(0, 0, 0, 0) !important;
  border: 1px solid #06a0cf !important;
  color: #ffffff;
  margin-left: 5px;
}

:deep().el-pagination .el-pager .more {
  background-color: rgba(0, 0, 0, 0) !important;
  border: 1px solid #06a0cf !important;
  color: #ffffff;
  margin-left: 5px;

}

/* 定制整个滚动条 */
::-webkit-scrollbar {
  width: 10px;
  /* 滚动条宽度 */
}

/* 定制滚动条轨道 */
::-webkit-scrollbar-track {
  background: #023375;
  border-radius: 10px;

  /* 轨道颜色 */
}

/* 定制滚动条的滑块（thumb） */
::-webkit-scrollbar-thumb {
  background: #0d68c1;
  border-radius: 10px;

  /* 滑块颜色 */
}

/* 当鼠标悬停在滑块上 */
::-webkit-scrollbar-thumb:hover {
  background: #DDDEE0;
  /* 滑块悬停颜色 */
}


/* 表单全局样式 */
.top-center-drawer .el-form-item {
  display: flex;
  margin-bottom: 18px;
}

.top-center-drawer .el-form-item__label {
  padding: 0 12px 0 0;
  text-align: right;
  flex: 0 0 100px;
}

.top-center-drawer .el-form-item__content {
  flex: 1;
  min-width: 0;
}

/* 操作按钮专用样式 */
.action-buttons .el-form-item__content {
  display: flex;
  justify-content: space-between;
}

.action-buttons .el-button {
  margin: 0 !important;
  flex: 1;
}

.action-buttons .el-button + .el-button {
  margin-left: 10px !important;
}

/* 抽屉整体样式 */
.top-center-drawer {
  left: 50%;
  transform: translateX(-50%);
  width: auto !important;
  max-width: 600px;
  border-radius: 0 0 8px 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  padding: 20px;
}

.drawer-content {
  min-width: 400px;
}
</style>