<template>
    <div class="ab-m-l-20">
     <div class="ab-p-b-20" style="display: flex;align-items: right;align-items:center;border-bottom: 1px solid #ece9e9;">
         <div>
            <el-avatar :size="80" :src="userStore.avatarUrl" @click="uploadAvatarShow=true"/>
        </div>
         <div style="padding-left: 10px;">
             <el-text tag="b" style="font-size: 16px;">{{employee.name}}</el-text>
             <br/>
             <el-tag ><UserFilled width="14"/>{{employee.positionName}}</el-tag>
         </div>
     </div>
     <div style="border-bottom: 1px solid #ece9e9;" class="ab-p-b-20 ab-m-t-20">
        <AbSection title="基础信息" :showLine="false"></AbSection>
        <el-row >
            <el-col class="ab-m-t-10" :span="12"><el-text size="large">人员ID&nbsp;&nbsp;&nbsp;&nbsp;</el-text><el-text size="large" class="ab-m-l-30">{{employee.id}}</el-text></el-col>
            <el-col class="ab-m-t-10" :span="12" v-if="employee.personnelId"><el-text size="large">人员编码</el-text><el-text size="large" class="ab-m-l-30">{{employee.personnelId}}</el-text></el-col>
            <el-col class="ab-m-t-10" :span="12"><el-text size="large">手机号&nbsp;&nbsp;&nbsp;&nbsp;</el-text><el-text size="large" class="ab-m-l-30" >{{employee.mobile}}</el-text></el-col>
            <el-col class="ab-m-t-10" :span="12"><el-text size="large">所属部门</el-text><el-text size="large" class="ab-m-l-30">[{{employee.dept?.id}}]{{employee.dept?.name}}</el-text></el-col>
            <el-col class="ab-m-t-10" :span="12" v-if="employee.hrstatus">
                <el-text size="large">人资状态</el-text>
                <el-text size="large" class="ab-m-l-30" v-if="0===employee.hrstatus">正式</el-text>
                <el-text size="large" class="ab-m-l-30" v-else-if="1===employee.hrstatus">试用</el-text>
                <el-text size="large" class="ab-m-l-30" v-else>离职</el-text>
            </el-col>
            <el-col class="ab-m-t-10" :span="12">
                <el-text size="large">用户状态</el-text>
                <el-text size="large" class="ab-m-l-30" v-if="0===employee.status">启用</el-text>
                <el-text size="large" class="ab-m-l-30" v-else>停用</el-text>
            </el-col>
        </el-row>
     </div>
     
     <div style="border-bottom: 1px solid #ece9e9;" class="ab-p-b-20 ab-m-t-20">
        <AbSection  title="安全设置" :showLine="false"></AbSection>
        <div class="ab-m-t-10" style="display: flex;justify-content: space-between; align-items: right;align-items:center;">
            <div style="display: flex;align-items: right;align-items:center;">
                <div><el-text size="large">登录密码</el-text></div>
                <div class="ab-m-l-20">
                    <el-text size="large" tag="b">已设置</el-text>
                    <el-text size="large" type="info" class="ab-m-l-10">长度6-16位字符，必须同时包含数字和大小写字母，不允许有空格、中文。</el-text>
                </div>
            </div>
            <div class="ab-m-r-20">
                <el-button type="primary" @click="updatepwdShow=true">修改</el-button>
            </div>
        </div>
        
     </div>
     
    </div>
    <!-- 修改密码-->
    <el-dialog v-model="updatepwdShow" width="500" title="密码修改">
         <el-form v-loading="loginLoading"  label-width="110px" ref="updatePwdRuleFormRef"  :rules="updatePwdRules" :model="updatePwdForm"   @keyup.enter.native="updatePwd(updatePwdRuleFormRef)" >
             <el-form-item prop="username" label="用户名">
                 <el-text >{{updatePwdForm.username}}</el-text>
             </el-form-item>
             <el-form-item prop="newpassword" label="新密码">
                 <el-tooltip effect="dark" placement="top" >
                     <template #content> 密码长度6-16位字符<br />必须同时包含数字和大小写字母<br />不允许有空格、中文</template>
                     <el-input type="password" v-model.trim="updatePwdForm.newpassword" placeholder="请输入新密码"  autocomplete="off" show-password />
                 </el-tooltip>
             </el-form-item>
             <el-form-item prop="confirmnewpassword" label="确认新密码">
                 <el-input type="password" v-model.trim="updatePwdForm.confirmnewpassword" placeholder="请再次输入新密码" autocomplete="off"  show-password />
             </el-form-item>
             <el-form-item>
                 <span style="text-align: right;width: 100%;">
                     <el-button @click="updatepwdShow=false" >取消</el-button>
                     <el-button type="primary" @click="updatePwd(updatePwdRuleFormRef)" >确定</el-button>
                 </span>
             </el-form-item>
         </el-form>
     </el-dialog>
    <!-- 上传头像-->
    <el-dialog v-model="uploadAvatarShow" width="400" title="上传头像">
        <el-row>
            <el-col :span="12">
                <el-upload
                    ref="avatarUpload"
                    name="image_upload"
                    class="avatar-uploader"
                    action="/acas/employee/uploadPhoto"
                    :auto-upload="true"
                    :headers="avatarHeaders"
                    :show-file-list="false"
                    list-type="picture-card"
                    :on-success="handleAvatarSuccess" 
                    :on-error="handleAvatarError"
                    :before-upload="beforeAvatarUpload"
                >
                    <el-icon class="avatar-uploader-icon"><Plus /></el-icon>
                </el-upload>
            </el-col>
            <el-col :span="12">
                <el-text type="danger" size="large" >注意事项</el-text>
                <el-row style="margin-top: 10px;" v-for="(value,index) in avatarTypeTips" :key="value">
                    <el-col :span="24"><el-text type="danger" >{{index+1}}、{{value}}</el-text></el-col>
                </el-row>
            </el-col>
        </el-row>
       
     </el-dialog>
     
 
 </template>
 
 <script setup lang="ts">
 import AbSection from '@/framework/components/standard/AbSection/index.vue'
 import { useSettingsStore } from "@/framework/store/modules/settings";
 import type { FormInstance, FormRules } from 'element-plus'
 import { getEmployee,baseLoginUpdatePwd,getKey } from '@/framework/api/acas/index'
 import { useUserStore,getToken,getTokenHeader } from "@/framework/store/modules/user";
 import sm from 'sm-crypto'
 const userStore = useUserStore()
 const employee=ref({})
 const settingsStore = useSettingsStore()
 const cToken=getToken()
 const currentLoginType=ref(settingsStore.loginType.find((o: any) => o.id === cToken.user_type))
 
 //修改密码表单
 const loginLoading=ref(false)
 const updatepwdShow=ref(false)
 const updatePwdForm = reactive({username: '',newpassword: '',confirmnewpassword: '',})
 const updatePwdRuleFormRef = ref<FormInstance>()
 const validateConfirmPassword = (rule: any, value: any, callback: any) => {
   if (value !== updatePwdForm.newpassword) {
     callback(new Error("两次输入密码不一致"))
   } else {
     callback()
   }
 }
 const updatePwdRules = reactive<FormRules>({
     newpassword: [{ required: true, message: '新密码不能为空', trigger: 'blur' },],
     confirmnewpassword: [{ required: true, message: '请再次输入新密码', trigger: 'blur' },{ validator: validateConfirmPassword, trigger: 'blur' }],
 })
 /**修改密码 */
 const updatePwd = async (formEl: FormInstance | undefined) => {
     if (!formEl || !await formEl.validate((valid, fields) => { return valid })) 
         return 
     let prefixUrl=currentLoginType.value.prefixUrl
     if(''===prefixUrl){
         ElMessage({type: 'error',message: '['+currentLoginType.value.name+']配置有误' })
         return;
     }
     let k=await getKey()
     let npe=sm.sm2.doEncrypt(updatePwdForm.newpassword, k);
     let cnpe=sm.sm2.doEncrypt(updatePwdForm.confirmnewpassword, k);
     loginLoading.value=true
 
 
     baseLoginUpdatePwd(prefixUrl+'/loginChangePassword',{username: updatePwdForm.username,newpassword: npe,confirmnewpassword: cnpe,}).then((data: any) => {
         updatePwdForm.newpassword=''
         updatePwdForm.confirmnewpassword=''
         ElMessage({type: 'success',message: '修改密码成功' })
         updatepwdShow.value=false
     }).finally(() => {
         loginLoading.value=false
     })
 }
 /**上传头像 */
 const avatarUpload=ref()
 const avatarHeaders=getTokenHeader()
 const uploadAvatarShow=ref(false)
 const imageUrl = ref('')
 const avatarTypeTips=['头像图片文件支持jpeg、png格式！','头像图片文件大小不能超过500KB！']
 const handleAvatarSuccess: UploadProps['onSuccess'] = (response,uploadFile) => {
    if(200==response.status){
        userStore.avatarUrl=response.data
        uploadAvatarShow.value=false
    }else{
        ElMessage.error((response.errorCode?'['+response.errorCode+']':'')+'系统异常');
        console.error('系统异常', response);
    }
}
const handleAvatarError: UploadProps['onError'] = (response,uploadFile) => {
    console.error('系统异常', response);
    ElMessage.error('系统异常');
}
const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
    console.log(rawFile)
  if (rawFile.type !== 'image/jpeg'&&rawFile.type !== 'image/png') {
    ElMessage.error(avatarTypeTips[0])
    return false
  } else if (rawFile.size / 1024 / 500 > 2) {
    ElMessage.error(avatarTypeTips[1])
    return false
  }
  imageUrl.value = URL.createObjectURL(rawFile!)
  return true
}

 
onMounted(() => {
    getEmployee({id:userStore.userId}).then((data: any) => {
        employee.value=data;
        updatePwdForm.username=employee.value.id
        if(employee.value.photoUrl){
        userStore.avatarUrl=employee.value.photoUrl
        }
    }).finally(() => {
    })
});
 </script>
 

<style lang="scss" scoped>

    .el-icon.avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        text-align: center;
    }
</style>