<template>
  <div class="index">
    <div v-for="{id, name, s_image_url} of charityType"
      :key="id"
      class="cs-wrapper"
      @click="goProofDetail(id)"
    >
      <van-image
        width="100%"
        height="100%"
        fit="contain"
        :src="s_image_url"
      />
      <div class="title">{{name}}</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 Index 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 charityType: 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.charityType = results[0].detail;
  }
  private goTemplList(templList: [] = []) {
    this.$router.push({ name: 'TemplList', query: { templList: JSON.stringify(templList) } });
  }
  private goProofDetail(templateId: string) {
    this.$router.push({ name: 'ProofDetail', query: {templateId} });
  }
}
</script>
<style scoped lang="scss">
.index {
  margin-bottom: $tabHeight;
  padding: 15px 13px 0 14px;

  .cs-wrapper {
    position: relative;
    margin-bottom: 10px;
    .title {
      position: absolute;
      left: 24px;
      top: 18px;
      font-size: 24px;
      font-weight: 600;
      color: #ffffff;
      line-height: 33px;
    }
  }
}
</style>