<template>
  <a-modal
    :maskClosable="false"
    :visible="visible"
    :forceRender="true"
    :title="props.record.itemLabelName"
    :body-style="{ paddingBottom: '20px', maxHeight: '450px', overflowY: 'auto' }"
    @update:visible="updateVisible"
    @close="updateVisible(false)"
    footer=""
  >
    <p>
      {{ props.record?.formItemDialog?.content || '暂无内容' }}
    </p>
  </a-modal>
</template>

<script setup name="FormModalPrompt">
import { watch, ref } from 'vue';

const props = defineProps({
  record: {
    type: Object,
    default: {}
  },
  //是否禁用
  disabled: {
    type: Boolean,
    default: false
  },
  // 是否只读
  readonly: {
    type: Boolean,
    default: false
  }
});

// 是否显示弹框
const visible = ref(false);

watch(
  () => props.record?.formItemDialog?.dialogHiddenFlag,
  val => {
    if (val == false) {
      if (props.readonly || props.disabled) return;
      visible.value = true;
    } else {
      visible.value = false;
    }
  },
  { deep: true, immediate: true }
);

// 关闭状态
const updateVisible = value => {
  visible.value = value;
  props.record.formItemDialog.dialogHiddenFlag = !value;
};
</script>

<style></style>
