<template>
  <div class="body">
    <h1>选择模板</h1>
    <!-- <div class="body_add" v-if="!isActive" @click="addTemplate">
      <i class="iconfont iconjiahao"></i>添加新模板
    </div>-->
    <div class="body_center">
      <div class="left">
        <span
          :class="{ 'span--check': isActive, classification: true }"
          @click="systemSelected"
        >
          <div class="up">
            <i class="iconfont icongengduo1"></i>
          </div>
          系统模板
        </span>
        <!-- <div> -->
        <ul class="system-list" :style="showHeight">
          <li
            v-for="(item, index) in SystemList"
            :key="index"
            @click="check(item, index)"
          >
            <i class="iconfont iconwenjianjia"></i>
            <span :class="{ 'name--check': index === checkIndex }">{{
              item.folder_name
            }}</span>
          </li>
        </ul>
        <!-- </div> -->
        <span
          :class="{ 'span--check': !isActive, classification: true }"
          @click="my"
        >
          <div class="up" :class="{ 'up--down': true }">
            <i class="iconfont icongengduo1"></i>
          </div>
          我的模板
        </span>
        <!-- 个人模板>分类 -->
        <ul class="system-list" :style="showHeight2">
          <li
            v-for="(item, index) in PersonalClassification"
            :key="index"
            @click="checkMy(item, index)"
          >
            <i class="iconfont iconwenjianjia"></i>
            <span :class="{ 'name--check': index === checkIndex2 }">{{
              item.name
            }}</span>
          </li>
        </ul>
        <!-- 分类模块暂时隐藏 -->
        <!-- <classification-tree v-if="isActive" @SelectedCategory="SelectedCategory"></classification-tree> -->
      </div>
      <div class="right">
        <ul>
          <li
            v-for="(item, index) in ListOfDetails"
            :key="index"
            @click="selection(item, index)"
          >
            <img
              src="https://f10.baidu.com/it/u=557133877,2120362237&fm=72"
              v-if="isActive && !item.image_url"
            />
            <img :src="item.image_url" v-if="isActive && item.image_url" />
            <img
              v-if="!isActive"
              src="../../assets/images/category/self-tmpl-bg.png"
              class="img_my"
            />
            <span :class="{ my: !isActive }">{{ item.name }}</span>
            <div class="iconbox" :class="{ iconbox_my: !isActive }">
              <i
                class="iconfont iconxingzhuang2"
                v-if="coordinate === index"
              ></i>
              <i class="iconfont iconweixuanze" v-else></i>
            </div>
          </li>
        </ul>
        <!-- 页码组件 -->
        <!-- <pagination class="pager" v-model="page" :total="total" @change="pagechange" :size="9"></pagination> -->
      </div>
      <!-- 个人模板列表 -->
    </div>
    <!-- 底部按钮 -->
    <div class="body_footer">
      <div class="btn btn--preview" @click="preview">预览</div>
      <div class="btn btn--determine" @click="Determine">确定</div>
    </div>
    <!-- 预览弹窗 -->
    <common-dialog
      v-if="previewWindow"
      @closePopup="previewWindow = false"
      showMask
      class="template-popup__style"
    >
      <preview
        :systemTemplateId="systemTemplateId"
        :isActive="isActive"
        @returnTemplate="returnTemplate"
      ></preview>
      <!-- <template-popup></template-popup> -->
      <!-- <Increments :id="infoId" @update="IncrementUpdate" @close="showIncrements=false"></Increments> -->
    </common-dialog>
    <!-- <first-add v-if="addTemplateShow" :stepData="2" @finish="handleFinishAdd"></first-add> -->
  </div>
</template>
<script lang="ts">
import { Component, Vue, Prop } from "vue-property-decorator";
import { GO_URLS } from "@/config/URLS";
import CommonDialog from "@/components/CommonDialog.vue"; // 公共组件
// import Pagination from "@/components/Pagination.vue"; // 翻页组件
import preview from "./preview.vue"; //类目组件
// import FirstAdd from "@/views/FirstAdd.vue";
@Component({
  components: {
    // Pagination,
    CommonDialog,
    preview,
    // FirstAdd,
  },
})
// @Prop()
export default class TemplatePopup extends Vue {
  @Prop() proofType!: number;
  public isActive: Boolean = true; // 系统模板true,个人模板false
  public SystemList: [] = []; // 展示用数据
  public coordinate: Number = -1; // 基准值
  public templateId: Number = 0;
  public categoryIdList: [] = [];
  public previewWindow: Boolean = false; //预览窗口
  public systemTemplateId: number = 0;
  public ListOfDetails: [] = [];
  public checkIndex: number = 0;
  public checkIndex2: number = -1;
  public PersonalClassification: [] = [];
  public BenchmarkHeight: number = 31;
  public BenchmarkHeight2: number = 31;
  public created() {
    this.getSystemTemplateList();
  }
  //个人模板>分类>模板列表
  public async getpersonalList(id: number) {
    const res = await this.$ajax({
      type: "post",
      url: GO_URLS.personalList,
      params: {
        id: [id],
      },
    });
    if (res) {
      if (res.data.results[0].detail) {
        this.ListOfDetails = res.data.results[0].detail;
      } else {
        this.ListOfDetails = [];
      }
    }
  }
  // 系统模板>分类选中效果
  public check(item: { detail: [] }, index: number) {
    this.checkIndex = index;
    this.coordinate = -1;
    // }
    if (item.detail) {
      this.ListOfDetails = item.detail;
    } else {
      this.ListOfDetails = [];
    }
  }
  // 个人模板>分类选中效果
  public checkMy(item: { id: number }, index: number) {
    this.checkIndex2 = index;
    this.coordinate = -1;
    this.getpersonalList(item.id);
  }
  // 系统模板>分类样式
  get showHeight() {
    return {
      height: this.SystemList.length * this.BenchmarkHeight + "px",
    };
  }
  // 个人模板>分类样式
  get showHeight2() {
    return {
      height: this.PersonalClassification.length * this.BenchmarkHeight2 + "px",
    };
  }

  // 选定模板
  public Determine() {
    if (this.systemTemplateId === 0) {
      this.$message({
        message: "请先选中模板，再进行该操作",
        type: "warning",
      });
      return;
    }
    // 关闭预览窗口
    if (this.previewWindow) this.previewWindow = false;
    this.$emit("Determine", this.systemTemplateId);
  }
  // 预览结束
  public returnTemplate(val: string) {
    if (val === "Use") {
      this.Determine();
    } else {
      this.previewWindow = false;
    }
  }
  // 预览
  public preview() {
    if (this.systemTemplateId === 0) {
      this.$message({
        message: "请先选中模板，再进行预览",
        type: "warning",
      });
      return;
    }
    this.previewWindow = true;
  }
  // 模板选中
  public selection(item: any, index: number) {
    this.systemTemplateId = item.id;
    this.coordinate = index;
  }
  // 获取系统模板列表
  public async getSystemTemplateList() {
    const res = await this.$ajax({
      type: "post",
      url: GO_URLS.systemList,
    });
    if (res) {
      if (!res.data.results) {
        this.SystemList = [];
      } else {
        this.SystemList = res.data.results;
        this.check(res.data.results[0], 0);
      }
    }
  }
  // 获取我的模板列表
  public 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.checkMy(res.data.results[0], 0);
      return res.data.results;
    }
  }
  // 个人模板>分类>获取模板列表
  public async getMyTemplateList() {
    const res = await this.getFolderList();
    if (!res) return false;
    this.PersonalClassification = res;
  }
  // 切换到系统模板
  public systemSelected() {
    // isActive true为系统模板,false为个人模板
    if (this.isActive) {
      if (this.BenchmarkHeight === 31) {
        this.BenchmarkHeight = 0;
      } else {
        this.BenchmarkHeight = 31;
      }
    } else {
      this.isActive = true;
      this.coordinate = -1; //初始化模板选中状态
      this.PersonalClassification = []; // 初始化个人模板列表的数据
      this.getSystemTemplateList(); //获取系统模板列表数据
    }
  }
  // 切换到我的模板
  public my() {
    if (!this.isActive) {
      if (this.BenchmarkHeight2 === 31) {
        this.BenchmarkHeight2 = 0;
      } else {
        this.BenchmarkHeight2 = 31;
      }
    } else {
      this.isActive = false;
      this.coordinate = -1;
      this.SystemList = [];
      this.ListOfDetails = [];
      this.getMyTemplateList();
    }
  }
}
</script>
<style lang="less" 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;
  // &::-webkit-scrollbar {
  //   // display: none;
  //   // width: 2px;
  // }
  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;
    // &:first-child {
    //   // padding-top: 20px;
    // }
    // &:last-child {
    //   padding-bottom: 10px;
    // }
    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: #3f79fe !important;
    }
  }
}
.template-popup__style {
  border-radius: 10px !important;
  overflow: hidden;
  /deep/.dialog_content {
    background: none;
    max-height: none;
  }
}
.body {
  width: 932px;
  height: 640px;
  background: rgba(255, 255, 255, 1);
  border-radius: 10px;
  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;
  }
  // .pager {
  //   margin-top: 8px;
  //   text-align: right;
  //   padding-right: 13px;
  // }
  .body_add {
    position: absolute;
    cursor: pointer;
    top: 26px;
    color: #4a90e2;
    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 {
    border-bottom: 1px solid #e9e9e9;
    height: 460px;
    padding-top: 9px;
    //
    .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;
        // color: white;
        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 {
      float: left;
      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: 16px;
          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>