<template>
  <div class="template_manage">
    <header>
      <span
        :class="{
          'header-label_l1': true,
          'header-label_l1--check': TemplateType === 0,
        }"
        @click="SwitchTemplate(1)"
        >系统模板</span
      >
      <span
        :class="{
          'header-label_l1': true,
          'header-label_l1--check': TemplateType === 1,
        }"
        @click="SwitchTemplate(0)"
        >我的模板</span
      >
      <search-bar
        v-if="TemplateType === 1"
        v-model="key"
        @search="search"
        class="header-search"
      ></search-bar>
    </header>

    <div v-if="TemplateType === 0">
      <ul class="classification-list">
        <li
          :class="{ item: true, 'item-check': checkIndex === index }"
          v-for="(item, index) in classificationList"
          @click="switchClassification(item, index)"
          :key="index"
        >
          {{ item.folder_name }}
        </li>
      </ul>
      <div class="default-list">
        <div
          class="default-list-item"
          v-for="(item, index) in theTemplateList"
          :key="index"
          :style="bg(item)"
          @click="EnterSystemTemplate(item)"
        >
          <span class="default-list-item-name">{{ item.name }}</span>
        </div>
      </div>
    </div>
    <!-- 个人模板 -->
    <div v-if="TemplateType === 1">
      <ul class="classification-list">
        <li
          :class="{ item: true, 'item-check': checkClassification === index }"
          @click="switchPersonalClassification(item, index)"
          v-for="(item, index) in MyCategories"
          :key="index"
          :title="item.name"
        >
          {{ item.name | stringCutting(7) }}
          <i
            @click.stop="editorClassification(item, index)"
            v-if="checkClassification === index && index !== 0"
            class="iconfont iconwsmp-bianji"
          ></i>
          <ul
            class="menu"
            :class="{ menuShow: index === classIndex }"
            @click="onMenuBlur"
            @mousedown.stop
          >
            <li class="menu-item menu-item__one" @click="Rename(item)">
              重命名
            </li>
            <li
              class="menu-item menu-item__two"
              @click.stop="deleteTheClassification(item)"
            >
              删除分类
            </li>
          </ul>
        </li>
        <li class="add-the-classification" @click="addClassification">
          <i class="iconfont iconjiahao"></i>
          添加分类
        </li>
      </ul>
      <!-- 模板列表 -->
      <div class="template_list-box">
        <div class="template_list-add" @click="AddTemplate">
          <i class="iconfont iconjiahao"></i>
          <p>添加新模板</p>
        </div>
        <div
          class="template_item"
          v-for="(item, index) in personalClassificationList"
          :key="index"
          @click="EnterPersonalTemplate(item)"
        >
          <i
            class="iconfont icongengduocaozuo icon_menu"
            @click.stop="showMenu(index)"
          ></i>
          <h2 class="title">{{ item.name }}</h2>
          <ul
            class="menu"
            :class="{ menuShow: index === ActionIndex }"
            @click="onMenuBlur"
            @mousedown.stop
          >
            <li class="menu-item menu-item__one" @click.stop="dle(item, index)">
              删除
            </li>
            <li class="menu-item menu-item__two" @click.stop="copy(item)">
              创建副本
            </li>
          </ul>
        </div>
      </div>
    </div>
    <!-- 添加分类 -->
    <common-dialog
      v-if="ClassificationPopups"
      @closePopup="ClassificationPopups = false"
      showMask
    >
      <category-add
        @close="ClassificationPopups = false"
        @successCallback="successCallback"
      ></category-add>
    </common-dialog>
    <!-- 添加模板 -->
    <common-dialog
      v-if="AddTemplatePopups"
      @closePopup="AddTemplatePopups = false"
      showMask
    >
      <add-template
        :activeId="activeId"
        @close="AddTemplatePopups = false"
        @successCallback="addSuccess"
      />
    </common-dialog>
    <!-- CopyShow -->
    <common-dialog v-if="CopyShow" @closePopup="CopyShow = false" showMask>
      <copy-template
        :TemplateID="TemplateID"
        :activeId="activeId"
        @successCallback="successCallback"
        @close="CopyShow = false"
      />
    </common-dialog>
    <common-dialog v-if="renameShow" @closePopup="renameShow = false" showMask>
      <rename
        :oldName="itemName"
        :oldID="itemID"
        @close="renameShow = false"
        @update="successCallback"
      />
    </common-dialog>
  </div>
</template>

<script>
import CopyTemplate from "@/components/TemplateManage/CopyTemplate.vue";
import CommonDialog from "@/components/CommonDialog.vue";
import rename from "@/components/TemplateManage/rename.vue";
import SearchBar from "@/components/TemplateManage/SearchBar.vue";
import CategoryAdd from "@/components/TemplateManage/CategoryAdd.vue";
import AddTemplate from "@/components/TemplateManage/AddTemplate.vue";
import { GO_URLS } from "@/config/URLS";
export default {
  data() {
    return {
      key: "", //个人模板>搜索用>关键词
      classificationList: [], //系统模板>分类
      theTemplateList: [], //系统模板>分类>模板
      checkIndex: 0, // 系统模板>分类>选中效果
      MyCategories: [], // 个人模板>分类
      ClassificationPopups: false, //个人模板>分类>添加弹窗
      checkClassification: 0, //个人模板>分类>选择效果
      personalClassificationList: [], //个人模板>分类>模板
      AddTemplatePopups: false, //个人模板>分类>添加模板
      ActionIndex: -1,
      CopyShow: false,
      TemplateID: -1,
      classIndex: -1,
      renameShow: false,
      itemName: "",
      itemID: -1,
      activeId: 0,
    };
  },
  components: {
    SearchBar,
    CategoryAdd,
    CommonDialog,
    AddTemplate,
    CopyTemplate,
    rename,
  },
  computed: {
    //个人模板or系统模板>选中效果
    TemplateType() {
      return this.$store.getters.get_templateType;
    },
    TemplateDate() {
      return this.$store.getters.get_templateData;
    },
  },
  created() {
    if (this.TemplateType === 0) {
      // 系统模板
      this.listOfSystem();
      if (!this.TemplateDate.index) return;
      this.switchClassification(
        this.TemplateDate.item,
        this.TemplateDate.index
      );
    } else {
      this.getFolderList();
      if (!this.TemplateDate.index) return;
      this.switchPersonalClassification(
        this.TemplateDate.item,
        this.TemplateDate.index
      );
    }
  },
  methods: {
    Rename(item) {
      this.renameShow = true;
      this.itemName = item.name;
      this.itemID = item.id;
    },
    // 删除分类
    async deleteTheClassification(item) {
      const res = await this.$ajax({
        url: GO_URLS.deleteFolder,
        type: "DELETE",
        params: {
          id: item.id,
        },
      });
      if (res) {
        this.$message({
          type: "success",
          message: "删除成功!",
        });
        this.getFolderList();
      }
    },
    editorClassification(item, index) {
      this.classIndex = index;
      document.addEventListener("mousedown", this.onMenuBlur);
    },
    // 复制
    copy(item) {
      this.CopyShow = true;
      this.activeId = this.MyCategories[this.checkClassification].id;
      this.onMenuBlur();
      this.TemplateID = item.id;
    },
    // 删除个人模板的请求
    async deleteCustomize(id) {
      const res = await this.$ajax({
        type: "delete",
        url: GO_URLS.deleteCustomize,
        params: {
          id: id,
        },
      });
      if (res) {
        // this.checkClassification = 0;
        this.$message({
          type: "success",
          message: "删除成功!",
        });
        this.onMenuBlur();
      }
    },
    // 删除个人模板弹窗
    dle(item, index) {
      this.$confirm("此操作将永久删除该模板, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.deleteCustomize(item.id);
          this.personalClassificationList.splice(index, 1);
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // 进入个人模板
    EnterPersonalTemplate(item) {
      this.$router.push({
        path: "/editTemplate",
        query: { personalTemplate: item.id },
      });
    },
    // 进入系统模板
    EnterSystemTemplate(item) {
      this.$router.push({
        path: "/editTemplate",
        query: { systemTemplateId: item.id },
      });
    },
    addSuccess(val) {
      this.AddTemplatePopups = false;
      // this.checkClassification = 0;
      this.getpersonalList(val);
    },
    AddTemplate() {
      this.activeId = this.MyCategories[this.checkClassification].id;
      this.AddTemplatePopups = true;
    },
    // 关闭弹窗
    onMenuBlur() {
      this.ActionIndex = -1;
      this.classIndex = -1;
      document.removeEventListener("mousedown", this.onMenuBlur);
    },
    // 显示弹窗
    showMenu(index) {
      this.ActionIndex = index;
      document.addEventListener("mousedown", this.onMenuBlur);
    },
    // 获取个人分类下对应的模板list
    async getpersonalList(id) {
      const res = await this.$ajax({
        type: "post",
        url: GO_URLS.personalList,
        params: {
          id: [id],
        },
      });
      if (res) {
        if (res.data.results[0].detail) {
          this.personalClassificationList = res.data.results[0].detail;
          this.$store.commit(
            "setTemplateNum",
            res.data.results[0].detail.length
          );
        } else {
          this.personalClassificationList = [];
          this.$store.commit("setTemplateNum", 0);
        }
      }
    },
    // 个人模板>分类>切换
    switchPersonalClassification(item, index) {
      this.$store.commit("setTemplateData", { item, index });
      this.checkClassification = index;
      this.getpersonalList(item.id);
    },
    // 分类下模板操作成功反馈
    successCallback() {
      if (this.ClassificationPopups) this.ClassificationPopups = false;
      if (this.CopyShow) this.CopyShow = false;
      this.getFolderList();
    },
    // 添加分类
    addClassification() {
      this.ClassificationPopups = true;
    },
    // 获取我的模板列表
    async getFolderList() {
      const res = await this.$ajax({
        type: "post",
        url: GO_URLS.folderList,
        params: {
          page: 1,
          page_size: 100,
          template_type: 1,
        },
      });
      if (res) {
        this.MyCategories = res.data.results;

        this.getpersonalList(this.MyCategories[this.checkClassification].id);
      }
    },
    //个人模板or系统模板切换 1 系统模板 0 个人模板
    SwitchTemplate(key) {
      switch (key) {
        case 0:
          this.$store.commit("setTemplateType", 1);
          this.$store.commit("setTemplateData", {});
          this.getFolderList();
          break;
        case 1:
          this.$store.commit("setTemplateType", 0);
          this.$store.commit("setTemplateData", {});
          this.listOfSystem();
          break;
        default:
          break;
      }
    },
    // 背景图
    bg(item) {
      if (item.image_url) {
        return "background-image:url('" + item.image_url + "')";
      } else {
        return "background-image:url('https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3622895792,2096692088&fm=26&gp=0.jpg')";
      }
    },
    // 系统模板下的分类切换
    switchClassification(item, index) {
      if (index !== this.TemplateDate.index) {
        this.$store.commit("setTemplateData", { item, index });
      }
      this.checkIndex = index;
      if (item.detail) {
        this.theTemplateList = item.detail;
        this.$store.commit("setTemplateNum", this.theTemplateList.length);
      } else {
        this.theTemplateList = [];
        this.$store.commit("setTemplateNum", 0);
      }
    },
    // 获取系统模板
    async listOfSystem() {
      const res = await this.$ajax({
        url: GO_URLS.systemList,
        type: "post",
      });
      if (res) {
        this.classificationList = res.data.results;
        if (this.TemplateDate.index) return;
        if (res.data.results[0].detail) {
          this.theTemplateList = res.data.results[0].detail;
          this.$store.commit(
            "setTemplateNum",
            res.data.results[0].detail.length
          );
        } else {
          this.theTemplateList = [];
          this.$store.commit("setTemplateNum", 0);
        }
      }
    },
    async search() {
      if (this.key === "") {
        this.getpersonalList(this.MyCategories[this.checkClassification].id);
        return;
      }
      const res = await this.$ajax({
        url: GO_URLS.searchCustomize,
        type: "post",
        params: {
          key: this.key,
          folder_id: this.MyCategories[this.checkClassification].id,
        },
      });
      if (res) {
        if (res.data.results) {
          this.personalClassificationList = res.data.results;
        } else {
          this.personalClassificationList = [];
        }
      }
    },
  },
};
</script>

<style lang="less" scoped>
.template_manage {
  height: 100%;
  padding-left: 98px;
}
header {
  padding-top: 47px;
}
.header-label_l1 {
  cursor: pointer;
  font-size: 16px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #353535;
  padding-right: 34px;
}
.header-label_l1--check {
  color: #3f79fe;
}
.header-search {
  float: right;
  margin-right: 68px;
  margin-top: -15px;
}
.classification-list {
  list-style: none;
  margin-top: 22px;
  margin-bottom: 15px;
  .item {
    display: inline-block;
    position: relative;
    background: #ffffff;
    border-radius: 4px;
    text-align: center;
    color: #353535;
    margin-bottom: 10px;
    margin-right: 10px;
    padding: 9px 16px;
    cursor: pointer;
  }
  .item-check {
    background: #3f79fe;
    color: white;
  }
}
.default-list {
  flex-wrap: wrap;
  display: flex;
  display: -webkit-flex;
  justify-content: space-between;
  flex-direction: row;
  justify-content: flex-start;
  flex-wrap: wrap;
}
.default-list-item {
  width: 228px;
  margin-right: 15px;
  height: 116px;
  border-radius: 5px;
  margin-bottom: 20px;
  background-size: contain;
  background-repeat: no-repeat;
  position: relative;
  cursor: pointer;
}
.default-list-item-name {
  font-size: 16px;
  font-family: PingFangSC-Semibold;
  font-weight: 600;
  color: rgba(255, 255, 255, 1);
  line-height: 22px;
  position: absolute;
  top: 20px;
  left: 20px;
}
.add-the-classification {
  border-radius: 4px;
  color: #3f79fe;
  display: inline-block;
  font-size: 14px;
  cursor: pointer;
  background: #ffffff;
  text-align: center;
  padding: 9px 16px;
  cursor: pointer;
  i {
    font-size: 14px;
  }
}
.template_item {
  position: relative;
  display: inline-block;
  background-image: url("../../assets/images/category/self-tmpl-bg.png");
  background-size: cover;
  border-radius: 4px;
  padding: 16px 23px;
  width: 228px;
  margin-right: 15px;
  height: 118px;
  margin-bottom: 15px;
  box-sizing: border-box;
  border: 1px solid white;
  cursor: pointer;
  &:hover {
    border: 1px solid #5779f4;
    .icon_menu {
      display: block;
    }
  }
  .title {
    margin: 0;
    font-size: 16px;
    font-family: PingFangSC-Medium;
    font-weight: 500;
    color: rgba(53, 53, 53, 1);
    overflow: hidden;
    margin-right: 24px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .icon_menu {
    display: none;
    position: absolute;
    top: 20px;
    right: 11px; /* 15 - (13 - 4)/2 */
    font-size: 13px;
    color: #98a9bc;
    cursor: pointer;
  }
}
.template_list-add {
  float: left;
  background: #fff;
  color: #797d84;
  font-size: 16px;
  margin-bottom: 15px;
  border-radius: 4px;
  width: 228px;
  height: 118px;
  box-sizing: border-box;
  border: 1px solid white;
  cursor: pointer;
  margin-right: 16px;
  text-align: center;
  i {
    font-size: 20px;
    display: inline-block;
    margin-bottom: 9px;
    margin-top: 31px;
  }
  &:hover {
    border: 1px solid #5779f4;
  }
}
.menu {
  z-index: 100; /* 避免被底部挡住 */
  position: absolute;
  top: 54px;
  right: -15px;
  margin: 0;
  padding: 0;
  width: 107px; /* 109 - 2 */
  list-style: none;
  background: #fff;
  text-align: center;
  border: 1px solid #e7e7e7;
  border-radius: 2px;
  display: none;
}
.menuShow {
  display: block;
}
.menu-item__one {
  &::after {
    content: "";
    display: block;
    position: absolute;
    width: 10px;
    height: 10px;
    border-top: 1px solid #e7e7e7;
    border-left: 1px solid #e7e7e7;
    background: white;
    top: -6px;
    left: 70px;
    transform: rotate(45deg);
  }
  &:hover {
    background: rgba(242, 244, 246, 1);
    &::after {
      background: rgba(242, 244, 246, 1);
    }
  }
}
.menu-item {
  line-height: 43px;
  color: #797d84;
  font-size: 14px;
  cursor: pointer;
}
.menu-item__two {
  &:hover {
    background: rgba(242, 244, 246, 1);
  }
}
</style>
