<template>
  <LjDialog
    ref="LjSelectorRef"
    class="is-selector lj-selector"
    v-bind="{
      ...drawerDefineProp
    }"
    :modal="false"
    :style="{ height: '75%' }"
  >
    <template #header>
      <div class="flx-1">
        <span class="text-h5-b">{{ props.title }}</span>
      </div>
    </template>
    <div class="flx-col h-full">
      <LjHeaderMenu :update="dialogVisible" :data="initParams" :action="btnGroup" />
      <LjFoldLayoutDouble v-bind="showLayout" class="flx-1 overflow-hidden">
        <template #secondMain>
          <div class="flx h-full">
            <div class="flx-col w-full">
              <Editor :type="editorType" ref="editorRef" />
            </div>
          </div>
        </template>
      </LjFoldLayoutDouble>
    </div>
  </LjDialog>
</template>
<script setup lang="ts">
import { ref, computed, onMounted, onBeforeUnmount, nextTick, watch } from "vue";
import LjDialog from "@/components/LjDialog/index.vue";
import LjFoldLayoutDouble from "@/components/LjFoldLayoutDouble/index.vue";
import Editor from "./editor.vue";
import { useAuthButtons } from "@/hooks/useAuthButtons";
import { useI18n } from "vue-i18n";

const { t } = useI18n();
const { buttonDefault } = useAuthButtons(t);

const props = defineProps({
  title: {
    type: String,
    default: "编辑公告"
  }
});

const emit = defineEmits(["confirm"]);
const LjSelectorRef = ref();
const dialogVisible = ref(false);
const editorRef = ref();
const editorType = ref(0);
/*
 * @description 抽屉默认属性
 */
const drawerDefineProp = {
  draggable: true,
  overflow: true,
  width: "40%",
  modalClass: "lj-file-dialog"
};
const showLayout = ref<any>(false);
const initParams = ref<any>();
const btnGroup = ref<any>([
  buttonDefault({
    label: "确认",
    clickFunc: item => {
      handleConfirm();
    }
  }),
  buttonDefault({
    label: "取消",
    clickFunc: item => {
      hide();
    }
  })
]);

const handleConfirm = async () => {
  emit("confirm", editorType.value, editorRef.value.editorForm);
  hide();
};

/**
 * @description 展示组件
 * @param params 入参
 * @param activeName 多选时 活动面板入参
 */
const show = (type: number, refresh?: boolean) => {
  editorType.value = type;
  LjSelectorRef.value.show(refresh);
  nextTick(() => {
    dialogVisible.value = true;
  });
};

/**
 * @description cancel 取消
 */
const hide = () => {
  // 关闭弹窗
  LjSelectorRef.value.hide();
  dialogVisible.value = false;
};

defineExpose({
  show,
  hide
});
</script>

<style lang="scss">
.lj-selector {
  padding: 0;
  .el-tree {
    background: unset;
  }
}
.ljselector-aside-collapse {
  height: 100%;
  display: flex;
  flex-direction: column;
  // background-color: $color-gray-2;

  .el-collapse-item {
    display: flex;
    flex-direction: column;
    overflow: auto;
    height: auto;

    &.is-active {
      flex: 1;
    }
    &:not(.is-active) {
      flex-shrink: 0;
    }
    .el-collapse-item__header {
      flex-shrink: 0;
    }
    .el-collapse-item__wrap {
      flex: 1;
      overflow: auto;
      background-color: $color-gray-2;
      padding: 8px 4px;

      .lj-infor-item {
        background-color: $color-gray-1;
      }
    }
  }
}
</style>
