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

    <!-- 积分银行-积分排行组件 -->
    <div class="score_rank"
         v-if="item.componentFrontId==='resi-functionList-score-rank'">
      <div class="score_rank_content">
        <div class="title">积分排名
          <div class="score_more">查看更多</div>
        </div>

        <div class="rank_tabs">
          <span class="tabs_1">总排名</span>
          <span class="tabs_2">本周排名</span>
          <span class="tabs_2">本月排名</span>
        </div>
        <div class="rank_box">
          <div class="list_title">
            <div>排名</div>
            <div>头像</div>
            <div>姓名</div>
            <div>当月积分</div>
          </div>

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

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

    <!-- 积分银行-积分排行2 -->
    <div class="score_rank"
         v-if="item.componentFrontId==='resi-functionList-score-rank-2'">
      <div class="score_rank_content">
        <div class="title">积分排名
          <div class="score_more">查看更多</div>
        </div>

        <div class="single">
          <div class="single_bc">

            <div class="single_name">
              <img src="../../assets/img/modules/wx-mini/index-set/page/duck.jpg">
              <span>{{item.demoData.info1.title1}}</span>
            </div>

            <div class="single_rank">
              <div class="single_rank_bc bc_left">
                <div class="score">
                  <span class="span_title">No.</span>
                  <span class="span_no">{{item.demoData.info1.no1}}</span>
                </div>
                <div class="rank2_row2">支部排名</div>
              </div>
              <div class="single_rank_bc bc_right">
                <div class="score">
                  <span class="span_title">No.</span>
                  <span class="span_no">{{item.demoData.info1.no2}}</span>
                </div>
                <div class="rank2_row2">平台排名</div>
              </div>
            </div>
          </div>
          <div class="single_bc">
            <div class="single_name">

              <span>{{item.demoData.info2.title1}}</span>
            </div>

            <div class="single_rank">
              <div class="single_rank_bc bc_left">
                <div class="score">
                  <span class="span_title">No.</span>
                  <span class="span_no">{{item.demoData.info1.no1}}</span>
                </div>
                <div class="rank2_row2">本区排名</div>
              </div>
              <div class="single_rank_bc bc_right">
                <div class="score">
                  <span class="span_title">No.</span>
                  <span class="span_no">{{item.demoData.info1.no2}}</span>
                </div>
                <div class="rank2_row2">平台排名</div>
              </div>
            </div>
          </div>
        </div>

        <div class="rank_tabs">
          <span class="tabs_1">身边党员</span>
          <span class="tabs_2">社区党员</span>
          <span class="tabs_2">平台党员</span>
        </div>
        <div class="rank_box">
          <div class="list_title">
            <div>排名</div>
            <div>头像</div>
            <div>姓名</div>
            <div>当月积分</div>
          </div>

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

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

    <!-- 党员积分排行组件 -->
    <div class="score_party"
         v-else-if="item.componentFrontId==='resi-functionList-top-party'">
      <div class="score_party_content">
        <div class="title">党员积分排名</div>
        <div class="m-box">
          <div class="rank_tabs">
            <p class="rank_title_left">身边党员</p>
            <div class="red_line"></div>
            <p class="rank_title_right">社区党员</p>
          </div>

          <div class="rank_img_score">
            <!--: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 class="rank_box">
            <div class="list_title">
              <div>排名</div>
              <div>头像</div>
              <div>姓名</div>
              <div>当月积分</div>
            </div>

            <div class="score_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===0"
                       src="../../assets/img/modules/wx-mini/index-set/page/good.jpg"
                       class="list3_img1">
                  <img v-if="subindex===1"
                       src="../../assets/img/modules/wx-mini/index-set/page/girl.jpg"
                       class="list3_img1">
                  <img v-if="subindex===2"
                       src="../../assets/img/modules/wx-mini/index-set/page/duck.jpg"
                       class="list3_img1">
                  <img v-if="subindex===3"
                       src="../../assets/img/modules/wx-mini/index-set/page/good.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>
                  <span>{{subitem.name}}</span>
                </div>
                <div>
                  <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
  },
  mounted () {
    console.log(this.item)
  },
  methods: {

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