<!-- 用户信息弹窗 -->
<script lang="ts" setup name="ResetPwd">
import type { FormInstance, FormRules } from 'element-plus'
import { ElMessage } from 'element-plus'
import { changePwd, getUserList, updateUser } from '@/api/system/user'
import { RSAencrypt } from '@/utils/security'
import { getInfo } from '@/api/system/login'
import useUserStore from '@/store/modules/user'
import { getDictByCode } from '@/api/system/dict'
import { getDeptList, getDeptTree } from '@/api/system/dept'
import { clearSymbol } from '@/utils/String'
const dialogFormVisible = ref<boolean>(false) // 对话框是否显示
const dataFormRef = ref<FormInstance>()
// 表单对象
const userForm = ref({
  account: '', // 账号
  name: '',
  sex: '',
  birthday: '',
  roleName: '',
  deptName: '',
  email: '',
  phone: '',
  avatar: '',
  id: '',
  roleId: '',
  deptId: '',
  deptAllName: '',
})
const userStore = useUserStore()
const isEdit = ref(false)
const sexList = ref<{ id: string; value: string; name: string }[]>()// 性别选项
const perTypeList = ref<{ id: string; value: string; name: string }[]>()// 人员类别
// 校验规则
const rules: FormRules = reactive({
  account: [{ required: true, message: '账号不能为空', trigger: ['blur', 'change'] }],
  name: [{ required: true, message: '姓名不能为空', trigger: ['blur', 'change'] }],
  email: [{ required: false, message: '请输入邮箱地址', trigger: 'blur' }, { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }],
  // phone: [{ required: false, pattern: /^1[3456789]\d{9}$/, message: '请输入正确的手机号', trigger: ['blur', 'change'] }],
  avatar: [{ required: true, message: '人员类别必选', trigger: ['blur', 'change'] }],
})// 前端校验规则
// 弹窗初始化
const loading = ref(false)
const initDialog = async () => {
  isEdit.value = false
  loading.value = true
  const res = await getUserList({ offset: 1, limit: 99999 })
  const data = res.data.rows.filter((item: any) => item.id === userStore.id)[0]
  // userForm.value = data
  userForm.value.account = data.account
  userForm.value.name = data.name
  userForm.value.sex = data.sex
  userForm.value.birthday = data.birthday
  userForm.value.roleName = data.roleName
  userForm.value.deptName = data.deptName
  userForm.value.roleId = data.roleId
  userForm.value.deptId = data.deptId
  userForm.value.email = data.email
  userForm.value.phone = data.phone
  userForm.value.avatar = data.avatar
  userForm.value.deptAllName = ''
  userForm.value.id = data.id
  dialogFormVisible.value = true
  resetForm()
  nextTick(() => {
    dataFormRef.value?.clearValidate()
  })
  // 查询用户组织
  getDeptList({ deptName: data.deptName }).then((res1) => {
    console.log(data.deptName, 'data.deptName')
    let fullDeptName = ''
    if (res1.data.list.length) {
      getDeptTree({ limit: 999999, offset: 1 }).then((res) => {
        const all = res.data.list
        const depts = res1.data.list[0].pids.split(',')?.filter((item: any) => item)?.map((item: any) => clearSymbol(item))
        if (!depts.length) {
          userForm.value.deptAllName = data.deptName
          return
        }
        console.log(depts, 'depts')
        depts.forEach((citem: any) => {
          const data = all.filter((item: any) => item.deptId === citem)
          console.log(data, 'data')
          if (data.length) {
            fullDeptName = `${fullDeptName}${data[0].fullName === '顶级' ? '' : '/'}${data[0].fullName}`
          }
        })
        userForm.value.deptAllName = `${fullDeptName}/${data.deptName}`
        loading.value = false
      })
    }
    else {
      loading.value = false
    }
  })
}

defineExpose({ initDialog })

// 重置表单
function resetForm() {
  // userForm.account = ''

}
// 保存数据
function saveData() {
  dataFormRef.value?.validate(async (valid) => {
    if (valid) {
      // console.log(userForm.value, '111')
      updateUser(userForm.value).then((response) => {
        ElMessage.success('修改成功')
        isEdit.value = false
        // 通知仓库修改个人信息
        userStore.getUserInfo()
      })
    }
  })
}
const fetchDict = () => {
  getDictByCode('sex').then((response) => {
    sexList.value = response.data
  })
  getDictByCode('bizStaffType').then((response) => {
    perTypeList.value = response.data
  })
}
fetchDict()
const updateDate = () => {
  isEdit.value = !isEdit.value
}
</script>

<template>
  <el-dialog v-model="dialogFormVisible" title="个人信息" width="50%" append-to-body>
    <div class="btn-handler">
      <el-button v-if="!isEdit" type="primary" @click="updateDate">
        编辑
      </el-button>
      <el-button v-else @click="updateDate">
        取消
      </el-button>
    </div>
    <el-form ref="dataFormRef" v-loading="loading" :class="[!isEdit ? 'isDetail' : '']" :rules="rules" :model="userForm" label-position="right" label-width="110px">
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="账号" prop="account">
            <el-input
              v-model.trim="userForm.account" type="text" disabled
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="姓名" prop="name">
            <el-input v-model.trim="userForm.name" type="text" placeholder="必填" :disabled="!isEdit" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="性别" prop="sex">
            <el-select v-model="userForm.sex" placeholder="请选择" :style="{ width: '100%' }" :disabled="!isEdit">
              <el-option v-for="item in sexList" :key="item.id" :label="item.name" :value="item.value" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="出生日期" prop="birthday">
            <el-date-picker
              v-model="userForm.birthday" type="date" format="YYYY-MM-DD" placeholder="选择日期" :disabled="!isEdit"
              style="width: 100%;"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="角色">
            <el-input v-model="userForm.roleName" type="text" placeholder="无" disabled />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="组织机构" prop="deptId">
            <el-input v-model="userForm.deptAllName" type="text" placeholder=" " disabled />
            <!-- <dept-select v-model="userForm.deptId" :data="deptTreeList" placeholder="选择组织机构" style="width: 100%;" /> -->
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="邮箱" prop="email">
            <el-input v-model.trim="userForm.email" type="text" placeholder="邮箱" :disabled="!isEdit" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="电话" prop="phone">
            <el-input v-model.trim="userForm.phone" type="text" placeholder="电话" :disabled="!isEdit" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="人员类别" prop="avatar">
            <el-select v-model="userForm.avatar" placeholder="请选择" :style="{ width: '100%' }" :disabled="!isEdit">
              <el-option v-for="item in perTypeList" :key="item.id" :label="item.name" :value="item.value" />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <template v-if="isEdit">
          <el-button type="primary" @click="saveData">
            保存
          </el-button>
          <el-button @click="dialogFormVisible = false">
            取消
          </el-button>
        </template>
        <template v-else>
          <el-button type="primary" @click="dialogFormVisible = false">
            确认
          </el-button>
        </template>
      </div>
    </template>
  </el-dialog>
</template>

<style lang="scss" scoped>
// 样式
.isDetail {
  ::v-deep {
    .el-form-item.is-required:not(.is-no-asterisk) .el-form-item__label-wrap > .el-form-item__label::before,
    .el-form-item.is-required:not(.is-no-asterisk) > .el-form-item__label::before {
      content: "";
      display: none;
    }
  }
}

.footer {
  display: flex;
  justify-content: flex-end;
}

.btn-handler {
  display: flex;
  justify-content: right;
  padding: 10px;
}
</style>