<template>
  <ReactiveLayout :element-width="223" :list="list">
    <template #element="data">
      <Template
        :template="data"
        @click="
          $router.push({
            name: 'editTemplate',
            query: {
              id: data.id,
              type: (hideOperate && 'sys') || undefined,
            },
          })
        "
      >
        <template #icon="slotProps">
          <syMoreOperate
            v-if="!hideOperate"
            :list="operateList"
            teleport
            @click-item="(e) => clickItem(e, data)"
          >
            <Transition>
              <div style="margin-right: 16px" v-if="slotProps.hover">
                <img
                  src="@/assets/img/templateEdit.svg"
                  class="cursor-pointer inline-block"
                />
              </div>
            </Transition>
          </syMoreOperate>
        </template>
      </Template>
    </template>
    <syCommonDialog
      :visible="CopyShow"
      @closePopup="CopyShow = false"
      showMask
      type="element"
      :elementDialogProps="{
        title: '创建副本',
      }"
      :btnConfig="{
        type: 'noBorder',
        btns: btns,
        btnFunctions: [
          {
            name: '取消',
            async click() {
              return true;
            },
          },
          {
            name: '确定',
            click: async () => {
              ($refs as any).copyTemplate.checkForm();
               CopyShow = false;
              syMessage.success('创建成功');
              $emit('update');
              return true;
            },
          },
        ],
      }"
    >
      <copy-template
        v-if="CopyShow"
        ref="copyTemplate"
        :TemplateID="templateID"
        :activeId="categoryId"
        @close="CopyShow = false"
      />
    </syCommonDialog>
  </ReactiveLayout>
</template>

<script setup lang="ts">
import { iTemplate } from "./components/type";
import Template from "./components/Template.vue";
import ReactiveLayout from "@/components/ReactiveLayout/index.vue";
import { GO_URLS, syMoreOperate, syMessage, syCommonDialog } from "cqk-sy-ui";
import { showTip } from "@/components/GlobalMount/api";
import { $ajax } from "@/service";
import { btns } from "@/config/btns";
import { ref } from "vue";
import CopyTemplate from "./components/CopyTemplate.vue";

const props = defineProps<{
  list: iTemplate[];
  categoryId: number;
  hideOperate: boolean;
}>();

const emit = defineEmits(["update"]);
const CopyShow = ref(false);

const templateID = ref(NaN);

const operateList = [
  {
    name: "删除",
    value: "deleteTemplate",
    click(dta: iTemplate) {
      showTip(
        "此操作将永久删除该模板, 是否继续?",
        async () => {
          const res = await $ajax({
            type: "delete",
            url: GO_URLS.deleteCustomize,
            params: {
              id: dta.id,
            },
          });
          if (res) {
            syMessage.success("删除成功");
            emit("update");
          }
          return true;
        },
        () => {
          return true;
        }
      );
    },
  },
  {
    name: "创建副本",
    value: "createCopy",
    click(dta: iTemplate) {
      CopyShow.value = true;
      templateID.value = dta.id;
    },
  },
];

const clickItem = (value: any, data: iTemplate) => {
  operateList.find((i) => i.value === value)?.click(data);
};
</script>

<style></style>
