<script lang="ts">
export default {
  name: 'personalcenter'
};
</script>

<script setup lang="ts">
import { onMounted, reactive, ref, toRefs } from 'vue';
import { ElForm, ElMessage } from 'element-plus';
import { localStorage } from '@/utils/storage';
import {
  employeeDetail,
  fixPersonalPW
} from '@/api/system/employee';
import {
  EmployeeDetail,
  ChangePwdParam
} from '@/types/api/system/employee';

const dataFormRef = ref(ElForm);

const state = reactive({
  loading: false,
  detail: {} as EmployeeDetail,
  dialog: {
    title: '',
    visible: false
  },
  formData: {
    id: 0,
    lastPassword: '',
    newPassword: ''
  } as ChangePwdParam,
  rules: {
    lastPassword: [{ required: true, message: '不能为空', trigger: 'blur' }],
    newPassword: [{ required: true, message: '不能为空', trigger: 'blur' }]
  },
});
const {
  loading,
  detail,
  dialog,
  formData,
  rules
} = toRefs(state);

const handleQuery = () => {
  let userInfo = localStorage.get('userInfo');
  state.formData.id = userInfo.id;
  employeeDetail({ id: state.formData.id }).then(({ data }) => {
    state.detail = data
  })
}

/**
 * 显示修改密码
 */
const showChangePwd = () => {
  state.dialog = {
    title: '修改密码',
    visible: true
  };
  formData.value.lastPassword = "";
  formData.value.newPassword = "";
}

/**
 * 提交新增/编辑
 */
 function submitFormData() {
  dataFormRef.value.validate((valid: any) => {
    if (valid) {
      loading.value = true;
      fixPersonalPW(state.formData).then(() => {
        ElMessage.success("操作成功");
        cancel();
        handleQuery();
        loading.value = false;
      })
    }
  });
 }

/**
 * 取消
 */
function cancel() {
  dialog.value.visible = false;
  formData.value.lastPassword = "";
  formData.value.newPassword = "";
  dataFormRef.value.resetFields();
  dataFormRef.value.clearValidate();
}

onMounted(() => {
  handleQuery()
});
</script>

<template>
  <div class="app-container">
    <el-card>
      <template #header>
        <div class="card-header">
          <span>个人中心</span>
          <el-button class="button" text @click.stop="showChangePwd">修改密码</el-button>
        </div>
      </template>
      <div class="project-card__main">
        <el-row :gutter="10">
          <el-col :span="2" class="fw-b"> 用户名： </el-col>
          <el-col :span="6">
            {{ state.detail.username }}
          </el-col>
          <el-col :span="2" class="fw-b"> 所在部门： </el-col>
          <el-col :span="6">
            {{ state.detail.departmentName }}
          </el-col>
          <el-col :span="2" class="fw-b"> 拥有权限： </el-col>
          <el-col :span="6">
            {{ state.detail.role }}
          </el-col>
        </el-row>
        <el-row :gutter="10" style="margin-top: 20px;">
          <el-col :span="2" class="fw-b"> 电话号码： </el-col>
          <el-col :span="6">
            {{ state.detail.mobilePhone }}
          </el-col>
          <el-col :span="2" class="fw-b"> 邮箱： </el-col>
          <el-col :span="6">
            {{ state.detail.email }}
          </el-col>
          <el-col :span="2" class="fw-b"> QQ： </el-col>
          <el-col :span="6">
            {{ state.detail.qq }}
          </el-col>
        </el-row>
      </div>
    </el-card>

    <!-- 修改密码弹窗 -->
    <!-- 表单弹窗 -->
    <el-dialog
      :title="dialog.title"
      v-model="dialog.visible"
      width="500px"
      destroy-on-close
    >
      <el-form
        ref="dataFormRef"
        :model="formData"
        :rules="rules"
        label-width="100px"
      >
        <el-form-item label="旧密码" prop="lastPassword">
          <el-input type="password" v-model="formData.lastPassword" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="新密码" prop="newPassword">
          <el-input type="password" v-model="formData.newPassword" placeholder="请输入" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" :loading="loading" @click="submitFormData">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<style lang="scss" scoped>
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.fw-b {
  font-weight: bold;
}
</style>