<template>
  <AFormPanel
    ref="formPanel"
    v-bind="formPanelProps">
    <template #default="formData">
      <div class="form-items">
        <ElFormItem label="头像">
          <Uploader
            ref="uploader"
            v-model:file="formData.avatar"/>
        </ElFormItem>
        <ElFormItem label="姓名">
          <ElInput
            v-model="formData.nickname"
            :readonly="formData.id=='1'"
            placeholder="姓名"/>
        </ElFormItem>
        <ElFormItem label="联系电话">
          <ElInput
            v-model="formData.phone"
            placeholder="联系电话"/>
        </ElFormItem>
        <ElFormItem v-if="status === 'add'" label="用户名">
          <ElInput v-model="formData.account.username" placeholder="用户名"/>
        </ElFormItem>
        <ElFormItem v-if="status === 'add'" label="密码">
          <ElInput
            v-model="formData.account.secret"
            autocomplete="new-password"
            placeholder="密码"
            show-password
            type="password"/>
        </ElFormItem>
      </div>
    </template>
  </AFormPanel>
</template>
<script lang="ts" setup>
import UserApi from '@/pages/sys/user/user-api.ts'
import Strings from '@/common/utils/strings.ts'
import Uploader from '@/components/uploader/Uploader.vue'
import AFormPanel, {
  type AFormPanelInstance,
  buildFormPanelProps,
} from '@/components/a-form-panel/AFormPanel.tsx'

const props = withDefaults(defineProps<{
  research?: () => void
}>(), {
  research: () => {
  },
})
const formPanelIns = useTemplateRef<AFormPanelInstance>('formPanel')
const uploaderIns = useTemplateRef<InstanceType<typeof Uploader>>('uploader')

const status = ref<'add' | 'modify'>('add')

const formPanelProps = buildFormPanelProps<UserTypes.SearchUserResult>({
  detailsLoader(id?: string) {
    if (Strings.isBlank(id)) {
      status.value = 'add'
      return Promise.resolve({
        account: {
          username: '',
          secret: '',
        },
      } as UserTypes.SearchUserResult)
    } else {
      status.value = 'modify'
      return UserApi.detail(id!)
        .then(res => {
          if (res.data.avatar != null) uploaderIns.value?.setDefaultFiles([ res.data.avatar ])
          return {
            ...res.data, account: {},
          }
        })
    }
  },
  defaultFormData: {
    account: {
      username: '',
      secret: '',
    },
  },
  doSubmit(data) {
    if (status.value === 'add') {
      const {nickname, avatar, email, phone, account} = data
      return UserApi.add({nickname, avatar, email, phone, account})
        .then(props.research)
    } else {
      const {id, nickname, avatar, email, phone} = data
      return UserApi.modify({id, nickname, avatar, email, phone})
        .then(props.research)
    }
  },
})
watchEffect(() => {
  formPanelProps.title = status.value === 'add' ? '新建用户' : '修改用户'
})

defineExpose({
  open(data?: UserTypes.SearchUserResult) {
    formPanelIns.value?.open(data?.id)
  },
})
</script>
<style lang="stylus" scoped>
.form-items {
  grid-template-columns: 1fr 1fr;
  grid-template-areas: "picture ." \
  "picture .";

  :deep(.el-form-item) {
    &:first-child {
      align-items: start;
      grid-area: picture
      max-width 300px

      .el-form-item__content {
        justify-content center
      }

      .el-form-item__error {
        width: 100%;
        text-align: center;
      }
    }
  }
}
</style>
