<template>
  <!-- 新增编辑 -->
  <common-modal
    :width="524"
    :maskClosable="false"
    :visible="props.visible"
    :confirm-loading="loading"
    :forceRender="true"
    :maxable="true"
    title="新建管理权限"
    :body-style="{ padding: '16px 24px' }"
    @update:visible="updateVisible"
    wrapClassName="project-modal"
  >
    <PermissionForm v-model:form="form" ref="newFormRef" :designId="props.designId" />

    <template #footer>
      <a-space>
        <a-button class="border-radius grey" @click="updateVisible(false)" type="link">取消</a-button>
        <a-button class="border-radius" type="primary" @click="save">确定</a-button>
      </a-space>
    </template>
  </common-modal>
</template>

<script setup name="PermissionAddEdit">
import { ref, onMounted, defineAsyncComponent } from 'vue';
import { message } from 'ant-design-vue';
import { PermissionApi } from '../api/PermissionApi';

const PermissionForm = defineAsyncComponent(() => import('./permission-form.vue'));

const props = defineProps({
  visible: Boolean,
  designId: String
});

const emits = defineEmits(['update:visible', 'done']);
// 弹框加载
const loading = ref(false);
// 表单数据
const form = ref({
  authTypeList: [],
  managerUserIdList: [],
  designId: props.designId
});
// ref
const newFormRef = ref(null);

onMounted(async () => {});

// 更改弹框状态
const updateVisible = value => {
  emits('update:visible', value);
};

// 点击保存
const save = async () => {
  newFormRef.value.$refs.formRef.validate().then(async valid => {
    if (valid) {
      // 修改加载框为正在加载
      loading.value = true;
      PermissionApi.updateManagerList(form.value)
        .then(async result => {
          loading.value = false;
          message.success(result.message);
          updateVisible(false);
          emits('done', form.value);
        })
        .catch(() => {
          loading.value = false;
        });
    }
  });
};
</script>

<style scoped lang="less"></style>
