<style>
  .guidPerformance .backBtn {
    float: right;
    margin: 30px 10px 0 0;
  }

  .guidPerformance .listSpan span {
    display: inline-block;
    margin: 30px 0 0 10px;
    font-family: PingFangSC-Semibold, sans-serif;
    font-size: 14px;
    color: #333333;
  }

  .guidPerformance .statistical {
    width: 100%;
  }

  .guidPerformance .dataList li {
    float: left;
    width: 100px;
    height: 40px;
    text-align: center;
    color: #666666;
    background-color: #f1f1f1;
    margin-top: 0;
    line-height: 40px;
    font-size: 14px;
    position: relative;
    cursor: pointer;
  }

  .guidPerformance .dataList li:first-child {
    border-top-left-radius: 4px;
  }

  .guidPerformance .Day_active {
    background-color: #fff !important;
    color: #000 !important;
  }

  .guidPerformance .Day_active i {
    display: inline-block;
    width: 35px;
    height: 2px;
    background-color: #e95252;
    position: absolute;
    bottom: 0;
    left: 35px;
  }

  .guidPerformance .chartsMap {
    width: 100%;
    height: 500px;
    background-color: #fff;
    padding-top: 50px;
  }

  .guidPerformance .mainLeftdiv {
    margin-top: 20px;
    float: left;
  }

  .guidPerformance .leftTop {
    width: 1150px;
    height: 360px;
    border: 1px solid #E6E6E6;
    background-color: #fff;
    position: relative;
    border-radius: 4px;
    margin-bottom: 10px;
  }

  .guidPerformance .dataList {
    position: absolute;
    top: 0;
    left: 0;
  }

  .guidPerformance .leftBottom {
    width: 100%;
  }

  .guidPerformance .bottomList {
    float: left;
    width: 500px;
    height: 230px;
    border: 1px solid #E6E6E6;
    border-radius: 4px;
    margin: 0 10px 10px 0;
    background-color: #fff;
    padding: 0 20px;
  }

  .guidPerformance .bottomList:last-child {
    margin-right: 0;
  }

  .guidPerformance .rightDiv {
    width: 300px;
    height: 600px;
    border: 1px solid #E6E6E6;
    border-radius: 4px;
    background-color: #fff;
    float: left;
    margin: 20px 0 0 10px
  }

  .guidPerformance .ChampionsLeague {
    width: 100%;
    height: 200px;
  }

  .guidPerformance .championList {
    float: left;
    width: 265px;
    position: relative;
    text-align: center;
    margin-right: 90px;
  }

  .guidPerformance .championList:last-child {
    margin-right: 0;
  }

  .guidPerformance .runnderUp {
    width: 118px;
    height: 118px;
    border-radius: 50%;
    border: 3px solid #9A9A9A;
    margin: 80px 0 0 80px;
  }

  .guidPerformance .championName {
    color: #333;
    font-size: 19px;
    font-family: PingFangSC-Semibold, sans-serif;
    margin: 20px 0 5px 0;
  }

  .guidPerformance .championMoney {
    color: #FE9C02;
    font-size: 19px;
    font-family: PingFangSC-Semibold, sans-serif;
  }

  .guidPerformance .chamPionUp img,
  .runnderUp img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
  }

  .guidPerformance .yajun {
    position: absolute;
    top: 50px;
    left: 103px;
  }

  .guidPerformance .piaodai2 {
    position: absolute;
    left: 50px;
    top: 151px;
  }

  .guidPerformance .chamPionUp {
    width: 160px;
    height: 160px;
    border-radius: 50%;
    border: 3px solid #FFD133;
    margin: 50px 0 0 70px;
  }

  .guidPerformance .guanjun {
    position: absolute;
    top: 10px;
    left: 100px;
  }

  .guidPerformance .piao1 {
    position: absolute;
    left: 7px;
    top: 138px;
  }

  .guidPerformance .guanName {
    font-size: 28px;
    color: #333;
    font-family: PingFangSC-Semibold, sans-serif;
    margin-top: 10px;
  }

  .guidPerformance .guanMoney {
    font-size: 28px;
    color: #E95252;
    font-family: PingFangSC-Semibold, sans-serif;
  }

  .guidPerformance .piao3 {
    border-color: #D97D03;
  }

  .guidPerformance .btLittle {
    width: 100%;
    height: 57px;
    border-bottom: 1px solid #F6F6F6;
    position: relative;
    line-height: 57px;
  }

  .guidPerformance .cmoney {
    color: #7BC877;
  }

  .guidPerformance ._index {
    position: absolute;
    left: -20px;
    top: 16px;
    width: 40px;
    height: 24px;
    line-height: 24px;
    font-size: 12px;
    text-align: center;
    color: #fff;
    border-top-right-radius: 12px;
    border-bottom-right-radius: 12px;
    background-color: #E95252;
  }

  .guidPerformance .HeadPortrait {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    float: left;
    margin: 10px 20px 0 0;
  }

  .guidPerformance .HeadPortrait img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
  }

  .guidPerformance .peopleInfo {
    margin-left: 50px;
    font-size: 12px;
  }

  .guidPerformance .peopleMoney {
    float: right;
    color: #FE9C02;
    font-size: 14px;
    font-family: PingFangSC-Semibold, sans-serif;
  }

  .guidPerformance .tweleindex {
    float: left;
    margin-left: 10px;
    color: #999999;
    font-size: 14px;
    font-family: PingFangSC-Semibold, sans-serif;
  }

  .guidPerformance .TweleEx {
    float: right;
    color: #333333;
    font-size: 14px;
    margin-right: 20px;
    font-family: PingFangSC-Semibold, sans-serif;
  }

  .guidPerformance ._btTitle {
    width: 100%;
    height: 66px;
    border-bottom: 1px solid #F6F6F6;
    line-height: 66px;
  }

  .guidPerformance .TW {
    margin: 14px 20px 0 0;
  }

  .guidPerformance ._btTitle:last-child {
    border-bottom: 0;
  }

  .leaderTousuTable {
    border: 1px solid #E6E6E6;
    float: left;
    width: 226px;
    margin-top: 20px;
    border-collapse: collapse;
    color: #666666;
  }

  .leaderTousuTable tr {
    background: #fff;
    text-align: center;
    height: 40px;
  }

  .leaderTousuTable tr:nth-child(2n+1) {
    background: #fafafa;
  }

  .leaderTousuTable tr td {
    font-size: 14px;
    border: 1px solid #E5E5E5;
  }

  .leaderHeadTd td {
    background-color: #f1f1f1;
  }
  .mainLeftdiv .singeRowTable img{
    border-radius: 50%;
  }
  .EmphoName{
    position: relative;
    top:-5px;
  }
  .mainLeftdiv .leftTop .el-tabs__nav-scroll{
    padding-left:20px;
  }
</style>
<template>
  <div class='flexOne guidPerformance'>
    <div class="query-box">
      <ul>
        <li>
          <span>
            <em>{{$t('system.query_workType')}}</em>
            <el-select v-model="msg.QLeaderType" :placeholder="$t('system.ph_choice')">
              <el-option :label="$t('system.ph_buxian')" :value='0'></el-option>
              <el-option v-for="item in workTypeList" :key="item.Key" :label="item.Key" :value="item.Value">
              </el-option>
            </el-select>
          </span>
        </li>
        <li>
          <span v-if="msg.Type==3||msg.Type==6">
            <em>{{$t('ground.nianfen')}}</em>
            <el-date-picker v-model="msg.MonthStr" type="year" value-format="yyyy"
              :placeholder="$t('ground.xuanzenian')">
            </el-date-picker>
          </span>
          <span v-else-if="msg.Type==2">
            <em>{{$t("ground.yuefen")}}</em>
            <el-date-picker v-model="msg.MonthStr2" type="month" value-format="yyyy-MM"
              :placeholder="$t('ground.xuanzeyue')">
            </el-date-picker>
          </span>
          <span v-else>
            <em>{{$t('ground.shijian')}}</em>
            <el-select v-model="msg.Year">
              <el-option :key="-1" :label="$t('advmanager.v_all')" :value="-1"></el-option>
              <el-option v-for="item in yearList" :key="item" :label="item" :value="item"></el-option>
            </el-select>
            <el-select v-model="msg.Month" class="w90">
              <el-option :key="-1" :label="$t('advmanager.v_all')" :value="-1"></el-option>
              <el-option v-for="item in monthList" :key="item" :label="item" :value="item"></el-option>
            </el-select>
          </span>
        </li>
        <li>
          <span>
            <em>{{$t('ground.gwd')}}</em>
            <el-select v-model="msg.ShoppingID" filterable :placeholder="$t('system.ph_choice')">
              <el-option :label="$t('pub.pleaseSel')" :value='0' :key="0"></el-option>
              <el-option v-for="item in ShopList" :key="item.ID" :label="item.Name" :value="item.ID"></el-option>
            </el-select>
          </span>
        </li>
        <li>
          <input type="button" class="hollowFixedBtn" :value="$t('pub.searchBtn')" @click="getStatis()" />
        </li>
      </ul>
    </div>
    <div class="statistical clearfix" style="display:block" v-loading="loading">
      <div class="mainLeftdiv">
        <div class="leftTop">
          <el-tabs v-model="activeName" @tab-click="getSwitch">
            <el-tab-pane v-for="title in tabList" :label="title.Name" :name="title.Type" :key="title.Type">
            </el-tab-pane>
          </el-tabs>
          <div class="ChampionsLeague clearfix">
            <table class="singeRowTable" style="margin-top:5px;">
              <tr>
                <th width="100">{{$t('hotel.hotel_SerialNumber')}}</th>
                <th width="100">{{$t('system.query_name')}}</th>
                <th width="200">
                  {{getTableTitleName(msg.Type)}}
                </th>
              </tr>
              <tr v-for="(item,index) in DataList" :key="index">
                <td>
                  <div style="width:45px;text-align:left;margin:auto;">
                    {{index+1}}
                    <template v-if="index+1==1">
                      <img style="width:25px;" src="../../assets/img/chamPion.png" alt=""/>
                    </template>
                    <template v-if="index+1==2">
                      <img style="width:25px;" src="../../assets/img/runnerUp.png" alt=""/>
                    </template>
                    <template v-if="index+1==3">
                      <img style="width:25px;" src="../../assets/img/bronze.png" alt=""/>
                    </template>
                    <template v-else>
                      <div style="width:25px;"></div>
                    </template>
                  </div>
                </td>
                <td>
                  <img v-if="!item.EmPhoto" src="../../assets/img/default_head_img.jpg" style="width:20px;height:20px;" />
                  <img v-else :src="item.EmPhoto" :onerror='defaultImg' style="width:20px;heigth:20px;" />
                  <span class="EmphoName">{{item.Name}}</span>
                </td>
                <td>
                  {{item.LeaderExtract}}
                </td>
              </tr>
            </table>
          </div>
        </div>

      </div>
    </div>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        msg: {
          pageIndex: 1,
          pageSize: 10,
          Type: 2,
          MonthStr: "",
          MonthStr2: '',
          //领队类型
          QLeaderType: 0,
          Year: 0,
          Month: 0,
          ShoppingID: 0, //购物店编号
        },
        //工作类型
        workTypeList: [],
        DataList: [],
        //购物店名称
        ShopList: [],
        monthList: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
        yearList: [],
        loading: false,
        defaultImg: 'this.src="' + require('../../assets/img/default_head_img.jpg') + '"',
        activeName: '2',
        tabList: [{
            Name: "月榜",
            Type: "2",
            titleName: "购物总金额"
          },
          {
            Name: "年榜",
            Type: "3",
            titleName: "购物总金额"
          },
          {
            Name: "总榜",
            Type: "6",
            titleName: "购物总金额"
          },
          {
            Name: "人均",
            Type: "4",
            titleName: "人均购物金额"
          },
          {
            Name: "回佣人均",
            Type: "5",
            titleName: "回佣人均金额"
          },
          {
            Name: "人均低于1W",
            Type: "7",
            titleName: "回佣人均"
          },
          {
            Name: "带团次数",
            Type: "8",
            titleName: "带团次数"
          },
          {
            Name: "自费总金额",
            Type: "9",
            titleName: "自费总金额"
          },
          {
            Name: "自费人均",
            Type: "10",
            titleName: "自费人均"
          },
          {
            Name: "自费次数",
            Type: "11",
            titleName: "自费次数"
          },
          {
            Name: "投诉次数",
            Type: "12",
            titleName: "投诉次数"
          },
          {
            Name: "意见调查表缺少张数",
            Type: "13",
            titleName: "意见调查表缺少张数",
          },
        ],
      };
    },
    methods: {
      getTableTitleName(type) {
        var str="";
        this.tabList.forEach(item => {
          if (Number(item.Type) == type) {
            str = item.titleName;
          }
        })
        return str;
      },
      getStatis() {
        this.loading = true;
        let msg = {
          Type: this.msg.Type,
          QLeaderType: this.msg.QLeaderType,
          QMonthStr: this.msg.MonthStr,
          ShoppingID: this.msg.ShoppingID
        };
        if (msg.Type == 2) {
          msg.QMonthStr = this.msg.MonthStr2;
        }
        if (msg.Type != 2 && msg.Type != 3 && msg.Type != 6) {
           if (this.msg.Month != -1) {
            msg.QMonthStr = this.msg.Year + "-" + this.msg.Month;
          } else {
            msg.QMonthStr = this.msg.Year;
          }
        }
        this.DataList = [];
        this.apipost("LeaderSchedule_get_GetLeaderList", msg, res => {
            this.loading = false;
            if (res.data.resultCode == 1) {
              this.DataList = res.data.data;
            }
          },
          err => {}
        );
      },
      //获取工作类型(值获取领兼地和导游)
      getWorkType() {
        this.apipost(
          "leader_post_GetType", {},
          res => {
            if (res.data.resultCode == 1) {
              res.data.data.forEach(item => {
                this.workTypeList.push(item);
              });
            }
          },
          err => {}
        );
      },
      //获取购物店
      GetShopList() {
        this.apipost(
          "Shopping_Post_GetList", {},
          res => {
            if (res.data.resultCode == 1) {
              this.ShopList = res.data.data;
            }
          },
          err => {}
        );
      },
      //切换
      getSwitch(tab, event) {
        this.msg.Type = tab.name;
        this.getStatis();
      },
    },
    mounted() {
      var Year = new Date().getFullYear();
      this.msg.Year = new Date().getFullYear();
      this.msg.Month = new Date().getMonth() + 1;
      let count = Year - (Year - 8);
      for (let i = 0; i <= count; i++) {
        this.yearList.push(Year - i);
      }
      this.getWorkType();
      this.GetShopList();
      this.getStatis();
    }
  };

</script>
