<template>
  <n-modal
    v-model:show="visiableUserSetting"
    style="width: 500px"
    preset="dialog"
    :showIcon="false"
    title="个人设置"
  >
    <!-- model={forms} ref={formsRef} label-placement="left" label-width="100" -->
    <n-form
      :model="forms"
      ref="formsRef"
      label-placement="left"
      label-width="auto"
      style="padding-top: 12px"
    >
      <n-form-item
        label="用户头像"
        path="avatar"
        :rule="[
          {
            required: true,
            message: '请选择用户头像'
          }
        ]"
      >
        <editor cropper v-model:fileList="forms.avatar" />
      </n-form-item>
      <n-form-item
        label="姓名"
        path="nickname"
        :rule="[
          {
            required: true,
            message: '请选择输入用户姓名'
          }
        ]"
      >
        <n-input v-model:value="forms.nickname" placeholder="请选择输入用户姓名" />
      </n-form-item>
      <n-form-item
        label="性别"
        path="gender"
        :rule="[
          {
            required: true,
            message: '请选择性别'
          }
        ]"
      >
        <n-radio-group v-model:value="forms.gender">
          <n-radio :value="1">男</n-radio>
          <n-radio :value="0">女</n-radio>
        </n-radio-group>
      </n-form-item>
      <n-form-item
        label="手机号"
        path="phone"
        :rule="[
          {
            required: true,
            message: '请输入手机号'
          }
        ]"
      >
        <n-input v-model:value="forms.phone" placeholder="请输入手机号" disabled />
      </n-form-item>
      <n-space justify="end">
        <n-button type="default" @click="visiableUserSetting = false">取消</n-button>
        <n-button type="primary" :loading="btnLoading" @click="onSubmit">保存</n-button>
      </n-space>
    </n-form>
  </n-modal>
</template>

<script lang="ts">
import { defineComponent, reactive, toRefs, ref } from 'vue'
import { useMessage } from 'naive-ui'
import editor from '@/components/upload-file'
import { useUserStore } from '@/store/modules/user'
import { userUpdateInfo } from '@/api/system/user'

export default defineComponent({
  components: { editor },
  emits: ['updateInfo'],
  setup(props, { emit }) {
    const userStore = useUserStore()
    const message = useMessage()
    const formsRef = ref()

    const state = reactive({
      visiableUserSetting: false,
      btnLoading: false,
      forms: {
        avatar: null,
        nickname: null,
        gender: null,
        phone: null
      } as any
    })
    const openModal = () => {
      state.visiableUserSetting = true
      const userInfo: any = userStore.getUserInfo || {}
      state.forms.avatar = userInfo.avatar
      state.forms.nickname = userInfo.nickname
      state.forms.gender = userInfo.gender
      state.forms.phone = userInfo.account.phone || null
    }

    const onSubmit = async () => {
      formsRef.value.validate(async (error: any) => {
        if (error) return false

        try {
          state.btnLoading = true
          await userUpdateInfo({ ...state.forms })
          await userStore.GetInfo()
          message.success('保存成功')
          state.visiableUserSetting = false
          emit('updateInfo')
        } catch {}
        state.btnLoading = false
      })
    }
    return {
      message,
      ...toRefs(state),
      openModal,
      onSubmit,
      formsRef
    }
  }
})
</script>
