<template>
  <div class="select-template">
    <van-search
      v-model="searchValue"
      show-action
      placeholder="请输入搜索关键词"
      left-icon="@/assets/search2.png"
      @focus="handleSearchInputFocus"
      @search="onSearch"
      @input="onSearch"
    ></van-search>
    <div v-if="searchValue" class="folder-detail">
      <div
        style="
          color: #818181;
          font-size: 14px;
          text-align: left;
          padding-left: 17px;
          margin-bottom: 15px;
        "
      >
        搜索结果：
      </div>
      <div v-if="searchResult.length <= 0" style="padding: 30px">
        <van-image
          src="@/assets/search.png"
          fit="contain"
          width="78px"
        ></van-image>
        <div style="color: #9b9b9b; font-size: 14px">
          没找到内容，换个名称试试吧
        </div>
      </div>
      <van-radio-group v-model="radio" class="template-list">
        <van-radio
          :name="template.id"
          v-for="(template, index) in searchResult"
          :key="index"
          @click="selectTemplate(template.id)"
        >
          <div>
            <van-image
              round
              :src="template.s_image_url"
              width="50px"
              height="50px"
              fit="contain"
            ></van-image>
            <div>{{ template.name }}</div>
          </div>
          <template #icon="props">
            <common-svg
              :name="props.checked ? 'moban-xuanzhongzhuangtai1' : ''"
            ></common-svg>
          </template>
        </van-radio>
      </van-radio-group>
      <div></div>
      <div class="btn-group" v-if="radio >= 0">
        <div class="left" @click="preview">预览</div>
        <div class="right" @click="confirm">确定</div>
      </div>
    </div>
    <div v-else>
      <div style="position: relative" class="folderList" v-if="showDetailb">
        <!-- 系统模板 -->
        <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="selectFolder(folder)"
            >
              <van-image
                class="thumb"
                :src="folder.folder_img_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">
              +添加文件夹
            </div>
          </div>
          <div v-if="isSy">
            <div
              v-for="(folder, index) in userFolderList"
              :key="index"
              class="item"
              @click="selectFolder(folder)"
            >
              <van-image
                class="thumb"
                :src="folder.folder_simg_url"
                fit="contain"
              ></van-image>
              <div class="title">{{ folder.folder_name }}</div>
              <div class="desc" style="color: #aaaaaa">
                {{ folder.update_time | formatTime }}
                <!-- {{ (folder.detail || []).length }}条模版 -->
              </div>
              <common-svg name="jinru" class="right-icon"></common-svg>
            </div>
          </div>
        </div>
        <!-- <van-tabs v-model="active">
          <van-tab title="系统模板"> </van-tab>
          <van-tab title="我的模板" v-if="isSy"> </van-tab>
        </van-tabs> -->
      </div>
      <div class="folder-detail" v-else>
        <header>
          <div>{{ currentFolder.folder_name }}</div>
          <router-link
            to="addTemplate"
            tag="p"
            style="color: #3f79fe"
            v-if="isSy"
            >+添加模板</router-link
          >
        </header>
        <van-radio-group v-model="radio" class="template-list">
          <van-radio
            :name="template.id"
            v-for="(template, index) in currentFolder.detail"
            :key="index"
            @click="selectTemplate(template.id)"
          >
            <div>
              <van-image
                round
                :src="
                  template.s_image_url ||
                  require('@/assets/defaulttemplate.png')
                "
                width="50px"
                height="50px"
                fit="contain"
              >
              </van-image>
              <div class="van-ellipsis" style="width: 96px">
                {{ template.name }}
              </div>
            </div>
            <template #icon="props">
              <common-svg
                :name="props.checked ? 'moban-xuanzhongzhuangtai1' : ''"
              ></common-svg>
            </template>
          </van-radio>
        </van-radio-group>
        <div class="btn-group" v-if="radio >= 0">
          <div class="left" @click="preview">预览</div>
          <div class="right" @click="confirm">确定</div>
        </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 filters from "@/filter/filters";
const Template = namespace("template");
@Component({
  components: {
    PreviewTemplate,
    AddFolder,
  },
  filters: {
    formatTime(timestamp: number) {
      return filters.timeFormat(timestamp, "MM-dd hh:mm");
    },
  },
})
export default class SelectTemplate extends Mixins(IndexMixin) {
  @Inject("isSy") private isSy!: boolean;

  @Template.Action("getUserFolders") private getUserFolders!: () => void;
  @Template.State("userFolderList") private userFolderList!: any[];
  private active: number = 0;
  private currentFolder: any = {};
  private currentTemplate: any = {};
  private show: boolean = true;
  private searchValue: string = "";
  private searchResult: any[] = [];
  private showDetailb: boolean = true;
  private radio: number = -1;
  private detail: any[] = [];
  private showAddFolder = false;

  protected mounted() {
    this.getUserFolders();
  }
  private selectFolder(folder: any) {
    this.currentFolder = folder;
    this.showDetailb = false;
  }
  private goBack() {
    this.showDetailb = true;
  }
  private async selectTemplate(templateId: number) {
    this.currentTemplate = await this.$api.template.get(templateId);
  }
  private async preview() {
    this.detail = JSON.parse(this.currentTemplate.detail)[0];
    this.$emit("preview", this.currentTemplate);
  }

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

  private async addFolder({ folderName }: any) {
    this.showAddFolder = false;
    await this.$api.template.addFolder(folderName);
    this.getUserFolders();
  }

  private confirm() {
    this.next();
  }
  private employ() {
    this.next();
  }
  @Emit("next")
  private next() {
    this.show = false;
    const { id, name } = this.currentTemplate;
    return {
      templateId: id,
      templateName: name,
    };
  }
  @Emit("cancel")
  private cancel() {
    this.show = false;
  }
  private onSearch(key: string) {
    if (!key) {
      return;
    }
    this.$api.template.searchCustomize(key).then((res: any) => {
      this.searchResult = res.results || [];
    });
  }

  private handleSearchInputFocus(){
      this.$router.push({
          name: 'SearchTemplate',
          query: {
              
          }
      })
  }
}
</script>
<style scoped lang="scss">
.select-template {
  padding: 0 16px;
  ::v-deep .van-search__action {
    color: #aaaaaa;
  }
  .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: 30px;
      }
      .title {
        margin-top: 7px;
        font-size: 12px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #353535;
      }
    }
  }

  .item {
    display: grid;
    grid-template-columns: 44px auto 30px;
    grid-template-rows: repeat(2, 25px);
    grid-auto-flow: column dense;
    place-items: center start;
    grid-gap: 0 17px;
    padding: 13px;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0px 2px 10px 0px rgba(218, 218, 218, 0.31);
    border-radius: 5px;
    margin-bottom: 10px;
    .thumb,
    .right-icon {
      place-self: center;
      grid-row: span 2;
    }
  }
  .folder-detail {
    header {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      padding: 0 17px;
    }
    .template-list {
      display: grid;
      grid-template-columns: repeat(3, 30%);
      row-gap: 30px;
      place-items: center;
      justify-content: space-between;
      padding: 0 17px;
    }
    .btn-group {
      .left,
      .right {
        border-radius: 4px;
        height: 40px;
        line-height: 40px;
      }
      .left {
        width: 107px;
        background: #f0f1f5;
        margin-right: 10px;
        color: black;
      }
      .right {
        flex: auto;
        background: linear-gradient(
          180deg,
          rgba(93, 123, 246, 1) 0%,
          rgba(108, 122, 254, 1) 100%
        );
        box-shadow: 0px 2px 10px 0px rgba(63, 121, 254, 0.3);
        color: #ffffff;
      }
    }
  }
}
</style>