<template>
  <!-- 新增编辑 -->
  <a-modal
    :width="900"
    :maskClosable="false"
    :visible="props.visible"
    :confirm-loading="loading"
    :forceRender="true"
    title="表单预览"
    :body-style="{ padding: '0px' }"
    @update:visible="updateVisible"
    @ok="save"
    wrapClassName="guns-modal-movable"
    class="common-modal"
    @close="updateVisible(false)"
  >
    <div class="form-range">
      <form-viewer
        v-model:formData="formData"
        v-if="config"
        ref="formViewRef"
        :config="config"
        class="form-viewr"
        :style="{ width: formWidth ? formWidth + 'px' : '100%' }"
      ></form-viewer>
    </div>
  </a-modal>
</template>

<script setup name="FormPreview">
import { ref, onMounted } from 'vue';
import FormViewer from './form-viewer.vue';
import { useModalMovable } from '@/utils/common/modal-drag';

defineOptions({
  name: 'FormPreview'
})

const props = defineProps({
  visible: Boolean,
  formConfig: Object
});

const emits = defineEmits(['update:visible', 'done']);
// 弹框加载
const loading = ref(false);

// 表单数据
const formData = ref({});
// ref
const formViewRef = ref();

// 表单配置
const config = ref(null);

// 表单宽度
const formWidth = ref(null);

onMounted(() => {
  useModalMovable();
  config.value = Object.assign({}, props.formConfig);
  formWidth.value = config.value?.config?.formWidth || null;
});

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

// 点击保存
const save = async () => {
  await formViewRef.value.validate();
  console.log(formData.value);
};
</script>

<style lang="less">
.form-range {
  width: 100%;
  height: 100%;
  overflow-x: auto;
}
.form-viewr {
  background-color: #fff;
  padding: 10px 16px;
}
</style>
