<template>
  <div class="flex items-center justify-center">
    <form @submit.prevent="onSubmit" class="w-full">
      <div class="flex flex-row items-center justify-center mt-2">
        <label for="price" class="text-xs font-medium text-gray-900">昵称：</label>
        <div class="h-full flex items-center justify-center mt-2"></div>
        <div class="relative rounded-md shadow-sm ml-2">
          <input
            v-model="formData.nickName"
            type="text"
            name="nickName"
            id="nickName"
            class="h-8 w-64 rounded-md border-0 py-1.5 px-1.5 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-xs" />
        </div>
      </div>
      <div class="flex flex-row items-center justify-center mt-2">
        <label for="price" class="text-xs font-medium text-gray-900">备注：</label>
        <div class="h-full flex items-center justify-center mt-2"></div>
        <div class="relative rounded-md shadow-sm ml-2">
          <textarea
            v-model="formData.remark"
            name="remark"
            id="remark"
            :rows="4"
            class="w-64 rounded-md border-0 py-1.5 px-1.5 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-xs" />
        </div>
      </div>
      <div class="flex items-center justify-center">
        <button
          type="submit"
          class="w-32 mt-2 rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">
          保存
        </button>
      </div>
    </form>
  </div>
</template>

<script setup lang="ts">
import { ref, type PropType } from 'vue'
import { createMemberRemark } from '@/api/remark'
import type { UserInfo } from '@/types/global'
import { ElMessage, ElNotification } from 'element-plus'

const props = defineProps({
  userInfo: {
    type: Object as PropType<UserInfo>,
    require: true,
  },
})

const emits = defineEmits(['onSuccess'])

const formData = ref({
  memberId: props.userInfo?.id,
  nickName: props.userInfo?.memberRemark?.nickName,
  remark: props.userInfo?.memberRemark?.remark,
})

const onSubmit = async () => {
  console.log('mark submit', formData.value)
  const res = await createMemberRemark(formData.value)
  emits('onSuccess', formData.value)
}
</script>
