<template>
  <div class="index">
    <van-image src="@/assets/indexbanner.png" fit="contain" width="100%;" style="margin: 18px 10px 0;"></van-image>
    <!-- <div class="header">
      <div class="login" v-if="!isLogin">
         <p>~ 欢迎来到{{APP_NAME}}平台</p>
         <div class="button" @click="toLogin">登录/注册</div>
      </div>
      <div class="proof" v-else>
        <div>我的存证数量</div>
        <div class="count">{{proofCount}}</div>
      </div>
    </div> -->
    <div class="template-list">
      <div class="system-template">
        <p style="font-size:16px;color:#353535;font-weight:500;">系统模版</p>
        <ul>
          <li
            v-for="{ id, folder_simg_url, folder_name, detail} of systemList"
            :key="id"
            @click="goTemplList(detail, folder_name)"
          >
            <van-image :src="folder_simg_url" width="44px" height="64px" fit="contain"></van-image>
            <div style="font-size:14px;color:#353535;">{{folder_name}}</div>
          </li>
        </ul>
      </div>
      <div
        style="display:flex;flex-direction:row;justify-content:space-between;font-size:16px;color:#353535;margin:16px 0;"
      >
        <span style="font-weight:500;color:#353535;">我的模版</span>
        <span style="color:#3F79FE;" @click="showAddFolder = true;">+添加文件夹</span>
        <!-- <router-link to="addTemplate" tag="p" style="color:#3F79FE;">+添加文件夹</router-link> -->
      </div>
        <empty v-if="!list.length && !loading" name="moban" tip="您还未添加模板"></empty>
        <div>
          <div class="folder-item" v-for="{id, folder_simg_url, folder_name, detail} of list" :key="id" @click="goTemplList(detail, folder_name)">
           <van-image
            class="thumb"
            :src="folder_simg_url"
            fit="contain"
            ></van-image>
           <div class="title" style="#353535;font-size:18px;font-weight:500;">{{folder_name}}</div>
           <div class="desc" style="color: #AAAAAA;">{{(detail || []).length}}条模版</div>
           <common-svg name="jinru" class="right-icon"></common-svg>
          </div>
        </div>
    </div>

    <transition name="van-slide-up">
      <add-folder v-if="showAddFolder" @cancel="showAddFolder = false" @next="addFolder"></add-folder>
    </transition>
  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue, Watch, Inject, Mixins } from 'vue-property-decorator';
import { List, Image, Empty } from 'vant';
import { TEMPLATETYPE } from '@/const/enum';
import { State, Action } from 'vuex-class';
import IndexMixin from '@/mixins/Index';
import AddFolder from '@/views/template/components/AddFolder.vue';
@Component({
  components: {
    [List.name]: List,
    [Image.name]: Image,
    [Empty.name]: Empty,
    AddFolder,
  },
})
export default class IndexSy extends Mixins(IndexMixin) {
  @Inject('APP-NAME') private APP_NAME!: string;
  @State('isLogin') private isLogin!: boolean;
  @State('proofCount') private proofCount!: number;
  @State('sysTemplateList') private systemList!: [];
  @Action('getProofCount') private getProofCount!: any;
  private list: any[] = [];
  private loading: boolean = true;
  private showAddFolder: boolean = false;
  @Watch('isLogin', { immediate: true })
  private async onIsLoginChange(newVal: boolean, oldVal: boolean) {
    if (!newVal) {
      this.loading = false;
    } else {
      const promises = [this.getProofCount(), this.getUserFolders()];
      await Promise.all(promises);
      this.loading = false;
    }
  }
  private async getUserFolders() {
    const { results = []} = await this.$api.template.folderList({template_type: 1});
    const ids = results.map((folder: any) => folder.id);
    const res = await this.$api.template.list({id: ids});
    this.list = res.results || [];
  }
  private async addFolder( { folderName }: any) {
    this.showAddFolder = false ;
    await this.$api.template.addFolder(folderName);
    this.getUserFolders();
  }
  private toLogin() {
    this.$router.push({name: 'Login'});
  }
  private goTemplList(templList: [] = [], folderName = '') {
    this.$router.push({ name: 'TemplList', query: { templList: JSON.stringify(templList) , folderName} });
  }
}
</script>
<style scoped lang="scss">
.index {
  margin-bottom: $tabHeight;
  div.header {
    padding: 36px 21px;
    text-align: left;
    background: url("../../assets/index.png");
    background-size: cover;
    box-shadow: 0px 5px 20px 0px rgba(63, 121, 254, 0.34);
    .login {
      p {
        font-size: 20px;
        font-weight: 500;
        color: rgba(255, 255, 255, 1);
      }
      div.button {
        display: inline-block;
        padding: 10px 20px;
        border-radius: 18px;
        font-size: 12px;
        font-weight: 500;
        color: rgba(13, 88, 227, 1);
        background: #ffffff;
      }
    }
    .proof {
      font-size: 12px;
      font-weight: 400;
      color: rgba(255, 255, 255, 1);
      .count {
        font-size: 40px;
        font-weight: 500;
      }
    }
    
  }
  .template-list {
    box-sizing: border-box;
    padding: 11px 14px;
    background: #f9fbff;
    position: relative;

    .system-template {
      text-align: left;
      ul {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        font-size: 12px;
        text-align: center;
      }
    }
    .folder-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;
      }
    }
  }
}
</style>