<!-- 用户编辑弹窗 -->
<template>
  <ele-modal
    width="500px"
    :visible="visible"
    :confirm-loading="loading"
    :title="`添加成员`"
    :body-style="{ paddingBottom: '8px' }"
    @update:visible="updateVisible"
    @ok="save"
  >
    <a-form
      :label-col="{ sm: 5, xs: 24 }"
      :wrapper-col="{ sm: 19, xs: 24 }"
      layout="horizontal"
    >
      <a-form-item>
        <a-input
          placeholder="请输入开发者账号"
          v-model:value="content"
          @pressEnter="save"
        />
      </a-form-item>
    </a-form>
  </ele-modal>
</template>

<script lang="ts" setup>
  import { ref, watch } from 'vue';
  import { message } from 'ant-design-vue';
  import { addTaskUser } from '@/api/oa/task-user';
  import { reloadPageTab } from '@/utils/page-tab-util';

  const props = defineProps<{
    // 弹窗是否打开
    visible: boolean;
    taskId?: number | 10;
  }>();

  const emit = defineEmits<{
    (e: 'done'): void;
    (e: 'update:visible', visible: boolean): void;
  }>();

  // 提交状态
  const loading = ref(false);
  const content = ref('');
  const role = ref(20);

  /* 更新visible */
  const updateVisible = (value: boolean) => {
    emit('update:visible', value);
  };

  /* 保存编辑 */
  const save = () => {
    console.log('sdfsdfdsfds');
    loading.value = true;
    addTaskUser({
      username: content.value,
      role: role.value,
      taskId: props.taskId
    })
      .then((msg) => {
        loading.value = false;
        message.success(msg);
        updateVisible(false);
        emit('done');
      })
      .catch((e) => {
        loading.value = false;
        message.error(e.message);
      });
  };

  watch(
    () => props.visible,
    () => {}
  );
</script>
<style lang="less">
  .tab-pane {
    min-height: 300px;
  }
</style>
