<template>
  <div class="select-template">
    <div class="search-container" @click="handleSearchInputFocus">
      <img src="@/assets/search2.png" alt="" />
      <div class="placeholder">请输入搜索关键词</div>
    </div>
    <div style="position: relative" class="folderList">
      <!-- 系统模板 -->
      <div class="system-template">
        <div class="template-title">系统模板</div>
        <div class="system-item-container">
          <div
            v-for="(folder, index) in systemList"
            :key="index"
            class="system-item"
            @click="handleClickSystemCategory(folder)"
          >
            <van-image
              class="thumb"
              :src="folder.folder_simg_url"
              fit="contain"
            ></van-image>
            <div class="title">{{ folder.folder_name }}</div>
          </div>
        </div>
      </div>
      <!-- 我的模板 -->
      <div class="my-template">
        <div style="position: relative" class="template-title">
          我的模板
          <div class="addFolder" @click="handleClickAddFolder" v-if="isSy">
             <common-svg name="xuanzemoban-tianjia1" width="11px" style="margin-right:5px;vertical-align:baseline"></common-svg>
             <span style="font-size: 16px;">
                添加文件夹
             </span>
          </div>
        </div>
        <div v-if="isSy">
          <folder-list
            :handleClickFolder="handleClickFolder"
            :mode="EFolderListMode.SHOW"
          />
        </div>
      </div>
    </div>
    <add-folder
      :show.sync="showAddFolder"
      @cancel="showAddFolder = false"
      @next="addFolder"
    ></add-folder>
  </div>
</template>
<script lang="ts">
import {
  Component,
  Prop,
  Vue,
  Emit,
  Inject,
  Mixins,
} from 'vue-property-decorator';
import { State, Action, namespace } from 'vuex-class';
import IndexMixin from '@/mixins/Index';
import { TEMPLATETYPE } from '@/const/enum';
import PreviewTemplate from '@/views/template/components/PreviewTemplate.vue';
import AddFolder from '@/views/template/components/AddFolder.vue';
import FolderList from '@/views/components/FolderList.vue';
import { IGetUserFoldersPayload } from '@/store/modules/types';
import { EFolderListMode } from '../components/types';
const Template = namespace('template');
@Component({
  components: {
    PreviewTemplate,
    AddFolder,
    FolderList,
  },
})
export default class SelectTemplate extends Mixins(IndexMixin) {
  @Inject('isSy') private isSy!: boolean;
  @Template.Action('getUserFoldersFixed') private getUserFolders!: (
    payload?: IGetUserFoldersPayload
  ) => Promise<boolean>;
  @Template.Mutation('setPage') private setPage!: (page: number) => void;
  @Template.State('page') private page!: number;
  private currentFolder: any = {};
  private currentTemplate: any = {};
  private show: boolean = true;
  private showAddFolder = false;
  private EFolderListMode = EFolderListMode

  private handleClickFolder(folder: any) {
    // 当前点击的是我的模板中的文件夹，
    // 根据文件夹的folder_id 来识别是哪个文件夹
    this.$router.push({
      name: 'ViewTemplate',
      query: {
        folderId: folder.id,
        ...this.$route.query,
      },
    });
  }

  private handleClickSystemCategory(folder: any) {
    // 当前点击的是系统模板中的某个分类
    // 根据系统模板的folder_name 来识别是哪个分类。
    this.$router.push({
      name: 'ViewTemplate',
      query: {
        folderName: folder.folder_name,
        ...this.$route.query,
      },
    });
  }

  private async selectTemplate(templateId: number) {
    this.currentTemplate = await this.$api.template.get(templateId);
  }

  private handleClickAddFolder() {
    this.showAddFolder = true;
  }

  private async addFolder({ folderName }: any) {
    this.showAddFolder = false;
    await this.$api.template.addFolder(folderName);
    /* 👇请求第一页数据,并在页面上进行渲染 */
    this.setPage(1);
    await this.getUserFolders({page: this.page});
  }

  private handleSearchInputFocus() {
    this.$router.push({
      name: 'SearchTemplate',
      query: {
        ...this.$route.query,
      },
    });
  }
}
</script>
<style scoped lang="scss">
.select-template {
  padding: 0 16px;
  ::v-deep .van-search__action {
    color: #aaaaaa;
  }
  .search-container {
    margin-top: 17px;
    margin-bottom: 15px;
    width: 343px;
    height: 40px;
    background: #f7f7f7;
    border-radius: 4px;
    display: flex;
    align-items: center;
    img {
      margin-left: 14px;
      width: 17px;
    }
    .placeholder {
      text-align: left;
      margin-left: 10px;
      flex-grow: 1;
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #b6b5ba;
      line-height: 20px;
    }
  }
  .header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 19px 12px;
    padding-bottom: 0;
    color: #353535;
    font-size: 18px;
  }
  ::v-deep .van-radio {
    position: relative;
    &__icon {
      position: absolute;
      z-index: 3;
      right: 0;
      top: 5px;
    }
  }
  ::v-deep .van-tabs__line {
    display: none;
  }
  ::v-deep .van-tab {
    width: 70px;
    flex: none;
    padding: 4px;
  }
  .folderList {
    .addFolder {
      position: absolute;
      right: 0;
      font-size: 12px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #3f79fe;
      top: 0;
    }
    .template-title {
      text-align: left;
      font-size: 14px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #353535;
      margin-bottom: 17px;
    }
  }
  .system-template {
  }
  .my-template {
    margin-top: 24px;
  }
  .system-item-container {
    display: flex;
    .system-item {
      flex-basis: 25%;
      .thumb {
        height: 34px;
      }
      .title {
        margin-top: 7px;
        font-size: 12px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #353535;
      }
    }
  }
}
</style>
