<template>
  <div class="form-box">
    <el-row :gutter="20">
      <el-col :span="6" :xs="24">
        <el-card class="box-card">
          <template #header>
            <div class="clearfix">
              <span>个人信息</span>
            </div>
          </template>
          <div class="text-center">
            <userAvatar />
          </div>
          <ul class="list-group list-group-striped">
            <li class="list-group-item">
              用户名称
              <div class="pull-right">{{ state.user.userName }}</div>
            </li>
            <li class="list-group-item">
              手机号码
              <div class="pull-right">{{ state.user.phonenumber }}</div>
            </li>
            <li class="list-group-item">
              用户邮箱
              <div class="pull-right">{{ state.user.email }}</div>
            </li>
            <li class="list-group-item">
              所属部门
              <div v-if="state.user.dept" class="pull-right">{{ state.user.dept?.deptName }} / {{ state.postGroup }}</div>
            </li>
            <li class="list-group-item">
              所属角色
              <div class="pull-right">{{ state.roleGroup }}</div>
            </li>
            <li class="list-group-item">
              创建日期
              <div class="pull-right">{{ state.user.createTime }}</div>
            </li>
          </ul>
        </el-card>
      </el-col>
      <el-col :span="18" :xs="24">
        <el-card class="box-card">
          <template #header>
            <div class="clearfix">
              <span>基本信息</span>
            </div>
          </template>
          <el-tabs v-model="activeTab">
            <el-tab-pane label="基本资料" name="userInfo">
              <ProFrom
                ref="proFormRef"
                :items-options="itemsOptions"
                :form-options="_options"
                :model="userForm"
                @submit="submit"
                @cancel="closeCurrentTab"
              />
            </el-tab-pane>
            <el-tab-pane label="修改密码" name="resetPwd">
              <ProFrom
                ref="proFormRef"
                :items-options="itemsOptions1"
                :form-options="_options"
                :model="{}"
                @submit="submitPwd"
                @cancel="closeCurrentTab"
              />
            </el-tab-pane>
          </el-tabs>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts" name="uploadFile">
import userAvatar from './userAvatar.vue'
import { ElMessage } from 'element-plus'
import { getUserProfileApi, updateUserPwdApi, updateUserProfileApi } from '@/api/modules/system/user'
import { UserVO } from '@/api/interface/system/user'
import ProFrom from '@/components/ProForm/index.vue'
import { useTabsStore } from '@/stores/modules/tabs'
const { proxy } = getCurrentInstance() as ComponentInternalInstance
const { sys_user_gender } = toRefs<any>(proxy?.useDict('sys_user_gender'))
const tabStore = useTabsStore()
const route = useRoute()
const activeTab = ref('userInfo')
interface State {
  user: Partial<UserVO>
  roleGroup: string
  postGroup: string
}
const state = ref<State>({
  user: {},
  roleGroup: '',
  postGroup: ''
})
const proFormRef = ref<InstanceType<typeof ProFrom> | null>(null)
const userForm = ref({})
const getUser = async () => {
  const res = await getUserProfileApi()
  state.value.user = res.data.user
  userForm.value = { ...res.data.user }
  state.value.roleGroup = res.data.roleGroup
  state.value.postGroup = res.data.postGroup
}
const submit = async form => {
  const res = await updateUserProfileApi(form)
  if (res.code === 200) {
    ElMessage.success('修改成功')
    proFormRef.value?.resetForm
  }
}

const submitPwd = async form => {
  const res = await updateUserPwdApi(form)
  if (res.code === 200) {
    ElMessage.success('修改成功')
    proFormRef.value?.resetForm
  }
}
const closeCurrentTab = () => {
  if (route.meta.affix) return
  tabStore.removeTabs(route.fullPath)
}
const _options: ProForm.FormOptions = {
  labelWidth: 120,
  hasFooter: true,
  disabled: false,
  showCancelButton: true,
  cancelButtonText: '关闭'
}
let itemsOptions = reactive<ProForm.ItemsOptions[]>([
  {
    label: '用户昵称',
    prop: 'nickName',
    rules: [{ required: true, message: '用户昵称不能为空' }],
    compOptions: {
      placeholder: '请输入用户昵称'
    }
  },
  {
    label: '手机号码',
    prop: 'phonenumber',
    rules: [{ pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/, message: '请输入正确的手机号码', trigger: 'blur' }],
    compOptions: {
      placeholder: '请输入手机号码'
    }
  },
  {
    label: '邮箱',
    prop: 'email',
    rules: [{ type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }],
    compOptions: {
      placeholder: '请输入邮箱'
    }
  },
  {
    label: '性别',
    span: 12,
    prop: 'gender',
    compOptions: {
      elTagName: 'radio-group',
      enum: sys_user_gender.value,
      placeholder: '请输入邮箱'
    }
  }
])
// 表单配置项
let itemsOptions1 = reactive<ProForm.ItemsOptions[]>([
  {
    label: '旧密码',
    prop: 'oldPassword',
    rules: [
      { required: true, message: '密码不能为空' },
      { min: 5, max: 20, message: '用户密码长度必须介于 5 和 20 之间', trigger: 'blur' }
    ],
    compOptions: {
      showPassword: true,
      type: 'password',
      placeholder: '请输入旧密码'
    }
  },
  {
    label: '新密码',
    prop: 'newPassword',
    rules: [
      { required: true, message: '密码不能为空' },
      { min: 5, max: 20, message: '用户密码长度必须介于 5 和 20 之间', trigger: 'blur' }
    ],
    compOptions: {
      showPassword: true,
      type: 'password',
      placeholder: '请输入新密码'
    }
  },
  {
    label: '确认密码',
    prop: 'confirmPassword',
    rules: [
      { required: true, message: '密码不能为空' },
      { min: 5, max: 20, message: '用户密码长度必须介于 5 和 20 之间', trigger: 'blur' }
    ],
    compOptions: {
      showPassword: true,
      type: 'password',
      placeholder: '请输入新密码'
    }
  }
])
onMounted(() => {
  getUser()
})
</script>

<style scoped lang="scss">
@import './index';
</style>
