<template>
  <div class="">
    <div class="tab_navigation">
      <div class="navItem" @click="createHandleClick()" :class="{active:cur == 0}">
          <svg class="icon fontMore" aria-hidden="true">
              <use xlink:href="#iconchuangxinsheji"></use>
          </svg>
          <span>创新排行榜</span>
      </div>
      <div class="center_line"></div>
      <div class="navItem"  @click="vitalityHandleClick()" :class="{active:cur == 1}">
          <svg class="icon fontMore" aria-hidden="true">
              <use xlink:href="#iconiconzhouhuoyuedufenxi"></use>
          </svg>
          <span>活跃度排行</span>
      </div>
    </div>
    <div class="tab_container">
      <create-ranking :create-data="createArray" v-show="cur == 0"></create-ranking>
      <liveness-ranking :liveness-data = "livenessArray" @fatherMethod="vitalityHandleClick" v-show="cur == 1" ></liveness-ranking>
    </div>
  </div>
</template>

<script>
import 。。。。。。。
export default {
  name: 'HelloWorld',
  data () {
    return {
      cur: "", 
      page:"1", //初始化页码为1
      createArray:[], //创新排行榜
      livenessArray:[],//活跃度排行榜
      type: ""
    }
  },
  components:{。。。。。。},
  methods:{ 
    /**创新排行榜click调用初始化数据 */
    async createHandleClick(){
      this.cur = 0;
      let page = this.page;
      let res = await queryIdeaRankList(page,"10");
      this.createArray = res.data.list;
    },
    /**活跃度排行数据 */
    async vitalityHandleClick(type){
      if (type === undefined) {
        this.type = "M";
      } else {
        this.type = type;
      }
      this.cur = 1;
      let res = await queryVitalityRankList(this.page,"10",this.type);
      this.livenessArray = res.data.list;
    },
    /**页面初始化创新排行榜 */
    async init(page){ 
      let res = await queryIdeaRankList(page,"10");
      this.createArray = res.data.list;
    },
  },
  created(){
    this.init(this.page);
  },
}
</script>

/* 子组件createRanking /

<!-- 排行榜模块 -->
<template>
    <div class="ranking">
        <div class="createRanking">           
            <div class="tab_container">
                <table cellpadding="0" cellspacing="0">
                    <thead>
                        <tr>
                            <th>创新名称</th>
                            <th>提出人</th>
                            <th>总分</th>
                            <th>评分人数</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="(item,index) in createData" :key="index">
                            <td>{{item.ideaTitle}}</td>
                            <td>{{item.employeeName}}</td>
                            <td>{{item.sumGrade}}</td>
                            <td>{{item.ideaJoinNum}}</td>
                        </tr>
                    </tbody>
                </table>
                <Paginator @getPageNumber="getPageNumber" :pages='pages' v-if="pages > 1"></Paginator>
            </div>
        </div>
    </div>
</template>

<script>
import Paginator from '@/components/paginator'
export default {
    props: ["createData"],
    data () {
        return {
            pages:"1",
        };
    },
    methods: {
        getPageNumber(params){
            this.pages = params;
            this.init();
        },      
    },
    created(){
        console.log(this.createData)
    },
    components:{
        Paginator
    }
}
</script>

/* 子组件livenessRanking/

<!-- 排行榜模块 -->
<template>
    <div class="ranking">
        <div class="personRanking">
            <div class="navigation">
                <div v-for="(ele,index) in nav" :key="index" @click="plate=index;parentEvent($event)" :class="{plate_active:plate == index}">{{ele}}</div>
            </div>
            <div class="tab_container">
                <table cellpadding="0" cellspacing="0">
                    <thead>
                        <tr>
                            <th>排名</th>
                            <th v-html="th_data1">{{th_data1}}</th>
                            <th v-html="th_data2">{{th_data2}}</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="(item,index) in livenessData" :key="index">
                            <td>{{item.modelId ? item.modelId.substr(1,1) : ""}}</td>
                            <td>{{item.modelName}}</td>
                            <td>{{item.avgModelCredits}}</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    props: ["livenessData"],
    data () {
        return {
            nav:["模块","部门","个人"],
            plate: 0,
            th_data1:"模块",
            th_data2:"人均得分",
            pages:"1",
            type:"M",
        };
    },
    methods: {
        getPageNumber(params){
            this.pages = params;
            this.init();
        },
        parentEvent(e){    
            this.th_data1 = e.currentTarget.innerHTML;
            if (e.currentTarget.innerHTML === '个人') {
                this.th_data2 = "总分";
                this.type = "P";
                this.$emit("fatherMethod",this.type);
            } else if (e.currentTarget.innerHTML === '部门') {
                this.th_data2 = "人均得分";
                this.type = "O";
                this.$emit("fatherMethod",this.type);
            } else if (e.currentTarget.innerHTML === '模块') {
                this.th_data2 = "人均得分";
                this.type = "M";
                this.$emit("fatherMethod",this.type);
            }
        }
    },
    created(){
        console.log( this.livenessData)
    }
}
</script>