<template>
  <ElDialog v-model="showDialog"
    :close-on-click-modal="false"
    @close="dialogCloseHandler"
    destroy-on-close
    width="25vw">
    <ElForm :model="userFormData"
      class="sys_user-form"
      label-width="auto">
      <ElFormItem label="姓名">
        <ElInput
          :readonly="userFormData.id=='1'"
          v-model="userFormData.nickname"
          :disabled="status === 'view'"
          placeholder="姓名"/>
      </ElFormItem>
      <ElFormItem label="头像">
        <Uploader
          v-model:file="userFormData.avatar"
          :disabled="status === 'view'"
          :limit="1"
          :multiple="true"
          accept="image/*"
          class="avatar-uploader"
          list-type="picture">
          <ElButton>点击上传头像</ElButton>
        </Uploader>
      </ElFormItem>
      <ElFormItem label="联系电话">
        <ElInput
          v-model="userFormData.phone"
          :disabled="status === 'view'"
          placeholder="联系电话"/>
      </ElFormItem>
      <ElFormItem v-if="status === 'add'" label="用户名">
        <ElInput
          v-model="userFormData.account.username"
          placeholder="用户名"/>
      </ElFormItem>
      <ElFormItem v-if="status === 'add'" label="密码">
        <ElInput
          v-model="userFormData.account.secret"
          autocomplete="new-password"
          placeholder="密码"
          show-password
          type="password"/>
      </ElFormItem>
    </ElForm>
    <template #footer>
      <ElButton @click="showDialog = false">{{ status === 'view' ? '关闭' : '取消' }}</ElButton>
      <ElButton v-if="status !== 'view'" :loading="submiting" type="primary" @click="submitHandler">提交</ElButton>
    </template>
  </ElDialog>
</template>
<script lang="ts" setup>
import UserApi from '@/pages/sys/user/user-api.ts'
import Strings from '@/common/utils/strings.ts'
import { ElMessage } from 'element-plus'
import Uploader from '@/components/uploader/Uploader.vue'

const emits = defineEmits([ 'editSucc' ])
const showDialog = ref(false)
const submiting = ref(false)
const status = ref<'add' | 'view' | 'modify'>('add')
const userFormData = ref<UserTypes.SearchUserResult>({
  account: {
    username: '',
    secret: '',
  },
})

function dialogCloseHandler() {
  userFormData.value = {
    account: {
      username: '',
      secret: '',
    },
  }
}

function submitHandler() {
  if (status.value === 'view') return
  submiting.value = true
  if (userFormData.value.id != null) {
    const {id, nickname, avatar, email, phone} = userFormData.value
    UserApi.modify({id, nickname, avatar, email, phone})
      .then(() => {
        ElMessage.success('修改成功')
        emits('editSucc')
        showDialog.value = false
      })
      .finally(() => {
        submiting.value = false
      })
  } else {
    const {nickname, avatar, email, phone, account} = userFormData.value
    UserApi.add({nickname, avatar, email, phone, account})
      .then(() => {
        ElMessage.success('添加成功')
        emits('editSucc')
        showDialog.value = false
      })
      .finally(() => {
        submiting.value = false
      })
  }
}

defineExpose({
  open(data?: UserTypes.SearchUserResult) {
    showDialog.value = true
    if (data != null && !Strings.isBlank(data.id)) {
      status.value = 'modify'
      UserApi.detail(data.id!)
        .then(res => {
          userFormData.value = {
            ...res.data, account: {},
          }
        })
    } else {
      status.value = 'add'
      userFormData.value = {
        account: {
          username: '',
          secret: '',
        },
      }
    }
  },
})
</script>
<style lang="stylus" scoped>
.sys_user-form {
  padding 20px
}

.avatar-uploader {
  width 100%
}
</style>
