// 投诉直通车 & 应急报修
<template>
  <div class="box">
    <div class="title">
      {{moduletitle}}
      <div>
        <p :class="`${active=='month'?'active':''}`" @click="changeRank('month')">月排行</p>
        <p :class="`${active=='year'?'active':''}`" @click="changeRank('year')">年排行</p>
        <p :class="`${active=='total'?'active':''}`" @click="changeRank('total')">总排行</p>
        <!-- <p @click="toMore">···</p> -->
      </div>
    </div>
    <div class="content" >
      <div class="list" v-for="(item,index) in list" :key="index">
        <div class="left">
          <span :style="`background:${index>2?'rgb(229,230,231)':'#000'};color:${index>2?'rgb(96,97,98)':'#FFF'};`">{{++index}}</span>
          <span>{{item.complaintType}}</span>
        </div>
        <!-- <div class="danwei">{{item.num}} 件</div> -->
      </div>
    </div>
    <!-- <div class="content" v-else style="">
       <p> 暂无数据...   </p>
    </div> -->
  </div>
</template>
 
<script >
import {mapActions, mapState} from 'vuex'

export default {
  props: {
    moduletitle: {
      type: String,
      default: '',
    },
  },
  data(){
    return{
      active: 'year',
      list: []
    }
  },
  created(){
    if (this.moduletitle == '投诉直通车') {
      this.get_ComplaintsTrain(this.active).then(res => {
        this.list = this.$com.confirm(res, 'data.content', []).slice(0, 5)
      })
    }

    if (this.moduletitle == '投诉问题') {
      this.getList()
    }

    if (this.moduletitle == '报修') { // 没接口  假数据
      this.list =[
        {
          complaintType: '供电供水设备经常出现故障',
          _id: '高空坠物隐患',
        },
        {
          complaintType: '日常运作出现状况',
          _id: '高空坠物隐患',
        },
        {
          complaintType: '各种分摊费和特约维修费',
          _id: '高空坠物隐患',
        },
      ]
    }

  },
  methods: {
    ...mapActions([
      'get_ComplaintsTrain'
    ]),
    changeRank(item){
      this.active = item
      if (this.moduletitle == '投诉直通车') {
        this.get_ComplaintsTrain(this.active).then(res => {
          this.list = this.$com.confirm(res, 'data.content', []).slice(0, 5)
        })
      }
      if (this.moduletitle == '投诉问题') {
        this.getList()
      }
      if (this.moduletitle == '报修') { // 没接口  假数据
        this.list =[
          {
            complaintType: '高空坠物隐患',
            _id: '高空坠物隐患',
          },
          {
            complaintType: '日常运作出现状况',
            _id: '高空坠物隐患',
          },
          {
            complaintType: '各种分摊费和特约维修费',
            _id: '高空坠物隐患',
          },

        ]
      }
    },
    getList(){
      const date = new Date()
      const year = date.getFullYear()
      const month = date.getMonth()+1 
      const params = {}
      if(this.active == 'month'){
        params.type = 'M' 
        params.tsMonthly = year + '' + (String(month).length==1?'-0'+month:'-'+month)
      }else if(this.active == 'year'){
        params.type = 'Y' 
        params.dateTime = year + ''
      }else if(this.active == 'total'){
        params.type = 'S' 
      }  
      params.tsNum_desc = 'desc'
      params.pageNo = 1
      params.pageSize = 8
      this.$ajax.get({
        url: this.$api.GET_TOUSUQUESTION_LIST,
        params: params
      }).then(res => {
        if (res.code === '200') {
          this.list = this.$com.confirm(res, 'data.content.content', [])
        }
      })
    },
    toMore(){
      switch (this.moduletitle) {
      case '投诉直通车':
        this.$router.push({path: '/pudong/complaintPath/complaintList'})
          
        break
      
      default:
        break
      }
      
    },
  }

}
</script>

<style scoped>
.box{
  background: #fff; 
  display: flex;
  flex-direction: column;
}
.box .title{
  height: 35px;
  padding-left: 20px;
  line-height: 35px;
  font-size: 15px;
  font-weight: 550;
  border-bottom: 1px solid #ccc;
  position: relative;
}
.box .title >div{
  position: absolute;
  display: flex;
  top: 0;
  right:12px;
  height: 30px;
}
.box .title >div p{
  margin-right:10px;
  color: #818283;
  cursor: pointer;
}
.box .title >div .active{
  color: rgb(68,136,245);
}
/* .box .title >div p:last-child{
  color: rgb(68,136,245);
  font-weight: 800;
  font-size: 20px;
  margin: 0;
}  */
.box .content{
  padding:15px;
  flex:1;
  display: flex;
  min-height:200px;
  flex-direction: column;
}
.box .content .list{
  display: flex;
  justify-content: space-between;
  height: 22%;
  /* cursor: pointer; */
  color: rgb(96,97,98);
  align-items: center;

}
.box .content .list .left{
  flex: 1;
  text-overflow:ellipsis;
  white-space:nowrap; 
  overflow:hidden;
  font-size: 12px;

}
.box .content .list .left span{
  font-size: 14px;

}

.box .content .list .left span:first-child{
  display: inline-block;
  width: 18px;
  height: 18px;
  font-size: 14px;
  line-height: 18px;
  border-radius: 50%;
  text-align: center;
  margin-right: 12px;
  flex: 1;
}

</style>