<template>
  <!-- 新增编辑 -->
  <a-modal
    :width="formWidth"
    :maskClosable="false"
    :visible="props.visible"
    :confirm-loading="loading"
    :forceRender="true"
    style="top: 40px"
    :title="modalTitle"
    :body-style="{ paddingBottom: '8px', paddingTop: '8px', height: '600px', overflowY: 'auto' }"
    @update:visible="updateVisible"
    @ok="save"
    wrapClassName="guns-modal-movable"
    @close="updateVisible(false)"
  >
    <!-- 应用设计表单 -->
    <MoreFormViewer v-model:form="form.formDetail" :isEdit="isEdit" :formDesignConfigList="formDesignConfigList" ref="moreFormViewerRef" />
  </a-modal>
</template>

<script setup name="PreviewAddEdit">
import { ref, onMounted } from 'vue';
import { message } from 'ant-design-vue';
import { PreviewApi } from '../api/PreviewApi';
import { useModalMovable } from '@/utils/common/modal-drag';
import MoreFormViewer from '../../../form/preview/more-form-viewer.vue';

const props = defineProps({
  visible: Boolean,
  //当前行数据
  data: Object,
  //业务id
  businessId: String,
  // 业务配置详情
  tableConfig: Object
});

const emits = defineEmits(['update:visible', 'done']);
// 弹框加载
const loading = ref(false);
// 是否是编辑状态
const isUpdate = ref(false);
// 表单数据
const form = ref({
  formDetail: {}
});
// ref
const moreFormViewerRef = ref(null);

// 标题
const modalTitle = ref('标题');
// 是否是编辑
const isEdit = ref(false);

// 表单配置列表
const formDesignConfigList = ref([]);
// 表单宽度
const formWidth = ref(800);

onMounted(() => {
  useModalMovable();
  if (props?.tableConfig?.formDesignConfigList) {
    formWidth.value = props.tableConfig?.formDesignConfigList[0].formConfig?.formWidth ?? 800;
    formDesignConfigList.value = JSON.parse(JSON.stringify(props?.tableConfig.formDesignConfigList));
    // 设置表单的值
    formDesignConfigList.value.forEach(item => {
      form.value.formDetail[item.formDefinitionId] = {};
    });
    if (props.data) {
      modalTitle.value = '编辑' + props.tableConfig?.businessName;
      isUpdate.value = true;
      getDetail();
    } else {
      modalTitle.value = '新增' + props.tableConfig?.businessName;
      isUpdate.value = false;
    }
  }
});

// 获取详情
const getDetail = async () => {
  const res = await PreviewApi.getDetail({ businessId: props.businessId, primaryKeyId: props.data.id });
  form.value = Object.assign({}, res.data);
  isEdit.value = true;
};

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

// 点击保存
const save = async () => {
  moreFormViewerRef.value.validate().then(res => {
    if (res) {
      // 修改加载框为正在加载
      loading.value = true;
      form.value.businessId = props.businessId;
      let result;
      if (isUpdate.value) {
        result = PreviewApi.update(form.value);
      } else {
        result = PreviewApi.save(form.value);
      }
      result
        .then(async result => {
          // 移除加载框
          loading.value = false;
          // 提示添加成功
          message.success(result.message);
          // 关闭弹框，通过控制visible的值，传递给父组件
          updateVisible(false);
          // 触发父组件done事件
          emits('done');
        })
        .catch(() => {
          loading.value = false;
        });
    }
  });
};
</script>

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