<template>
  <div class="index">
    <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)"
          >
            <van-image :src="folder_simg_url" width="44px" fit="contain"></van-image>
            <div style="font-size:14px;color:#353535;">{{folder_name}}</div>
          </li>
        </ul>
      </div>
      <div
        v-if="isSy"
        style="display:flex;flex-direction:row;justify-content:space-between;font-size:16px;color:#353535;margin-top:10px;"
      >
        <p style="font-weight:500;color:#353535;">我的模版</p>
        <router-link to="addTemplate" tag="p" style="color:#3F79FE;">+添加模板</router-link>
      </div>
        <!-- <template-item
          v-for="{id, folder_img_url, folder_name, detail} of list"
          :key="id"
          @click.native="goTemplList(detail)"
          :thumb="folder_img_url"
          :title="folder_name"
          :desc="`${detail.length}条模板`"
        ></template-item> -->
         <!-- <van-empty 
            v-if="!list.length"
            description="您还未添加模板"
            image="@/assets/notemplate.png">
          </van-empty> -->
        <empty v-if="!list.length && !loading && isSy" name="moban" tip="您还未添加模板"></empty>
        <div v-if="isSy">
          <div class="folder-item" v-for="{id, folder_simg_url, folder_name, detail} of list" :key="id" @click="goTemplList(detail)">
           <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>
  </div>
</template>
<script lang="ts">
import { Component, Prop, Vue, Watch, Inject } from 'vue-property-decorator';
import { List, Image, Empty } from 'vant';
import { TEMPLATETYPE } from '@/const/enum';
import { State, Action } from 'vuex-class';
@Component({
  components: {
    [List.name]: List,
    [Image.name]: Image,
    [Empty.name]: Empty,
  },
})
export default class IndexSy extends Vue {
  @Inject('isSy') private isSy!: boolean;
  @Inject('APP-NAME') private APP_NAME!: string;
  @State('isLogin') private isLogin!: boolean;
  @State('proofCount') private proofCount!: number;
  @Action('getProofCount') private getProofCount!: any;
  private systemList: any[] = [];
  private list: any[] = [];
  private loading: boolean = true;
  @Watch('isLogin', { immediate: true })
  private async onIsLoginChange(newVal: boolean, oldVal: boolean) {
    if (!newVal) {
      this.loading = false;
    }
    if (newVal) {
      const promises = Promise.all([
                                    this.getProofCount(),
                                    this.$api.template.folderList({
                                                                  template_type: 1,
                                                                })]);
      const [ , folderListResult ] = await promises;
      const { results = [] } = folderListResult;
      const ids = results.map((folder: any) => folder.id);
      const res = await this.$api.template.list({id: ids});
      this.list = res.results || [];
      this.loading = false;
    }
  }
  private toLogin() {
    this.$router.push({name: 'Login'});
  }
  private mounted() {
    this.getSystemList();
  }
  private async getSystemList() {
    const { results = []}  = await this.$api.template.systemList();
    this.systemList = results;
  }
  private goTemplList(templList: [] = []) {
    this.$router.push({ name: 'TemplList', query: { templList: JSON.stringify(templList) } });
  }
}
</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>