<template>
  <div>
    <h2 class="title">班主任业绩排行</h2>
    <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
      <el-tab-pane label="业绩总排行" name="first">
        <el-form ref="searchFirstFrom" inline :model="searchFirstFrom" label-width="100px">
          <el-form-item label="起止日期">
            <el-date-picker
              v-model="searchFirstFrom.dateValue"
              unlink-panels
              type="daterange"
              :picker-options="{shortcuts:[today,yesterday,last7Day,last30Day]}"
              value-format="yyyy-MM-dd"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              @change="searchFirstPage">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="">
            <el-button type="primary" @click="searchFirstPage()">
              搜索
            </el-button>
          </el-form-item>
        </el-form>
        <el-table
          :data="firstList"
          style="width: 100%">
          <el-table-column
            label="班主任姓名"
          >
          <template slot-scope="scope">
            <el-button type="text" @click="nameClick(scope.row,searchFirstFrom.dateValue)">
              {{scope.row.teacher_name}}
              </el-button>
          </template>
          </el-table-column>
          <el-table-column
            prop="total_money"
            label="销售额" :sort-method="sortMoney" :sortable="true"
          >
          </el-table-column>
          <el-table-column
            prop="three_month"
            label="季课" sortable
          >
          </el-table-column>
          <el-table-column
            prop="one_year"
            label="年课" sortable
          >
          </el-table-column>
          <el-table-column
            prop="two_year"
            label="2年课" sortable
          >
          </el-table-column>
          <el-table-column
            prop="one_to_two"
            label="续课" sortable
          >
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="业绩按天排行" name="second">
        <el-form ref="searchSecondFrom" inline :model="searchSecondFrom" label-width="100px">
          <el-form-item label="起止日期">
            <el-date-picker
              v-model="searchSecondFrom.dateValue"
              unlink-panels
              type="daterange"
              value-format="yyyy-MM-dd"
              :picker-options="{shortcuts:[today,yesterday,last7Day,last30Day]}"
              range-separator="至"
              :shortcuts="[]"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              @change="searchSecondPage">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="">
            <el-button type="primary" @click="searchSecondPage()">
              搜索
            </el-button>
          </el-form-item>
        </el-form>
        <el-table
          :data="secondList"
          style="width: 100%">
          <el-table-column
            prop="cur_date"
            label="时间" sortable
          >
          </el-table-column>
          <el-table-column
            label="班主任姓名"
          >
           <template slot-scope="scope">
            <el-button type="text" @click="nameClick(scope.row)">
              {{scope.row.teacher_name}}
              </el-button>
          </template>
          </el-table-column>
          <el-table-column
            prop="total_money"
            label="销售额"  :sort-method="sortMoney" :sortable="true"
          >
          </el-table-column>
          <el-table-column
            prop="three_month"
            label="季课" sortable
          >
          </el-table-column>
          <el-table-column
            prop="one_year"
            label="年课" sortable
          >
          </el-table-column>
          <el-table-column
            prop="two_year"
            label="2年课" sortable
          >
          </el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>
    <class-dialog :dialogObj="dialogObj"></class-dialog>
  </div>
</template>

<script>
    import {getTeacherRankListApi,getTeacherDayRankListApi} from "../../service/api";
     import classDialog from './dialog'
    export default {
      name: "index",
      data(){
        return {
          activeName: 'first',
          firstList: [],
          secondList: [],
          searchFirstFrom: {
            dateValue:[]
          },
          today:{
            text:'今天',
            onClick:()=>{
              this.searchFirstFrom.dateValue = [this.formatTime(new Date()),this.formatTime(new Date())];
              this.searchSecondFrom.dateValue = [this.formatTime(new Date()),this.formatTime(new Date())]
            }
          },
          yesterday:{
            text:'昨天',
            onClick:()=>{
              let preDate = this.formatTime(new Date(new Date().getTime() - 24*60*60*1000));
              this.searchFirstFrom.dateValue = [preDate,preDate];
              this.searchSecondFrom.dateValue = [preDate,preDate]
            }
          },
          last7Day:{
            text:'过去7天',
            onClick:()=>{
              let preDate = this.formatTime(new Date(new Date().getTime() - 7*24*60*60*1000));
              this.searchFirstFrom.dateValue = [preDate,this.formatTime(new Date())];
              this.searchSecondFrom.dateValue = [preDate,this.formatTime(new Date())]
            }
          },
          last30Day:{
            text:'过去30天',
            onClick:()=>{
              let preDate = this.formatTime(new Date(new Date().getTime() - 30*24*60*60*1000));
              this.searchFirstFrom.dateValue = [preDate,this.formatTime(new Date())];
              this.searchSecondFrom.dateValue = [preDate,this.formatTime(new Date())]
            }
          },
          searchSecondFrom:{
            dateValue:[]
          },
           dialogObj:{
            show:false,
            title:'售卖课程',
            teacher_id:"",
            timeValue:[],
        },
        }
      },
       components:{
      classDialog,
    },
      mounted(){
        this.defaultTime();
        this.searchFirstPage();
      },
      methods: {
        sortMoney(a,b){
         return Number(a.total_money) - Number(b.total_money)
        },
        handleClick(tab) {
          let _name = tab.name
          if (_name === 'first') {
            this.searchFirstPage();
          } else {
            this.searchSecondPage();
          }
        },
        searchFirstPage(){
          let json = {}
          if(this.searchFirstFrom.dateValue){
            json = {
              start_at:this.searchFirstFrom.dateValue[0],
              end_at:this.searchFirstFrom.dateValue[1]
            };
          }
          getTeacherRankListApi(json).then(res=>{
            this.firstList = res;
          })
        },
        searchSecondPage(){
          let json = {}
          if(this.searchSecondFrom.dateValue){
            json = {
              start_at:this.searchSecondFrom.dateValue[0],
              end_at:this.searchSecondFrom.dateValue[1]
            };
          }
          getTeacherDayRankListApi(json).then(res=>{
            this.secondList = res;
          })
        },
        formatTime(date){
          let year = date.getFullYear();
          let Month = date.getMonth()+1;
          if(Month < 10){
            Month = `0${Month}`
          }
          let Day = date.getDate();
          if(Day<10)Day = `0${Day}`;
          return `${year}-${Month}-${Day}`;
        },
        defaultTime(){
        let date = new Date();
        let year = date.getFullYear();
        let Month = date.getMonth()+1;
        if(Month < 10){
          Month = `0${Month}`
        }
        let Day = date.getDate();
        if(Day<10)Day = `0${Day}`
        let star = `${year}-${Month}-01`;
        let end = `${year}-${Month}-${Day}`
        this.searchFirstFrom.dateValue = [star,end]
        this.searchSecondFrom.dateValue = [star,end]
      },
      nameClick(val,dataTime){
        this.dialogObj.teacher_id=val.tid;
        if(dataTime != undefined){
           this.dialogObj.timeValue=dataTime
        }else{
          this.dialogObj.timeValue=[val.cur_date,val.cur_date]
        }
          this.dialogObj.show=true;
      },
      }
    }
</script>

<style scoped>
  .title {
    font-size: 26px;
    font-weight: 400;
    line-height: 1;
    margin: 40px;
  }
</style>