"use strict";
var __assign = (this && this.__assign) || function () {
    __assign = Object.assign || function(t) {
        for (var s, i = 1, n = arguments.length; i < n; i++) {
            s = arguments[i];
            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
                t[p] = s[p];
        }
        return t;
    };
    return __assign.apply(this, arguments);
};
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.Viewport = void 0;
var hooks_1 = require("../hooks");
var widgets_1 = require("../widgets");
var shared_1 = require("@designable/shared");
var classnames_1 = __importDefault(require("classnames"));
var vue_demi_1 = require("vue-demi");
var shared_2 = require("../shared");
exports.Viewport = (0, vue_demi_1.defineComponent)({
    name: 'DnViewport',
    props: {
        placeholder: {},
        dragTipsDirection: {},
    },
    setup: function (props, _a) {
        var slots = _a.slots, attrs = _a.attrs;
        var loaded = (0, vue_demi_1.ref)(false);
        var prefixRef = (0, hooks_1.usePrefix)('viewport');
        var viewportHookRef = (0, hooks_1.useViewport)();
        var refInstance = (0, vue_demi_1.ref)();
        // 该组件内部缓存的ref
        var viewportRef = (0, vue_demi_1.ref)();
        var isFrameRef = (0, vue_demi_1.ref)(false);
        (0, vue_demi_1.onMounted)(function () {
            var _a;
            var ref = refInstance;
            var frameElement = (_a = ref.value) === null || _a === void 0 ? void 0 : _a.querySelector('iframe');
            if (!viewportHookRef.value)
                return;
            if (viewportRef.value && viewportRef.value !== viewportHookRef.value) {
                viewportRef.value.onUnmount();
            }
            if (frameElement) {
                frameElement.addEventListener('load', function () {
                    viewportHookRef.value.onMount(frameElement, frameElement.contentWindow);
                    (0, shared_1.requestIdle)(function () {
                        isFrameRef.value = true;
                        loaded.value = true;
                    });
                });
            }
            else {
                viewportHookRef.value.onMount(ref.value, window);
                (0, shared_1.requestIdle)(function () {
                    isFrameRef.value = false;
                    loaded.value = true;
                });
            }
            viewportRef.value = viewportHookRef.value;
        });
        (0, vue_demi_1.onBeforeUnmount)(function () {
            viewportHookRef.value.onUnmount();
        });
        var style = (0, shared_2.useStyle)();
        return function () {
            var _a;
            return (<div ref={refInstance} class={(0, classnames_1.default)(prefixRef.value)} style={__assign({ opacity: !loaded ? 0 : 1, overflow: isFrameRef.value ? 'hidden' : 'overlay' }, style)}>
          {(_a = slots.default) === null || _a === void 0 ? void 0 : _a.call(slots)}
          <widgets_1.AuxToolWidget />
          <widgets_1.EmptyWidget {...{ dragTipsDirection: props.dragTipsDirection }}>
            {props.placeholder}
          </widgets_1.EmptyWidget>
        </div>);
        };
    },
});
//# sourceMappingURL=Viewport.jsx.map