<template>
  <syCommonDialog
    type="element"
    :visible="visible"
    :elementDialogProps="{
      title: ' ',
    }"
    :no-padding="true"
    elementDialogSize="big"
    showMask
    @closePopup="
      $emit('update:visible', false);
      previewWindow = false;
    "
    :btn-config="btnConfig"
  >
    <template #titleLeft>
      <div class="flex items-center" v-if="!previewWindow">
        <div
          @click="templateType = 'sys'"
          :class="{
            'title-dark': templateType === 'sys',
            'title-light': templateType !== 'sys',
          }"
        >
          系统模板
        </div>
        <div
          style="margin-left: 31px"
          @click="templateType = 'private'"
          :class="{
            'title-dark': templateType !== 'sys',
            'title-light': templateType === 'sys',
          }"
        >
          我的模板
        </div>
      </div>
      <div v-else>预览</div>
    </template>
    <div v-if="visible" class="px-9 pt-4">
      <template-popup
        :type="templateType"
        v-show="visible"
        ref="templatePopup"
        @determine="determine"
        :setPreviewWindow="(v: any) => (previewWindow = v)"
        @update:preview="
          (v) => {
            previewWindow = v;
          }
        "
      ></template-popup>
    </div>
  </syCommonDialog>
</template>

<script setup lang="ts">
import { syCommonDialog } from "cqk-sy-ui";
import { ref, computed } from "vue";
import TemplatePopup from "../TemplatePopup.vue";

const props = defineProps<{
  visible: boolean;
  determine: (...args: any) => any;
}>();
const previewWindow = ref(false);
const templatePopup = ref();
const templateType = ref("sys");

const emit = defineEmits(["update:visible"]);

async function dialogConfirm(
  component: any,
  methodName: string,
  params: any = undefined
) {
  return component[methodName](params);
}

const btnConfig = computed(() => {
  if (previewWindow.value)
    return {
      type: "withBorder" as const,
      btns: [
        { name: "返回模板", type: "default" as const },
        {
          name: "使用",
          type: "primary" as const,
        },
      ],
      btnFunctions: [
        {
          name: "返回模板",
          click: () =>
            dialogConfirm(templatePopup.value, "returnTemplate", "Return"),
        },
        {
          name: "使用",
          click: () =>
            dialogConfirm(templatePopup.value, "returnTemplate", "Use"),
        },
      ],
    };
  else {
    return undefined;
  }
});
</script>

<style scoped lang="scss">
.title-light {
  font-size: 18px;
  font-weight: 600;
  color: #959595;
  line-height: 25px;
  cursor: pointer;
}
.title-dark {
  font-size: 18px;
  font-weight: 600;
  color: #353535;
  cursor: pointer;
}
</style>
