<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, Mixins } from 'vue-property-decorator';
import { State, Action } from 'vuex-class';
import IndexMixin from '@/mixins/Index';
@Component({
})
export default class IndexCs extends Mixins(IndexMixin) {
  private charityType: any[] = [];
  @Watch('systemList', { immediate: true, deep: true })
  private async onChange(newVal: any[], oldVal: any[]) {
    if (newVal.length) {
      this.charityType = (newVal[0] as any).detail;
    }
  }
  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;
      letter-spacing: 2px;
    }
  }
}
</style>