<template>
  <div class="index">
    <div class="header">
      <div class="login" v-if="!isLogin">
         <p>~ 欢迎来到上链查溯源平台</p>
         <div class="button" @click="toLogin">登录/注册</div>
      </div>
      <div class="proof" v-else>
        <p>我的存证数量</p>
        <div class="count">{{proofCount}}</div>
      </div>
    </div>
    <div class="template-list">
      <div class="system-template">
        <p style="font-size:14px;color:#353535;">系统模版</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>
            <p>{{folder_name}}</p>
          </li>
        </ul>
      </div>
      <div
        style="display:flex;flex-direction:row;justify-content:space-between;font-size:14px;color:#353535;"
      >
        <p>我的模版</p>
        <!-- <p @click="addFolderShow = true;" style="color:#3F79FE;">+添加文件夹</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> -->
        <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">{{folder_name}}</div>
           <div class="desc">{{(detail || []).length}}条模版</div>
           <common-svg name="jinru" class="right-icon"></common-svg>
        </div>
    </div>
  </div>
</template>
<script lang="ts">
import { Component, Prop, Vue, Watch } from 'vue-property-decorator';
import { List, Image } from 'vant';
import { TEMPLATETYPE } from '@/const/enum';
import { State } from 'vuex-class';
@Component({
  components: {
    [List.name]: List,
    [Image.name]: Image,
  },
})
export default class Index extends Vue {
  @State('isLogin') private isLogin!: boolean;
  private systemList: any[] = [];
  private list: any[] = [];
  private page: number = 1;
  private pageSize: number = 20;
  private total: number = 0;
  private loading: boolean = false;
  private finished: boolean = false;

  private proofCount: number = 0;

  private addFolderShow: boolean = false;

  @Watch('isLogin', { immediate: true })
  private onIsLoginChange(newVal: boolean, oldVal: boolean) {
    if (newVal) {
      this.$api.proof.count().then((res: any) => {
        this.proofCount = res.total;
      });
      this.$api.template.folderList({
        template_type: 1,
      }).then((res: any) => {
        const ids = (res.results || []).map((folder: any) => folder.id);
        return this.$api.template.list({id: ids});
      }).then((res: any) => {
        this.list = res.results || [];
      });
    }
  }
  get BrowserAddress() {
    return process.env.VUE_APP_BROWSER;
  }
  private toLogin() {
    this.$router.push({name: 'Login'});
  }
  private mounted() {
    this.$api.template.systemList().then((res: any) => {
        this.systemList = res.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, 30px);
      grid-auto-flow: column dense;
      place-items: center start;
      grid-gap: 4px 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>