<template>
  <div class="template-list">
     <empty v-if="!list" name="moban" tip="您还未添加模板" style="margin-top:30vh"></empty>
     <template-item 
      v-for="{id, s_image_url, name, info} of list" 
      :key="id"
      @click.native="goProofDetail(id)"
      :thumb="s_image_url"
      :title="name"
      :desc="info"
      ></template-item>
  </div>
 
</template>
<script lang="ts">
import { Component, Prop, Vue, Watch } from 'vue-property-decorator';
import { List, Image, Empty } from 'vant';
import { TEMPLATETYPE } from '@/const/enum';
@Component({
  components: {
    [List.name]: List,
    [Image.name]: Image,
    [Empty.name]: Empty,
  },
})
export default class Index extends Vue {
  private list: any[] = [];

  @Prop({
  })
  private templList!: string;
  @Watch('templList', { immediate: true, deep: true })
  private async onRouteChange(newTemplList: string, oldTemplList: string) {
    this.list = JSON.parse(newTemplList);
  }
  private goProofDetail(templateId: string) {
    this.$router.push({ name: 'ProofDetail', query: {templateId} });
  }
}
</script>
<style scoped lang="scss">
  .template-list{
    box-sizing: border-box;
    padding: 11px 14px;
    background: #F9FBFF;
    a{
      display:flex;
      align-items: center;
      justify-content: space-between;
      padding: 6px 20px;
      margin-bottom: 20px;
      background:rgba(255,255,255,1);
      box-shadow:0px 2px 10px 0px rgba(240,242,246,1);
      border-radius:27px;
      border:1px solid rgba(220,231,255,1);
      .left span{
        font-size:14px;
        font-weight:500;
        color:rgba(53,53,53,1);
      }
    }
    .system-template{
      text-align: left;
      ul{
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        font-size: 12px;
        text-align: center;
      }
    }
  }
</style>