<template>
  <div>
    <el-dialog
      v-model="addChildVisible"
      :title="title"
      width="800"
      align-center
    >
      <el-form
        ref="memberFormRef"
        style="max-width: 1200px"
        :model="depForm"
        status-icon
        :rules="depRules"
        label-width="auto"
        class="demo-ruleForm"
      >
        <el-form-item prop="name" class="form-item">
          <div class="label">
            <div>姓名</div>
            <div class="red">*</div>
          </div>
          <el-input
            v-model="depForm.name"
            autocomplete="on"
            placeholder="请输入姓名"
          />
        </el-form-item>
        <el-form-item prop="departmentId" class="form-item">
          <div class="label">
            <div>部门</div>
            <div class="red">*</div>
          </div>
          <el-select
            v-model="depForm.departmentId"
            clearable
            placeholder="请选择上级部门"
          >
            <el-option
              v-for="item in depList"
              :key="item.departmentId"
              :label="item.departmentName"
              :value="item.departmentId"
            />
          </el-select>
        </el-form-item>

        <el-form-item prop="userTel" class="form-item">
          <div class="label">
            <div>手机号码</div>
            <div class="red">*</div>
          </div>
          <el-input
            v-model="depForm.userTel"
            autocomplete="on"
            placeholder="请输入手机号，登录使用"
            maxlength="11"
          />
        </el-form-item>
        <el-form-item prop="email" class="form-item">
          <div class="label">
            <div>联系邮箱</div>
            <div class="red">*</div>
          </div>
          <el-input
            v-model="depForm.email"
            autocomplete="on"
            placeholder="请输入联系邮箱，登录使用"
          />
        </el-form-item>

        <!-- <el-form-item prop="userNo" class="form-item">
          <div class="label">
            <div>用户Id</div>
          </div>
          <el-input
            v-model="depForm.userNo"
            autocomplete="on"
            placeholder="成员的唯一标识，不填则自动生成"
          />
        </el-form-item> -->
        <el-form-item prop="sex" class="form-item">
          <div class="label">
            <div>性别</div>
          </div>
          <el-select
            v-model="depForm.sex"
            clearable
            filterable
            placeholder="请选择性别"
          >
            <el-option
              v-for="item in sexOptions"
              :key="item.departmentId"
              :label="item.departmentName"
              :value="item.departmentId"
            />
          </el-select>
        </el-form-item>
        <el-form-item prop="nickName" class="form-item">
          <div class="label">
            <div>别名</div>
          </div>
          <el-input
            v-model="depForm.nickName"
            autocomplete="on"
            placeholder="请输入别名"
          />
        </el-form-item>
        <el-form-item prop="password" class="form-item">
          <div class="label">
            <div>登录密码</div>
          </div>
          <el-input
            v-model="depForm.password"
            autocomplete="on"
            placeholder="请设置登录密码"
            show-password
            type="password"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="addChildCancel">取消</el-button>
          <el-button type="info" @click="conAddDepart"> 提交 </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive,defineEmits } from 'vue'
import {  getDepartmentNameBottom } from '@/api/department'
import { addMember } from '@/api/member'
import { useUserStore } from '@/store/modules/user'
const userStore = useUserStore()

import { ElMessageBox } from 'element-plus'
const emit = defineEmits(['getList'])
const sexOptions = [
  { departmentId: 1, departmentName: '男' },
  { departmentId: 2, departmentName: '女' },
]

const addChildVisible = ref(false)

const addChildHandle = (type) => {
  if(type=='add'){
    title.value='添加人员'
  }else {
    title.value='修改人员'
  }
  addChildVisible.value = true

  getDepName()
  console.log(9999)
  console.log(userStore.selectedMember)
  if (userStore.selectedMember != null) {
    depForm.value=userStore.selectedMember;
    console.log(depList.value)
    //depForm.value.departmentId=depList.value.find(a =>a.departmentName==depForm.value.departmentName).departmentId
  }
}
const title=ref('')
const depForm = ref({
  name: '',
  departmentId: '',
  userTel: '',
  email: '',
  userNo: '',
  sex: '',
  nickName: '',
  password: '',
  type: 1,
  departmentName:'',
  id:''
})

const depList = ref([])
const validatePassword = (rule, value, callback) => {
  if (!value) {
    // 如果密码为空，不进行任何校验，直接返回
    callback()
  } else {
    // 正则表达式：必须包含字母和数字，不得有特殊字符
    const regex = /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]*$/
    if (!regex.test(value)) {
      callback(new Error('密码必须包含字母和数字，不得有特殊字符'))
    } else {
      callback()
    }
  }
}

const depRules = {
  name: [{ required: true, message: '姓名不能为空', trigger: 'blur' }],
  parentId: [{ required: true, message: '部门不能为空', trigger: 'blur' }],
  departmentId: [{ required: true, message: '部门不能为空', trigger: 'blur' }],
  userTel: [
    { required: true, message: '手机号不能为空', trigger: 'blur' },
    {
      pattern: /^1[3-9]\d{9}$/,
      message: '请输入正确的手机号码格式',
      trigger: 'blur',
    },
  ],
  email: [
    { required: true, message: '邮箱不能为空', trigger: 'blur' },
    { type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur' },

  ],
  password: [{ validator: validatePassword, trigger: 'blur' }],
}

const memberFormRef = ref(null)

const conAddDepart = () => {
  memberFormRef.value.validate(valid => {
    if (valid) {
      if(title.value=='add'){
        console.log(depForm)
        addMember(depForm)
          .then(res => {
            if (res.data.code == 200) {
              ElMessageBox.alert('添加成功', '提示', {
                confirmButtonText: '确定',
                type: 'success',
              })
              addChildVisible.value = false
              resetForm()
              emit('getList')
            }
          })
          .catch(err => {
            ElMessageBox.alert(err, '提示', {
              confirmButtonText: '确定',
              type: 'error',
            })
            console.log(err)
          })
      }else {
        //修改

        userStore.selectedMember={};
        console.log('修改！')
      }


    } else {
      return false
    }
  })
}

const addChildCancel = () => {
  addChildVisible.value = false
  resetForm()
}

const resetForm = () => {
  depForm.name = ''
  depForm.departmentNo = ''
  depForm.parentId = ''
  depForm.describeStr = ''
  depForm.userTel = ''
  depForm.email = ''
  depForm.userNo = ''
  depForm.sex = ''
  depForm.nickName = ''
  depForm.password = ''
  memberFormRef.value.resetFields()
}

const getDepName = () => {
  getDepartmentNameBottom().then(res => {
    depList.value = res.data.data
  })
}

defineExpose({
  addChildHandle,
})
</script>

<style lang="scss" scoped>
.demo-ruleForm {
  display: grid;
  grid-template-columns: 1fr 1fr; // 两列布局
  gap: 16px; // 列与列之间的间距
}

.form-item {
  margin-bottom: 16px; // 行与行之间的间距
}

.label {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  gap: 4px;
  margin-bottom: 8px;
  font-size: 14px;
  color: #1f2329;
  .red {
    color: #ff3535;
  }
}
</style>
