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

    <!-- 群组件 -->
    <div v-if="item.componentFrontId==='resi-functionList-group-recommendGroupSlider'">

      <div class="m-group">

        <div class="cpt-title">
          <div class="cpt-title-t">热门小组</div>

        </div>

        <div class="wrap">

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

              <div class="item-no">
                <img v-if=" subindex===0 "
                     src="@/assets/img/modules/wx-mini/index-set/1.png"
                     mode="aspectFill" />
                <img v-if=" subindex===1 "
                     src="@/assets/img/modules/wx-mini/index-set/2.png"
                     mode="aspectFill" />
                <img v-if=" subindex===2 "
                     src="@/assets/img/modules/wx-mini/index-set/3.png"
                     mode="aspectFill" />
              </div>

              <div class="item-avatar">

                <img src="@/assets/img/modules/wx-mini/index-set/page/avatar.jpg">
              </div>
              <div class="item-name">{{ subitem.title  }}</div>
              <div class="item-info">
                <span>共{{ subitem.info2 }}人</span>
                <span> 党员{{ subitem.info3 }}人</span>
              </div>

              <div class="item-btn-div">
                <div class="item-btn">
                  <span>加入</span>
                </div>
              </div>

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

      <!-- <div class="list">
        <div :class="['item',{'item_margin':subindex>0}]"
             :key="subindex"
             v-for="(subitem, subindex) in item.demoData.list">

          <div class="row1">
            <div class="left">
              <div class="avatar">
                <img src="@/assets/img/modules/wx-mini/index-set/page/avatar.jpg">
              </div>
              <div class="no">NO.{{subitem.no}}</div>
            </div>

            <div class="right">
              <div class="groupName">{{subitem.title}}</div>
              <div class="info">
                <span>{{subitem.info2}}</span>
                <span class="span_info2">{{subitem.info3}}</span>
              </div>
              <div v-if="subitem.type && subitem.type!==''"
                   class="type">{{subitem.type}}</div>
            </div>
          </div>

          <div class="row2">
            <div class="operation">
              <img src="@/assets/img/modules/wx-mini/index-set/add-red.png">
              <span> 加入</span>
            </div>
            <div class="operation">
              <img src="@/assets/img/modules/wx-mini/index-set/search-red.png">
              <span> 参观</span>
            </div>
          </div>

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

  </div>
</template>

<script>

export default {
  name: 'cptItem',
  data () {
    return {
      "list":
        [
          {
            "ico": "",
            "no": "1",
            "avatar": "",
            "title": "群名称",
            "info1": "山东路45号-张三",
            "info2": "共240人",
            "info3": "党员11人",
            "type": "支部"
          },
          {
            "ico": "",
            "no": "2", "avatar": "",
            "title": "群名称",
            "info1": "山东路45号-张三",
            "info2": "共240人",
            "info3": "党员11人",
            "type": ""
          },
          {
            "ico": "",
            "no": "3",
            "avatar": "",
            "title": "群名称",
            "info1": "山东路45号-张三",
            "info2": "共240人",
            "info3": "党员11人",
            "type": ""
          }
        ]
    }
  },
  components: {
  },
  props: {
    isFocused: Boolean,
    item: Object
  },
  methods: {

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