<template>
  <div class="mw-cpt a-fade-in"
       :ref="item.tempOnlyId"
       :title="item.componentName"
       :class="{'z-focused': isFocused}"
       @click="focusCpt">

    <!-- 爱心互助banner组件 -->
    <div v-if="item.componentFrontId==='resi-functionList-heart-banner'">
      <div class="mw-cpt-banner">
        <div catchtap="toHeartHome"
             class="d-cpt-subwrap">

          <img v-if="item.configuration.url"
               :src="item.configuration.url"
               mode="aspectFill">
          <img v-else
               src="@/assets/img/modules/wx-mini/index-set/page/heart-banner.png"
               mode="aspectFill">

          <div v-if="true"
               class="s-title">您报名的活动即将开始</div>
          <div class="d-group-no">
            <span>点击进入</span>
          </div>

        </div>
      </div>
    </div>

    <!-- 爱心互助最新活动组件 -->
    <div v-if="item.componentFrontId==='resi-functionList-heart-new'">
      <div class="m-news">
        <div class="cpt-title">
          <div class="cpt-title-t">{{item.configuration.title}}</div>

        </div>

        <div class="list">
          <div data-id=" subitem.actId "
               class="item"
               :key="subindex"
               v-for="(subitem, subindex) in item.demoData.list">
            <div class="img">

              <img v-if="subitem.pic"
                   :src="subitem.pic">
              <img v-else
                   src="@/assets/img/modules/wx-mini/index-set/page/news-pic.png">

            </div>

            <div class="info">
              <div class="d-news-title">{{ subitem.title }}</div>

              <div class="d-news-time">时间：{{ subitem.time2 }}</div>
              <div class="d-news-else">

                <span>地点：{{ subitem.adress }}</span>
              </div>
              <div class="d-news-state">
                <span class="d-news-state-limit">活动名额 12人，</span>
                <span class="d-news-state-act">已报名 9人</span>

              </div>
            </div>

          </div>

        </div>
      </div>

    </div>

    <!-- 爱心互助历史回顾组件 -->
    <div v-if="item.componentFrontId==='resi-functionList-heart-history'">
      <div class="m-news">
        <div class="cpt-title">
          <div class="cpt-title-t">{{item.configuration.title}}</div>

        </div>

        <div class="list">
          <div data-id=" subitem.actId "
               class="item"
               :key="subindex"
               v-for="(subitem, subindex) in item.demoData.list">
            <div class="img">

              <img v-if="subitem.pic"
                   :src="subitem.pic">
              <img v-else
                   src="@/assets/img/modules/wx-mini/index-set/page/news-pic.png">

            </div>

            <div class="info">
              <div class="d-news-title">{{ subitem.title }}</div>

              <div class="d-news-time">时间：{{ subitem.time2 }}</div>
              <div class="d-news-else">

                <span>地点：{{ subitem.adress }}</span>
              </div>
              <div class="d-news-state">
                <span class="d-news-state-limit">活动名额 12人，</span>
                <span class="d-news-state-act">已报名 9人</span>

              </div>
            </div>

          </div>

        </div>
      </div>
    </div>
  </div>

</template>

<script>
import nextTick from 'dai-js/tools/nextTick'

export default {
  name: 'cptItem',
  data () {
    return {}
  },
  props: {
    isFocused: Boolean,
    item: Object
  },
  mounted () {
    console.log(this.item)
  },
  methods: {


    focusCpt () {
      this.$emit('focusCpt', this.item)
    }
  }
}
</script>
<style lang="scss" src="@/assets/scss/modules/wx-mini/heart.scss"></style>
