<template>
  <a-modal
    v-model:visible="visible"
    :title="`${editMember.teamId ? '修改' : '新增'}项目成员`"
    width="480px"
    :after-close="onCancel"
    @ok="saveHandler"
  >
    <template #footer>
      <a-button class="action-bottom" size="middle" @click="visible = false">
        取消
      </a-button>
      <a-button
        class="action-bottom"
        type="primary"
        size="middle"
        @click="saveHandler"
      >
        保存
      </a-button>
    </template>

    <a-form
      ref="fromRef"
      :model="editMember"
      class="form"
      label-align="right"
      :label-col="{ span: 5 }"
    >
      <a-form-item
        name="userName"
        label="账号"
        :rules="[{ required: true, message: '请输入用户账号' }]"
      >
        <a-input
          v-model:value="editMember.userName"
          :disabled="!!editMember.teamId"
          placeholder="请输入用户账号"
        />
      </a-form-item>
      <a-form-item
        name="remark"
        label="备注"
        :rules="[{ required: true, message: '请输入备注' }]"
      >
        <a-input v-model:value="editMember.remark" placeholder="请输入备注" />
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script lang="ts" setup>
import { ref, defineProps, toRaw } from 'vue'

import type { Member } from '@/api'
import type { FormInstance } from 'ant-design-vue'

export type EditMember = PartialPart<Member, 'teamId'>

defineOptions<{ name: 'edit-member' }>()

const props = defineProps<{
  member?: EditMember
  onSave: (data: EditMember) => void
  onCancel: () => void
}>()

const editMember = ref<EditMember>(
  props.member ? { ...props.member } : { userName: '', remark: '' }
)
const fromRef = ref<FormInstance>()
const visible = ref(true)

const saveHandler = async () => {
  await fromRef.value?.validate()
  await props.onSave(toRaw(editMember.value))
  visible.value = false
}
</script>

<style lang="scss" scoped>
.footer {
  display: flex;
  justify-content: space-between;
  align-items: center;

  p {
    margin-bottom: 0;
    color: #646566;
    font-size: 14px;
  }
}
</style>
