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

    <!-- 更多功能组件 -->
    <div class="extended_more1"
         v-if="item.componentFrontId==='resi-functionList-extend-moreFunctionIcons'">

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

          <div>
            <img v-if="subindex==0"
                 src="@/assets/img/modules/wx-mini/index-set/page/icon1.png">
            <img v-else-if="subindex==1"
                 src="@/assets/img/modules/wx-mini/index-set/page/icon2.png">
            <img v-else-if="subindex==2"
                 src="@/assets/img/modules/wx-mini/index-set/page/icon3.png">
            <img v-else
                 src="@/assets/img/modules/wx-mini/index-set/page/icon4.png">
          </div>
          <p>{{ subitem.text }}</p>
        </div>
      </div>

    </div>

    <!-- 更多功能2栏组件 -->
    <div class="mw-cpt-cnt_function2"
         v-else-if="item.componentFrontId==='resi-functionList-extend-moreFunctionIcons2'">
      <div class="d-cpt-wrap">

        <div class="link">
          <div class="link-item">
            <img src="@/assets/img/modules/wx-mini/index-set/wailian-bg.jpg"
                 mode="aspectFill" />
            <span>{{'建议直通车'}}</span>
          </div>
          <div class="link-item">
            <img src="@/assets/img/modules/wx-mini/index-set/wailian-bg.jpg"
                 mode="aspectFill" />
            <span>{{'建议直通车'}}</span>
          </div>

        </div>

        <div class="dots">
          <div class="dot z-on"></div>
          <div class="dot"></div>
        </div>

        <!-- <div class="dots">
          <i></i>
          <i></i>
          <i></i>
          <i class="z-on"></i>
        
        </div> -->

      </div>
    </div>

  </div>
</template>

<script>

export default {
  name: 'cptItem',
  data () {
    return {}
  },
  components: {
  },
  props: {
    isFocused: Boolean,
    item: Object
  },
  methods: {

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