<template>
  <div class="body">
    <div
      class="searchBox items-center flex justify-between px-5"
      v-show="!previewWindow"
    >
      <div
        style="font-size: 12px; font-weight: 400; color: #353535"
        class="flex items-center"
      >
        <span @click="handleClickResetSearchValue" class="cursor-pointer"
          >所有模板</span
        >
        <div v-show="type === 'sys' && searchOfSys !== ''">
          <span>></span> <span style="color: #959595">搜索结果</span>
        </div>
        <div v-show="type === 'private' && searchOfPrivate !== ''">
          <span>></span> <span style="color: #959595">搜索结果</span>
        </div>
      </div>
      <div class="ipt flex items-center px-3">
        <Icon
          iconName="iconzuzhigoujia-chengyuanguanli-chaxunchengyuan"
          color="#1c2323"
          size="14px"
        ></Icon>
        <input
          v-show="type === 'sys'"
          type="text"
          v-model="searchOfSys"
          class="flex-grow outline-none ml-1"
          placeholder="搜索模板"
        />
        <input
          v-show="type === 'private'"
          type="text"
          v-model="searchOfPrivate"
          class="flex-grow outline-none ml-1"
          placeholder="搜索模板"
        />
      </div>
    </div>
    <div class="overflow-hidden theFolderMenu mb-4" v-show="!previewWindow">
      <ScrollBar max-height="168px">
        <Menu
          v-if="type === 'sys' && searchOfSys === ''"
          :ellipsis="false"
          v-model="activeSysFolderId"
          @update:modelValue="
            (id) =>
              (listOfSysDetails = SystemList.find(
                (i) => i.folder_id.toString() === id
              ).detail)
          "
          :menuList="
            SystemList.map((i) => ({
              label: i.folder_name,
              value: i.folder_id.toString(),
            }))
          "
        ></Menu>
        <Menu
          v-else-if="type === 'private' && searchOfPrivate === ''"
          :max-str-num="5"
          :ellipsis="false"
          v-model="activePrivateFolderId"
          @update:modelValue="getpersonalList(Number($event))"
          :menuList="
            PersonalClassification.map((i) => ({
              label: i.name,
              value: i?.id.toString(),
            }))
          "
        ></Menu>
      </ScrollBar>
    </div>
    <div class="body_center" v-show="!previewWindow">
      <ScrollBar height="400px">
        <div class="flex flex-wrap">
          <div
            class="absolute left-1/2 top-1/3 -translate-x-1/2"
            style="
              font-size: 16px;
              font-weight: 500;
              color: #ababab;
              line-height: 22px;
            "
            v-if="
              type === 'sys' &&
              searchOfSys !== '' &&
              listOfSysDetails.length === 0
            "
          >
            没有找到匹配结果，尝试其他关键词搜索
          </div>
          <div
            class="absolute left-1/2 top-1/3 -translate-x-1/2"
            style="
              font-size: 16px;
              font-weight: 500;
              color: #ababab;
              line-height: 22px;
            "
            v-if="
              type === 'private' &&
              searchOfPrivate !== '' &&
              listOfPrivateDetails.length === 0
            "
          >
            没有找到匹配结果，尝试其他关键词搜索
          </div>
          <div
            class="templateBox relative"
            :class="{
              'mr-[25px]': (index + 1) % 4 !== 0,
            }"
            v-for="(item, index) in type === 'sys'
              ? listOfSysDetails
              : listOfPrivateDetails"
            :key="item.id"
          >
            <img :src="templateSvg" class="absolute right-0 z-0" alt="" />
            <div class="name" style="margin-top: 17px; margin-left: 25px">
              {{ item.name }}
            </div>
            <div class="time" style="margin-top: 1px; margin-left: 25px">
              {{ formatTime(item.create_time, "YYYY.MM.DD") }}
            </div>
            <div
              class="flex justify-end btns relative z-10"
              style="margin-top: 20px"
            >
              <div
                @click="preview(item?.id)"
                class="preview cursor-pointer flex items-center justify-center"
                style="font-size: 12px; font-weight: 500; color: #353535"
              >
                预览
              </div>
              <div
                @click="determine(item?.id)"
                class="use cursor-pointer flex items-center justify-center"
                style="
                  margin-right: 14px;
                  margin-left: 7px;
                  font-size: 12px;
                  font-weight: 500;
                  color: #ffffff;
                "
              >
                使用
              </div>
            </div>
          </div>
        </div>
      </ScrollBar>
    </div>
    <preview
      v-if="previewWindow"
      ref="preview"
      :systemTemplateId="systemTemplateId"
      :isActive="isActive"
      @returnTemplate="returnTemplate"
    ></preview>
  </div>
</template>
<script lang="ts">
import { GO_URLS, formatTime, syScrollBar as ScrollBar } from "cqk-sy-ui";
import preview from "./preview.vue"; //类目组件
import { defineComponent } from "vue";
import Menu from "@/components/Menu/syMenu.vue";

import { ElMessage } from "element-plus";
import Icon from "@/components/Icon/index.vue";
import templateSvg from "./templateCover.svg";
import { $ajax } from "@/service";

export default defineComponent({
  components: {
    preview,
    Icon,
    Menu,
    ScrollBar,
  },
  emits: ["update:preview", "determine"],
  props: {
    proofType: Number,
    type: String,
    setPreviewWindow: Function,
  },
  data() {
    return {
      templateSvg,
      isActive: false,
      search: "",
      searchOfSys: "",
      searchOfPrivate: "",
      SystemList: [] as any[], // 展示用数据
      PersonalClassification: [] as any[],
      listOfSysDetails: [] as any[],
      listOfPrivateDetails: [] as any[],
      previewWindow: false as boolean, //预览窗口
      activeSysFolderId: "",
      activePrivateFolderId: "",
      systemTemplateId: 0,
    };
  },
  async created() {
    await this.getSystemTemplateList();
    this.listOfSysDetails = this.SystemList[0].detail;
    this.activeSysFolderId = this.SystemList[0].folder_id.toString();
    await this.getMyTemplateList();
    this.activePrivateFolderId = this.PersonalClassification[0]?.id.toString();
    this.getpersonalList(Number(this.activePrivateFolderId));
  },
  watch: {
    previewWindow(newV) {
      this.$emit("update:preview", newV);
    },
    searchOfSys(newV) {
      const list = [] as any[];
      this.SystemList.forEach((sysFolder) => {
        (sysFolder.detail || []).forEach((temp: { name: string | any[] }) => {
          if (temp.name.includes(newV)) {
            list.push(temp);
          }
        });
      });
      this.listOfSysDetails = list;
    },
    async searchOfPrivate(newV) {
      if (newV !== "") {
        const res = await $ajax({
          type: "post",
          url: GO_URLS.searchCustomize,
          params: {
            key: newV,
          },
        });
        this.listOfPrivateDetails = res?.data.results || [];
      } else {
        this.getpersonalList(Number(this.activePrivateFolderId));
      }
    },
  },
  methods: {
    handleClickResetSearchValue() {
      if (this.type === "sys") {
        this.searchOfSys = "";
      } else {
        this.searchOfPrivate = "";
      }
    },
    formatTime,
    async getpersonalList(id: number) {
      const res = await $ajax({
        type: "post",
        url: GO_URLS.personalList,
        params: {
          id: [id],
        },
      });
      if (res) {
        if (res.data.results[0].detail) {
          this.listOfPrivateDetails = res.data.results[0].detail;
        } else {
          this.listOfPrivateDetails = [];
        }
      }
    },
    determine(systemTemplateId?: number | undefined) {
      if (systemTemplateId) {
        this.systemTemplateId = systemTemplateId;
      }
      if (this.systemTemplateId === 0) {
        ElMessage({
          message: "请先选中模板，再进行该操作",
          type: "warning",
        });
        return;
      }
      // 关闭预览窗口
      if (this.previewWindow) {
        this.previewWindow = false;
        this.setPreviewWindow!(false);
      }
      this.$emit("determine", this.systemTemplateId);
    },
    // 预览结束
    returnTemplate(val: string) {
      if (val === "Use") {
        this.determine();
      } else {
        this.previewWindow = false;
        this.setPreviewWindow!(false);
      }
    },
    // 预览
    preview(systemTemplateId?: number) {
      if (systemTemplateId) {
        this.systemTemplateId = systemTemplateId;
      }
      if (this.systemTemplateId === 0) {
        ElMessage({
          message: "请先选中模板，再进行预览",
          type: "warning",
        });
        return;
      }
      this.previewWindow = true;
      this.setPreviewWindow!(true);
    },
    // 获取系统模板列表
    async getSystemTemplateList() {
      const res = await $ajax({
        type: "post",
        url: GO_URLS.systemList,
      });
      if (res) {
        if (!res.data.results) {
          this.SystemList = [];
        } else {
          this.SystemList = res.data.results;
        }
      }
    },
    // 获取我的模板列表
    async getFolderList() {
      const res = await $ajax({
        type: "post",
        url: GO_URLS.folderList,
        params: {
          page: 1,
          page_size: 100,
          template_type: 1,
        },
      });
      if (res) {
        return res.data.results;
      }
    },
    // 个人模板>分类>获取模板列表
    async getMyTemplateList() {
      const res = await this.getFolderList();
      if (!res) return false;
      this.PersonalClassification = res;
    },
  },
});
</script>
<style lang="scss">
.v-enter-active,
.v-leave-active {
  transition: opacity 0.2s ease;
}

.v-enter-from,
.v-leave-to {
  opacity: 0;
}
.theFolderMenu {
  .syMenu {
    flex-wrap: wrap;
    width: 100%;
  }
}
</style>
<style lang="scss" scoped>
.system-list {
  list-style: none;
  overflow: hidden;
  transition: 0.3s;
  width: 132px;
  max-height: 300px;
  overflow-y: auto;
  margin: 0;
  padding: 0;
  margin-left: 14px;
  padding-top: 10px;
  li {
    padding-top: 10px;
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(53, 53, 53, 1);
    cursor: pointer;
    color: #353535;
    text-align: left;

    i {
      font-size: 12px;
      padding-left: 10px;
      padding-right: 6px;
    }
    span {
      width: 84px;
      overflow: hidden;
      display: inline-block;
      white-space: nowrap;
      vertical-align: bottom;
      text-overflow: ellipsis;
    }
    .name--check {
      color: var(--sy-blue) !important;
    }
  }
}
.template-popup__style {
  border-radius: 10px !important;
  overflow: hidden;
  :deep(.dialog_content) {
    background: none;
    max-height: none;
  }
}
.body {
  .searchBox {
    height: 46px;
    background: #fafafc;
    border-radius: 8px;
    border: 1px solid #f1f2f5;
    .ipt {
      width: 228px;
      height: 32px;
      background: #ffffff;
      border-radius: var(--sy-border-radius);
      border: 1px solid #dbdfe6;
    }
  }
  h1 {
    font-size: 22px;
    font-weight: 500;
    line-height: 68px;
    margin: 0;
    text-align: center;
    color: rgba(53, 53, 53, 1);
    border-bottom: 1px solid #e9e9e9;
  }
  .body_add {
    position: absolute;
    cursor: pointer;
    top: 26px;
    color: var(--sy-blue);
    right: 26px;
    font-size: 14px;
    font-weight: 500;
    color: rgba(74, 144, 226, 1);
    i {
      font-size: 12px;
      margin-right: 10px;
      vertical-align: middle;
    }
  }
  .body_center {
    .templateBox {
      width: 198px;
      height: 112px;
      background: #f3f7fb;
      border-radius: 20px;
      margin-bottom: 28px;

      .name {
        font-size: 14px;
        font-weight: 600;
        color: #353535;
      }
      .time {
        font-size: 12px;
        font-weight: 400;
        color: var(--sy-gray);
      }
      .btns {
        display: none;
      }
      &:hover {
        .btns {
          display: flex;
        }
      }
      .preview {
        width: 52px;
        height: 26px;
        background: #ffffff;
        border-radius: 4px;
      }
      .use {
        width: 52px;
        height: 26px;
        background: #3370fe;
        border-radius: 4px;
      }
    }
    .left {
      width: 160px;
      height: 100%;
      text-align: center;
      float: left;
      .classification {
        width: 132px;
        cursor: pointer;
        height: 28px;
        background: rgba(245, 247, 255, 1);
        border-radius: 4px;
        line-height: 28px;
        text-align: center;
        margin-top: 10px;
        display: inline-block;
        font-size: 12px;
        font-weight: 400;
        position: relative;
        color: rgba(53, 53, 53, 1);
      }
      .up {
        position: absolute;
        right: 12px;
        top: -1px;
        transition: transform 0.3s ease-in-out;
        transform: rotate(90deg);
        i {
          font-size: 12px;
        }
      }
      .up--down {
        transform: rotate(-90deg);
      }
      .span--check {
        background: #5275fc;
        color: white;
      }
    }
    .right {
      width: 771px;
      height: 100%;
      ul {
        margin: 0;
        padding: 0;
        height: 405px;
        overflow: hidden;
        margin-top: 9px;
        li {
          list-style: none;
          width: 238px;
          float: left;
          position: relative;
          cursor: pointer;
          height: 121px;
          margin-bottom: 14px;
          margin-right: 8px;
          margin-left: 8px;
          border-radius: 5px;
          border: 1px solid #f5f7ff;
          .iconbox {
            position: absolute;
            top: 8px;
            right: 8px;
            color: white;
            .iconxingzhuang2 {
              background: white;
              border-radius: 50%;
              color: #00e7c0;
            }
          }
          .iconbox_my {
            color: #cacadd;
          }
          img {
            width: 100%;
            height: 100%;
            border-radius: 5px;
          }

          span {
            position: absolute;
            left: 22px;
            top: 14px;
            font-size: 16px;
            font-weight: 600;
            color: rgba(255, 255, 255, 1);
          }
          .my {
            color: rgba(53, 53, 53, 1);
          }
        }
      }
    }
  }
  .body_footer {
    height: 100px;
    line-height: 100px;
    text-align: center;
    .btn {
      display: inline-block;
      width: 120px;
      height: 40px;
      line-height: 40px;
      font-size: 14px;
      font-weight: 400;
      cursor: pointer;
      border-radius: 4px;
    }
    .btn--preview {
      background: rgba(236, 236, 236, 1);
      color: rgba(92, 100, 118, 1);
      margin-right: 10px;
    }
    .btn--determine {
      margin-left: 10px;
      color: white;
      background: rgba(63, 121, 254, 1);
    }
  }
}
</style>
