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

    <!-- 积分银行-积分排行组件 -->
    <div class="mw-cpt-score_rank"
         v-if="item.componentFrontId==='resi-functionList-score-rank'">
      <div class="d-cpt-wrap">
        <div class="d-cpt-title">积分排行榜</div>
        <div class="rank_title">
          <span class="rank_title_total">总排名</span>
          <span class="rank_title_week">本周排名</span>
          <span class="rank_title_month">本月排名</span>
        </div>
        <div class="list">
          <div class="item"
               :key="subindex"
               v-for="(subitem, subindex) in item.demoData.list">
            <div class="logo">
              <img v-if="subitem.ico"
                   :src="subitem.ico">
              <img v-if="subindex === 0"
                   src="@/assets/img/modules/wx-mini/index-set/page/score_rank_1.png">
              <img v-if="subindex === 1"
                   src="@/assets/img/modules/wx-mini/index-set/page/score_rank_2.png">
              <img v-if="subindex === 2"
                   src="@/assets/img/modules/wx-mini/index-set/page/score_rank_3.png">

              <span v-else>{{ subitem.subindex }}</span>
            </div>

            <div class="name">{{ subitem.name  }}</div>
            <div class="score">{{ subitem.score  }}</div>

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

    <!-- 党员积分排行组件 -->
    <div class="mw-cpt-party"
         v-else-if="item.componentFrontId==='resi-functionList-top-party'">
      <div class="d-cpt-wrap">
        <div class="d-cpt-title">党员积分排行榜</div>
        <div class="m-box">
          <div class="rank_title">
            <p class="rank_title_left">身边党员</p>
            <div class="red_line"></div>
            <p class="rank_title_right">社区党员</p>
          </div>
          <div class="rank_img_score">
            <div class="list">
              <!--:key,列表循环的唯一标识符 -->
              <div class="item"
                   :key="subindex"
                   v-for="(subitem, subindex) in item.demoData.list1">
                <div class="d-group-logo">
                  <div v-if="subindex === 0"
                       class="logo1"></div>
                  <div v-if="subindex === 1"
                       class="logo2"></div>
                  <div v-if="subindex === 2"
                       class="logo3"></div>
                </div>

                <div class="d-group-rank">
                  <span v-if="subindex===0"
                        class="rank_1">2</span>
                  <span v-if="subindex===1"
                        class="rank_2">1</span>
                  <span v-if="subindex===2"
                        class="rank_3">3</span>

                </div>

                <div class="d-group-imgback">
                  <div v-if="subindex === 0"
                       class="back_1"></div>
                  <div v-if="subindex === 1"
                       class="back_2"></div>
                  <div v-if="subindex === 2"
                       class="back_3"></div>
                </div>
                <div class="d-group-img">
                  <img v-if="subindex === 0"
                       class="img1"
                       src="../../assets/img/modules/wx-mini/index-set/page/girl.jpg">
                  <img v-if="subindex === 1"
                       class="img2"
                       src="../../assets/img/modules/wx-mini/index-set/page/duck.jpg">
                  <img v-if="subindex === 2"
                       class="img3"
                       src="../../assets/img/modules/wx-mini/index-set/page/girl.jpg">
                </div>

                <div class="d-group-score">
                  <span v-if="subindex===0"
                        class="score_1">{{subitem.title1}}</span>
                  <span v-if="subindex===1"
                        class="score_2">{{subitem.title2}}</span>
                  <span v-if="subindex===2"
                        class="score_3">{{subitem.title3}}</span>
                </div>

                <div class="d-group-name">

                  <span v-if="subindex===0"
                        class="name_1">{{subitem.info1}}</span>
                  <span v-if="subindex===1"
                        class="name_2">{{subitem.info2}}</span>
                  <span v-if="subindex===2"
                        class="name_3">{{subitem.info3}}</span>

                </div>
              </div>
            </div>
          </div>
          <!--更多-标题-->
          <div class="list-more">
            <ul class="list1">
              <li class="list_1">排名</li>
              <li class="list_1">头像</li>
              <li class="list_1">姓名</li>
              <li class="list_2">当月积分</li>

            </ul>
          </div>

          <!--更多排名-->
          <div class="rank_more_score">
            <div class="list">
              <div class="item"
                   :key="subindex"
                   v-for="(subitem,subindex) in item.demoData.list2">
                <div class="d-group-rank">
                  <span>{{subitem.rank}}</span>
                </div>
                <div class="d-group-img">
                  <img v-if="subindex===1"
                       src="../../assets/img/modules/wx-mini/index-set/page/good.jpg"
                       class="list3_img1">
                  <img v-if="subindex===2"
                       src="../../assets/img/modules/wx-mini/index-set/page/girl.jpg"
                       class="list3_img1">
                  <img v-if="subindex===3"
                       src="../../assets/img/modules/wx-mini/index-set/page/duck.jpg"
                       class="list3_img1">
                  <img v-if="subindex===4"
                       src="../../assets/img/modules/wx-mini/index-set/page/duck.jpg"
                       class="list3_img1">
                </div>
                <div class="d-group-name">
                  <span>{{subitem.name}}</span>
                </div>
                <div class="d-group-score">
                  <span>{{subitem.score}}</span>
                </div>
              </div>
            </div>

          </div>

          <div class="line"></div>
          <span class="list6">查看更多</span>

        </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/index-set.scss"></style>
