<script setup lang="ts">
import { fnMd5 } from '@/utils/common'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { GlobalStore } from '@/stores/index'
import { User_Post } from '@/api/user/index'
import { View, Hide } from '@element-plus/icons-vue'
import Dialog from '@/components/dialog/Dialog.vue'
import { ref, computed, reactive, nextTick } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'

const router = useRouter()
const ruleFormRef = ref<FormInstance>()
const globalStore = GlobalStore()
const info = computed(() => globalStore.GET_User_Info)
const dialogRef = ref<InstanceType<typeof Dialog> | null>(null)
const getPlaceholder = (str: string | number): string | number => {
  if (str || str === 0) return str
  return '-'
}
const getT_entry_type = (str: string) => {
  switch (str) {
    case '1':
      return '全职'
    case '2':
      return '兼职'
    case '3':
      return '实习生'
  }
}
const getT_sex = (val: number) => {
  if (!val) return val
  switch (val) {
    case 1:
      return '男'
    case 2:
      return '女'
  }
}
const getT_marryOrT_expire = (val: string | number, str: string) => {
  if (val === '-') return val
  switch (val) {
    case 0:
      return str === 'T_marry' ? '未婚' : '否'
    case 1:
      return str === 'T_marry' ? '未婚' : '是'
  }
}

const ruleForm = reactive({
  pass: '',
  checkPass: ''
})

const validatePass = (rule: any, value: any, callback: any) => {
  if (value === '') {
    callback(new Error('请输入要修改的密码'))
  } else {
    if (ruleForm.checkPass !== '') {
      if (!ruleFormRef.value) return
      ruleFormRef.value.validateField('checkPass', (errorMessage) => {
        if (errorMessage) {
          console.error(errorMessage);
        }
      })
    }
    callback()
  }
}
const validatePass2 = (rule: any, value: any, callback: any) => {
  if (value === '') {
    callback(new Error('请再一次输入要修改的密码'))
  } else if (value !== ruleForm.pass) {
    callback(new Error('两次密码不一致!'))
  } else {
    callback()
  }
}

const rules = reactive<FormRules>({
  pass: [{ validator: validatePass, trigger: 'blur' }],
  checkPass: [{ validator: validatePass2, trigger: 'blur' }]
})

const submitForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.validate(async valid => {
    if (valid) {
      const res: any = await User_Post({ User_tokey: globalStore.GET_User_tokey, T_pass: fnMd5(ruleForm.pass) })
      if (res.Code === 200) {
        ElMessage.success('修改成功!!')
        nextTick(() => resetForm(ruleFormRef.value))
        logOut()
      }
    } else {
      return
    }
  })
}

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  dialogRef.value?.DialogClose()
  formEl.resetFields()
}

const logOut = () => {
  localStorage.clear()
  globalStore.SET_User_Tokey('')
  globalStore.SET_User_Info({})
  globalStore.SET_Flat_Menu([])
  router.replace('/login')
}

const passType = ref('password')
const checkPassType = ref('password')
const changeType = (val: string) => {
  if (val === 'pass') passType.value = passType.value === 'password' ? 'text' : 'password'
  else checkPassType.value = checkPassType.value === 'password' ? 'text' : 'password'
}
</script>

<template>
  <div class="user">
    <div class="info">
      <h1>个人中心</h1>
      <h3>宝智达： {{ getPlaceholder(info.T_name) }}</h3>
      <div class="content">
        <p>
          用户名：<span>{{ getPlaceholder(info.T_user) }}</span>
        </p>
        <p>部门：{{ getPlaceholder(info.T_dept_name) }}</p>
        <p>岗位：{{ getPlaceholder(info.T_post_name) }}</p>
        <p>部门负责人：{{ info.T_dept_leader === 1 ? '是' : '否' }}</p>
        <p>性别：{{ getT_sex(getPlaceholder(info.T_sex) as number) }}</p>
        <p>民族：{{ getPlaceholder(info.T_nation) }}</p>
        <p>毕业院校：{{ getPlaceholder(info.T_school) }}</p>
        <p>专业：{{ getPlaceholder(info.T_major) }}</p>
        <p>学历：{{ getPlaceholder(info.T_education) }}</p>
        <p>联系电话：{{ getPlaceholder(info.T_phone) }}</p>
        <p>婚否：{{ getT_marryOrT_expire(getPlaceholder(info.T_marry), 'T_marry') }}</p>
        <p>配偶姓名：{{ getPlaceholder(info.T_spouse_name) }}</p>
        <p>配偶联系电话：{{ getPlaceholder(info.T_spouse_phone) }}</p>
        <p>入职时间：{{ getPlaceholder(info.T_entry_time) }}</p>
        <p>转正时间：{{ getPlaceholder(info.T_positive_time) }}</p>
        <p>入职类型：{{ getT_entry_type(getPlaceholder(info.T_entry_type) as string) }}</p>
        <p>劳动合同开始时间：{{ getPlaceholder(info.T_contract_start_time) }}</p>
        <p>劳动合同结束时间：{{ getPlaceholder(info.T_contract_end_time) }}</p>
        <p>是否到期：{{ getT_marryOrT_expire(getPlaceholder(info.T_expire), 'T_expire') }}</p>
        <p>备注：{{ getPlaceholder(info.T_remark) }}</p>
      </div>
      <div class="edit">
        <el-button type="primary" @click="dialogRef?.DialogOpen()">修改密码</el-button>
      </div>
    </div>
    <Dialog ref="dialogRef">
      <template #header>
        <h3>修改密码</h3>
      </template>
      <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="120px">
        <el-form-item label="新密码" prop="pass">
          <el-input v-model="ruleForm.pass" :type="passType" autocomplete="off">
            <template #suffix>
              <span class="view">
                <el-icon v-if="passType === 'password'" class="el-input__icon" @click="changeType('pass')">
                  <Hide />
                </el-icon>
                <el-icon v-else class="el-input__icon" @click="changeType('pass')">
                  <View />
                </el-icon>
              </span>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="checkPass">
          <el-input v-model="ruleForm.checkPass" :type="checkPassType" autocomplete="off">
            <template #suffix>
              <span class="view">
                <el-icon v-if="checkPassType === 'password'" class="el-input__icon" @click="changeType('checkPass')">
                  <Hide />
                </el-icon>
                <el-icon v-else class="el-input__icon" @click="changeType('checkPass')">
                  <View />
                </el-icon>
              </span>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-button @click="resetForm">取消</el-button>
          <el-button type="primary" @click="submitForm(ruleFormRef)">确认</el-button>
        </el-form-item>
      </el-form>
    </Dialog>
  </div>
</template>

<style scoped lang="scss">
.user {
  height: 100%;
  overflow-y: auto;
  display: flex;
  justify-content: center;
  font-weight: bold;
  color: var(--el-text-color-secondary);
  .info {
    padding: 20px;
    h1 {
      font-size: 32px;
      margin-bottom: 2rem;
    }
    h3 {
      font-size: 18px;
    }
    .content {
      margin-top: 2rem;
      span {
        letter-spacing: 2px;
      }
    }
    .edit {
      margin-top: 2rem;
    }
  }
}
</style>
