<template>
  <!--  排名  -->
  <el-card :body-style="{ padding: '0 0 20px 0' }" :style="{height:height}" shadow="hover" class="ranking">
    <el-button type="text" class="btn_more" @click="btn_more">查看更多</el-button>
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="话务排行榜" name="first">
        <div class="tab_body">
          <el-table v-loading="loading" :data="callData" stripe style="width: 100%">
            <el-table-column width="80" align="center">
              <template slot-scope="scope">
                <span :class="{reds:scope.row.rank===1, greens:scope.row.rank===2, blues:scope.row.rank===3}" class="sort">{{ scope.row.rank }}</span>
              </template>
            </el-table-column>
            <el-table-column label="工号" align="left" width="">
              <template slot-scope="scope">
                <span :class="{reds:scope.row.rank===1, greens:scope.row.rank===2, blues:scope.row.rank===3}">{{ scope.row.usercode }}</span>
              </template>
            </el-table-column>
            <el-table-column label="姓名" align="left" width="">
              <template slot-scope="scope">
                <span :class="{reds:scope.row.rank===1, greens:scope.row.rank===2, blues:scope.row.rank===3}">{{ scope.row.username }}</span>
              </template>
            </el-table-column>
            <el-table-column label="话务量" align="left">
              <template slot-scope="scope">
                <span :class="{reds:scope.row.rank===1, greens:scope.row.rank===2, blues:scope.row.rank===3}">{{ scope.row.count }}</span>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-tab-pane>
      <el-tab-pane label="工单排行榜" name="second">
        <div class="tab_body">
          <el-table v-loading="loading1" :data="orderDatas" stripe style="width: 100%">
            <el-table-column width="80" align="center">
              <template slot-scope="scope">
                <span :class="{reds:scope.row.rank===1, greens:scope.row.rank===2, blues:scope.row.rank===3}" class="sort">{{ scope.row.rank }}</span>
              </template>
            </el-table-column>
            <el-table-column label="工号" align="left" width="">
              <template slot-scope="scope">
                <span :class="{reds:scope.row.rank===1, greens:scope.row.rank===2, blues:scope.row.rank===3}">{{ scope.row.usercode }}</span>
              </template>
            </el-table-column>
            <el-table-column label="姓名" align="left" width="">
              <template slot-scope="scope">
                <span :class="{reds:scope.row.rank===1, greens:scope.row.rank===2, blues:scope.row.rank===3}">{{ scope.row.username }}</span>
              </template>
            </el-table-column>
            <el-table-column label="工单量" align="left">
              <template slot-scope="scope">
                <span :class="{reds:scope.row.rank===1, greens:scope.row.rank===2, blues:scope.row.rank===3}">{{ scope.row.count }}</span>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-tab-pane>
    </el-tabs>
  </el-card>
</template>

<script>
import { getOrderLists } from '@/api/dashboard/orderDatas'
import { getCallLists } from '@/api/dashboard/callDatas'
import router from '@/router'

export default {
  name: 'Ranking',
  props: {
    height: {
      type: String,
      default: '480px'
    }
  },
  data() {
    return {
      activeName: 'first',
      loading: false,
      loading1: false,
      callData: [],
      orderDatas: []
    }
  },
  created() {
    this.getCallDatas()
  },
  methods: {
    // 获取话务排行数据
    getCallDatas() {
      this.loading = true
      return new Promise(resolve => {
        const parmas = {
          datetype: 0, //	是	int	0全部1当日2本周3本月4本年
          top: 0 //	否	int	0全部，其他为前几名
        }
        // 这个接口返回的数据 处理了 (有通话记录没有工号的数据)
        getCallLists(parmas).then(response => {
          this.loading = false
          if (response.state.toLowerCase() === 'success') {
            this.callData = response.data
          }
        })
        resolve()
      })
    },
    // 获取工单排行数据
    getOrderDatas() {
      this.loading1 = true
      return new Promise(resolve => {
        const parmas = {
          datetype: 0, //	是	int	0全部1当日2本周3本月4本年
          top: 0//	否	int	0全部，其他为前几名
        }
        getOrderLists(parmas).then(response => {
          this.loading1 = false
          if (response.state.toLowerCase() === 'success') {
            this.orderDatas = response.data
          }
        })
        resolve()
      })
    },
    handleClick(tab, event) {
      switch (tab.name) {
        case 'first':
          this.getCallDatas()
          break
        case 'second':
          this.getOrderDatas()
          break
      }
    },
    btn_more() {
      switch (this.activeName) {
        case 'first':
          // router.push({ name: 'callRecord', params: { callid: inComingCallId, telInNumber: inComingNumber}});
          router.push({ name: 'callRecord' })
          break
        case 'second':
          router.push({ name: 'orderSearch' })
          break
      }
    },
    refreshData(activeName) {
      switch (activeName) {
        case 'first':
          this.getCallDatas()
          break
        case 'second':
          this.getOrderDatas()
          break
      }
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss">
	.ranking {
		.el-tabs__header {
			padding: 0px 10px;
			background-color: #f5f5f6;
			margin: 0;

			.el-tabs__item {
				font-size: 14px;
				height: 40px;
				line-height: 40px;
			}
		}

		.el-table {
			margin: 0;
			height: 430px;
			overflow: hidden;
		}

		.el-table td,
		.el-table th.is-leaf {
			border-bottom: 1px solid #f0f5fa;
		}

		.el-table--striped .el-table__body tr.el-table__row--striped td {
			background: #f7fbff;
		}

		.el-table th {
			padding: 3px 0;
			background-color: #f7fbff;
		}

		.el-table .cell {
			color: #999999;
		}

	}
</style>
<style rel="stylesheet/scss" lang="scss" scoped>
	.ranking {
		width: 100%;
		position: relative;
		overflow: inherit;

		.btn_more {
			position: absolute;
			right: 10px;
			top: 4px;
			z-index: 2;
		}

		.sort{
			display: inline-block;
			&::before{
				content: "";
				width: 22px;
				height: 22px;
				border-radius: 50%;
				border: 1px solid transparent;
				display: inline-block;
				position: absolute;
				left: 29px;
			}
		}
		.reds{
			color: #d97d82;
			&::before{
				border-color: #d97d82;
			}
		}
		.greens{
			color: #2ec7c9;
			&::before{
				border-color: #2ec7c9;
			}
		}
		.blues{
			color: #5ab1ef;
			&::before{
				border-color: #5ab1ef;
			}
		}

	}
</style>
