<style scoped>
@import "../css/cssReset.css";
.January{
  background-color: #B3E5FC;
}
.February{
  background-color: #C8E6C9;
}
.March{
  background-color: #FFCCD2;
}
.April{
  background-color: #F8DDE0;
}
.May{
  background-color: #E1BEE7;
}
.June{
  background-color: #D1C4E9;
}
.July{
  background-color: #C5CAE9;
}
.August{
  background-color: #F0F4C3;
}
.September{
  background-color: #FFF9C4;
}
.October{
  background-color: #FFECB3;
}
.November{
  background-color: #FFE0B2;
}
.December{
  background-color: #FFCCBC;
}
.singeRowTable tr:nth-child(2n + 1) {
  background: none;
}
.dd {
  background-color: #e6e6e6;
}
.baseSet_Title {
  width: 120px !important;
  padding: 18px 0 0 16px;
  text-align: right;
}

.singeRowTable tr th {
  border: 1px solid #d2d2d2;
}

.studentTracking td:first-child {
  background-color: #e6e6e6;
  position: sticky;
  left: 0px;
}
.studentTracking td:nth-child(2) {
  background-color: #e6e6e6;
  position: sticky;
  left: 109px;
  border: 1px solid #d2d2d2;
}
.studentTracking td:nth-child(3) {
  background-color: #e6e6e6;
  position: sticky;
  left: 218px;
  border: 1px solid #d2d2d2;
}

.studentTracking th:first-child {
  position: sticky;
  left: 0px;
}
.studentTracking th:nth-child(2) {
  position: sticky;
  left: 109px;
  border: 1px solid #d2d2d2;
}
.studentTracking th:nth-child(3) {
  position: sticky;
  left: 218px;
  border: 1px solid #d2d2d2;
}
.SubtotalBj {
  background-color: #A5A5A5;
}

.stulistNumber {
  display: inline-block;
  width: 25px;
  height: 25px;
  text-align: center;
  line-height: 22px;
  border: 1px solid #2961fe;
  border-radius: 50%;
  cursor: pointer;
  color: #2961fe;
}

.OCourseTable {
  width: 400px;
  text-align: center;
}

.OCourseTable tr td {
  height: 40px;
}

.OCourseTable tr th {
  height: 40px;
  background-color: rgb(238, 238, 239);
}
.color_text{
  color: #2961fe;
  
}
.color_text:hover{
  text-decoration: underline;
  cursor:pointer;
}
</style>
<template>
  <div class="page-body studentTracking">
    <div class="page-search row items-center">
      <div class="col row wrap q-mr-lg q-col-gutter-md">
        <div class="col-3">
          <q-field filled dense>
            <template v-slot:control>
              <el-date-picker v-model="dateArray[0]" style="width:100%" value-format="yyyy-MM" @change="resetSearch()"
                size="small" type="month" placeholder="选择开始年月">
              </el-date-picker>
            </template>
          </q-field>
        </div>
        <div class="col-3">
          <q-field filled dense>
            <template v-slot:control>
              <el-date-picker v-model="dateArray[1]" style="width:100%" value-format="yyyy-MM" @change="resetSearch()"
                size="small" type="month" placeholder="选择结束年月">
              </el-date-picker>
            </template>
          </q-field>
        </div>
      </div>
    </div>
    <div class="page-search row items-center" style="justify-content: space-between;">
        <div></div>
        <q-btn  color="primary" size="11px" label="导出" @click="tcexport" style="margin-left:10px"/>
    </div>


    <div style="width: 100%;margin-top: 20px">
      <div style="width: 100%;overflow-x: auto;">
        <table
          class="po_content singeRowTable"
          ref="table"
          style="border:1px solid #E6E6E6;"
          cellspacing="0"
          cellpadding="0"
          v-loading="loading"
        >
          <tr>
            <th width="120" rowspan="2" style="min-width: 110px;z-index: 999;">
              部门
            </th>
            <th width="120" rowspan="2" style="min-width: 110px;z-index: 999;">
              角色
            </th>
            <th width="120" rowspan="2" style="min-width: 110px;z-index: 999;">
              人员
            </th>

            <th
              width="500"
              colspan="7"
              style="min-width: 500px;"
              v-for="(item, index) in RListlength"
              :key="index"
              :class="item.Month.slice(6)==1?'January':
              (item.Month.slice(6)==2?'February':
              (item.Month.slice(6)==3?'March':
              (item.Month.slice(6)==4?'April':
              (item.Month.slice(6)==5?'May':
              (item.Month.slice(6)==6?'June':
              (item.Month.slice(6)==7?'July':
              (item.Month.slice(6)==7?'August':
              (item.Month.slice(6)==7?'September':
              (item.Month.slice(5)==10?'October':
              (item.Month.slice(5)==11?'November':
              (item.Month.slice(5)==12?'December':'')))))))))))"
            >
              <span v-if="item.Month.slice(5) < 10">{{
                item.Month.slice(6)
              }}</span>
              <span v-else>{{ item.Month.slice(5) }}</span
              >月
            </th>
            <th width="120" rowspan="2" style="min-width: 110px;">提成合计</th>
            <th width="120" rowspan="2" style="min-width: 110px;">返佣合计</th>
            <th width="120" rowspan="2" style="min-width: 110px;">奖励合计</th>
            <th width="120" rowspan="2" style="min-width: 110px;">合计</th>
          </tr>
          <tr>
            <th
              v-for="(item, index) in titlelist"
              :key="index"
              :width="item.Id == 1 ? 200 : 200"
            >
              {{ item.Name }}
            </th>
          </tr>
          <tr
            v-for="(item, index) in dataList"
            :key="index"
            v-if="dataList && dataList.length > 0"
            :class="item.RoleName=='小计'? 'SubtotalBj' : ''"
          >
            <td style=" border: 1px solid #d2d2d2;">
              {{ item.DeptName }}
            </td>
            <td>
              <span>{{ item.RoleName }}</span>
            </td>
            <td>
              {{ item.EmpName }}
            </td>
            <td v-for="(x, y) in titlelist" :key="y"
            >
              <div v-if="item.MonthList[x.index]">
                <div v-if="x.Id == 1">
                  <span :class="item.RoleName=='小计'? '' : 'color_text'" 
                  @click="item.RoleName=='小计'?'':clickDataDetails(item.EmpId,item.MonthList[x.index],'1')">{{ item.MonthList[x.index].Achievement }}</span>
                </div>
                <div v-if="x.Id == 2" style="padding: 7px;">
                  <span>{{ item.MonthList[x.index].Rate }}</span>
                </div>
                <div v-if="x.Id == 3" style="padding: 3px;">
                  <span :class="item.RoleName=='小计'? '' : 'color_text'" 
                  @click="item.RoleName=='小计'?'':clickDataDetails(item.EmpId,item.MonthList[x.index],'1')">{{ item.MonthList[x.index].Rebate }}</span>
                </div>
                <div v-if="x.Id == 4" style="padding: 3px;">
                  <span :class="item.RoleName=='小计'? '' : 'color_text'" 
                  @click="item.RoleName=='小计'?'':clickDataDetails(item.EmpId,item.MonthList[x.index],'2')">{{ item.MonthList[x.index].Commission }}</span>
                </div>
                <div v-if="x.Id == 5" style="padding: 3px;">
                  <span :class="item.RoleName=='小计'? '' : 'color_text'" 
                  @click="item.RoleName=='小计'?'':clickDataDetails(item.EmpId,item.MonthList[x.index],'3')">{{ item.MonthList[x.index].Brokerage }}</span>
                </div>
                <div v-if="x.Id == 6" style="padding: 3px;">
                  <span :class="item.RoleName=='小计'? '' : 'color_text'" 
                  @click="item.RoleName=='小计'?'':clickDataDetails(item.EmpId,item.MonthList[x.index],'4')">{{ item.MonthList[x.index].Bonus }}</span>
                </div>
                <div v-if="x.Id == 7" style="padding: 3px;">
                  <span>{{ item.MonthList[x.index].Total }}</span>
                </div>
              </div>
            </td>
            <td>
              <span>{{ item.TotalCommission }}</span>
            </td>
            <td>
              <span>{{ item.TotalReturn }}</span>
            </td>
            <td>
              <span>{{ item.TotalPersonnel }}</span>
            </td>
            <td>
              <span>{{ item.TotalAll }}</span>
            </td>
          </tr>
        </table>
      </div>
      <div
        v-if="!dataList || (dataList && dataList.length == 0)"
        style="width: 100%;border:1px solid #E6E6E6;display: flex;align-items: center;justify-content: center;height: 60px;"
      >
        暂无数据
      </div>
    </div>
  </div>
</template>
<script>
import { GetSellAchievementsRankStat_V2 } from "../../../api/finance/index";
import { EduDownLoad } from "../../../api/common/common";
import studentRightForm from "../../../components/school/student/studentRight-form";
import studentFUForm from "../../../components/school/student/studentFu-form";

export default {
  meta: {
    title: "业绩提成排名"
  },
  props: {},
  components: {
    studentRightForm,
    studentFUForm
  },
  data() {
    return {
      msg: {
        StartMonth: "",
        EndMonth: ""
      },

      loading: false,
      dataList: [], //列表数据
      dateArray: [], //日期数组
      RListlength: 0,
      titlelist: [],
    };
  },
  created() {},
  mounted() {
    var d = new Date();
    var currentY = d.getFullYear();
    var currentM = d.getMonth() - 1;
    var month = d.getMonth() + 1;
    this.msg.StartMonth = currentY + "-" + currentM;
    this.msg.EndMonth = currentY + "-" + month;
    this.dateArray.push(this.msg.StartMonth)
    this.dateArray.push(this.msg.EndMonth)
    this.getList(); //获取数据
  },
  methods: {
    // 数据详情
    clickDataDetails(UserId,item,type){
      if(type==2){//提现
        const routeData = this.$router.resolve({
          path: '/financial/market/marketStatistics',
          query: {
            UserId: UserId,
            Periods: item.Month
          }
        });
        window.open(routeData.href, '_blank')
      }
      if(type==3){//返佣金额
        const routeData = this.$router.resolve({
          path: '/financial/returnPassbook/returnpassbookStatistics',
          query: {
            UserId: UserId,
            Periods: item.Month
          }
        });
        window.open(routeData.href, '_blank')
      }
      if(type==4){//人头奖励
        const routeData = this.$router.resolve({
          path: '/financial/market/empBonusDetail',
          query: {
            UserId: UserId,
            Periods: item.Month
          }
        });
        window.open(routeData.href, '_blank')
      }
      if(type==1){//业绩、订单返佣
        const routeData = this.$router.resolve({
          path: '/sale/orderStatistics',
          query: {
            UserId: UserId,
            Periods: item.Month
          }
        });
        window.open(routeData.href, '_blank')
      }
    },
    tcexport(){//导出
        var msg = JSON.parse(JSON.stringify(this.msg));
        EduDownLoad("/SellAchievements/GetSellAchievementsRankStatToExcel", msg, "业绩提成排名.xls")
    },
    resetSearch() {
      if(!this.dateArray[0]||!this.dateArray[1]){
        this.$q.notify({
          type: 'negative',
          position: "top",
          message: `请选择开始和结束时间`
        })
        return
      }
      this.msg.pageIndex = 1;
      this.getList();
    },
    getList() {
      this.loading = true;
      let msg = JSON.parse(JSON.stringify(this.msg));
      if (this.dateArray && this.dateArray.length > 0) {
        msg.StartMonth = this.dateArray[0];
        msg.EndMonth = this.dateArray[1];
      }

      GetSellAchievementsRankStat_V2(msg)
        .then(res => {
          this.loading = false;
          this.RListlength = res.Data && res.Data[0].MonthList;
          this.titlelist = [
            {
              Name: "当月业绩",
              Id: 1,
              index: 0
            },
            {
              Name: "业绩比例",
              Id: 2,
              index: 0
            },
            {
              Name: "订单返佣",
              Id: 3,
              index: 0
            },
            {
              Name: "提成",
              Id: 4,
              index: 0
            },
            {
              Name: "返佣金额",
              Id: 5,
              index: 0
            },
            {
              Name: "人头奖励",
              Id: 6,
              index: 0
            },
            {
              Name: "合计",
              Id: 7,
              index: 0
            }
          ];
          this.dataList = res.Data;
          this.titlelist = [];
          for (let i = 0; i < this.RListlength.length; i++) {
            let obj = [
              {
                Name: "业绩",
                Id: 1,
                index: i
              },
              {
                Name: "业绩比例",
                Id: 2,
                index: i
              },
              {
                Name: "订单返佣",
                Id: 3,
                index: i
              },
              {
                Name: "提成",
                Id: 4,
                index: i
              },
              {
                Name: "返佣金额",
                Id: 5,
                index: i
              },
              {
                Name: "人头奖励",
                Id: 6,
                index: i
              },
              {
                Name: "合计",
                Id: 7,
                index: i
              }
            ];
            this.titlelist = [...this.titlelist, ...obj];
          }
        })
        .catch(() => {
          this.loading = false;
        });
    },
  }
};
</script>
<style lang="sass">
@import url('~assets/css/table.sass')
</style>
<style scoped>
/deep/.el-input__inner,
/deep/.el-range-input {
  background-color: transparent;
  border: none;
}

.stics {
  padding: 10px 20px;
  background: #dddee0;
  border-radius: 4px;
  font-size: 13px;
  color: #000000;
  font-weight: bold;
}

.stics .stics-name {
  color: #2d2d2d;
  font-weight: 600;
  margin-right: 10px;
}

.roatImg {
  transform: rotate(180deg);
}
</style>
