"use strict";
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
const vue = require("vue");
const uikitBaseComponentVue3 = require("@tencentcloud/uikit-base-component-vue3");
const room = require("tuikit-atomicx-vue3/room");
const IconButton = require("../base/IconButton.vue2.js");
const vClickOutside = require("../base/vClickOutside.js");
const _hoisted_1 = { class: "layout-container" };
const _hoisted_2 = {
  key: 0,
  class: "layout-list"
};
const _hoisted_3 = { class: "layout-block-container" };
const _hoisted_4 = { class: "layout-title" };
const _hoisted_5 = { class: "layout-block-container" };
const _hoisted_6 = { class: "right-container" };
const _hoisted_7 = { class: "layout-title" };
const _hoisted_8 = { class: "layout-block-container" };
const _hoisted_9 = { class: "top-container" };
const _hoisted_10 = { class: "layout-title" };
const _sfc_main = /* @__PURE__ */ vue.defineComponent({
  __name: "index",
  props: {
    layout: {}
  },
  emits: ["update:layout"],
  setup(__props, { emit: __emit }) {
    const { t } = uikitBaseComponentVue3.useUIKit();
    const { participantList } = room.useRoomParticipantState();
    const showLayoutList = vue.ref(false);
    const emit = __emit;
    function handleClick(changeLayout) {
      emit("update:layout", changeLayout);
    }
    function handleClickLayoutIcon() {
      var _a;
      if (((_a = participantList.value) == null ? void 0 : _a.length) < 2) {
        return;
      }
      showLayoutList.value = !showLayoutList.value;
    }
    function handleClickOutSide() {
      if (showLayoutList.value) {
        showLayoutList.value = false;
      }
    }
    return (_ctx, _cache) => {
      return vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
        vue.createVNode(IconButton.default, {
          title: vue.unref(t)("Layout.Title"),
          disabled: vue.unref(participantList).length < 2,
          layout: "horizontal",
          onClickIcon: handleClickLayoutIcon
        }, {
          default: vue.withCtx(() => [
            vue.createVNode(vue.unref(uikitBaseComponentVue3.IconLayout), { size: "20" })
          ]),
          _: 1
        }, 8, ["title", "disabled"]),
        showLayoutList.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2, [
          vue.createElementVNode("div", {
            class: vue.normalizeClass([
              "layout1",
              "layout-item",
              `${__props.layout === vue.unref(room.RoomLayoutTemplate).GridLayout ? "checked" : ""}`
            ]),
            onClick: _cache[0] || (_cache[0] = ($event) => handleClick(vue.unref(room.RoomLayoutTemplate).GridLayout))
          }, [
            vue.createElementVNode("div", _hoisted_3, [
              (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(new Array(9).fill(""), (item, index) => {
                return vue.openBlock(), vue.createElementBlock("div", {
                  key: index,
                  class: "layout-block"
                });
              }), 128))
            ]),
            vue.createElementVNode("span", _hoisted_4, vue.toDisplayString(vue.unref(t)("Layout.Grid")), 1)
          ], 2),
          vue.createElementVNode("div", {
            class: vue.normalizeClass([
              "layout2",
              "layout-item",
              `${__props.layout === vue.unref(room.RoomLayoutTemplate).SidebarLayout ? "checked" : ""}`
            ]),
            onClick: _cache[1] || (_cache[1] = ($event) => handleClick(vue.unref(room.RoomLayoutTemplate).SidebarLayout))
          }, [
            vue.createElementVNode("div", _hoisted_5, [
              _cache[3] || (_cache[3] = vue.createElementVNode("div", { class: "left-container" }, null, -1)),
              vue.createElementVNode("div", _hoisted_6, [
                (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(new Array(3).fill(""), (item, index) => {
                  return vue.openBlock(), vue.createElementBlock("div", {
                    key: index,
                    class: "layout-block"
                  });
                }), 128))
              ])
            ]),
            vue.createElementVNode("span", _hoisted_7, vue.toDisplayString(vue.unref(t)("Layout.GalleryRight")), 1)
          ], 2),
          vue.createElementVNode("div", {
            class: vue.normalizeClass([
              "layout3",
              "layout-item",
              `${__props.layout === vue.unref(room.RoomLayoutTemplate).CinemaLayout ? "checked" : ""}`
            ]),
            onClick: _cache[2] || (_cache[2] = ($event) => handleClick(vue.unref(room.RoomLayoutTemplate).CinemaLayout))
          }, [
            vue.createElementVNode("div", _hoisted_8, [
              vue.createElementVNode("div", _hoisted_9, [
                (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(new Array(3).fill(""), (item, index) => {
                  return vue.openBlock(), vue.createElementBlock("div", {
                    key: index,
                    class: "layout-block"
                  });
                }), 128))
              ]),
              _cache[4] || (_cache[4] = vue.createElementVNode("div", { class: "bottom-container" }, null, -1))
            ]),
            vue.createElementVNode("span", _hoisted_10, vue.toDisplayString(vue.unref(t)("Layout.GalleryTop")), 1)
          ], 2)
        ])) : vue.createCommentVNode("", true)
      ])), [
        [vue.unref(vClickOutside.default), handleClickOutSide]
      ]);
    };
  }
});
exports.default = _sfc_main;
