<style>
    .CM_look {
      padding: 4px !important;
      position: relative;
      top: 1px;
    }

    .opUl li {
      display: inline-block;
      margin: 10px 15px 10px 0;
    }
    .domesticCommissiondetails .opUl li input {
      height: 34px !important;
    }
    .domesticCommissiondetails .singeRowTable tr td {
      padding: 8px 5px;
    }
    .domesticCommissiondetails .singeRowTable tr th {
      border: 1px solid #bbc0cc;
      height: 30px !important;
    }
    .domesticCommissiondetails .hoverSpan span:hover {
      cursor: pointer;
      text-decoration: underline;
      color: red;
    }
    .cursor-p{
        cursor: pointer;
    }
    .cursor-p:hover{
        color: #409EFF;
    }
  </style>
  <template>
    <div class="flexOne domesticCommissiondetails">
      <div style="min-height: 70px;">
        <ul class="opUl">
      <li>
        <em>{{$t('system.query_company')}}</em>
        <el-select filterable  v-model='msg.BranchId'
        @change='getDepartment();handleCurrentChange(1)' :disabled="disabled">
        <el-option :label="$t('pub.unlimitedSel')" :value="-1" :key="-1"></el-option>
        <el-option
        v-for="item in companyList"
        :label='item.BName'
        :value='item.Id'
        :key='item.Id'
        ></el-option>
        </el-select>
    </li>

    <li>
        <em>{{$t('admin.admin_Department')}}</em>
        <el-select filterable  v-model='msg.RB_Department_Id'
        @change='getEmployee();handleCurrentChange(1)' :disabled="disabled">
        <el-option :label="$t('pub.unlimitedSel')" :value="-1"></el-option>
        <el-option v-for='item in departmentList'
            :label='item.DepartmentName'
            :value='item.DepartmentID'
            :key='item.DepartmentID'>
        </el-option>
        </el-select>
    </li>
      <li>
        <em>{{$t('salesModule.Personnel')}}</em>
        <el-select v-model="msg.EmpId" size="mini"
        @change="handleCurrentChange(1)" :disabled="disabled" filterable>
            <el-option :label="$t('pub.unlimitedSel')" :value="-1"></el-option>
            <!-- <el-option :label="$t('objFill.weitu')" :value="-2"></el-option> -->
            <el-option v-for="(item,index) in searchList" :key="item.index" :label="item.name"
                :value="item.empId"></el-option>
        </el-select>
    </li>
    <li><el-checkbox v-model="IsShowDetail">显示明细</el-checkbox></li>
      <li style="position: fixed;right: 3px;top: 51px;"><input type="button" class="normalBtn" :value="$t('visa.v_daochu')" @click="exportExcel"></li>
        </ul>
      </div>
      <!-- 统计版块 -->
    <div class="groupTourOrder_count">
      <el-row :gutter="20">
        <el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="6">
          <div class="groupTourOrder_count_item HT_total">
            <p style="margin-top: 10px;">
              <span>{{$t('objFill.zongrenshu')}}：
                {{total}}
              </span>
              <span style="margin-left: 20px;">总奖金：
                {{dataObj.TotalMoney}}
              </span>
            </p>
          </div>
        </el-col>

      </el-row>
    </div>
    <div style="width: 100%; overflow: auto;">
      <table v-loading="loading" class="singeRowTable" style="margin-top: 10px; " :style="IsShowDetail?'width: 4200px;':''">
        <template v-if="IsShowDetail">
        <tr style="height: 30px !important;">
          <th rowspan="2" width="70px">年度</th>
          <th rowspan="2" width="80px">{{$t('sm.company')}}</th>
          <th rowspan="2" width="100px">姓名</th>
          <th rowspan="2" width="80px">达标月数</th>
          <th rowspan="2" width="100px">{{$t('ground.jiangljine')}}</th>
          <th colspan="5" width="300px" v-for="item in dataObj.MonthList">{{item}}</th>
        </tr>
        <tr style="height: 30px !important;">
          <template v-for="item in dataObj.MonthList">
            <th>总人数</th>
            <th>{{$t('visa.v_teamnum')}}</th>
            <th>单项人数</th>
            <th>{{$t('objFill.v101.Rest.ouzhourshu')}}</th>
            <th>达标</th>
          </template>
        </tr>
        <tr v-for="item in dataList">
          <td>{{item.Year}}</td>
          <td>{{item.BranchName}}</td>
          <td>{{item.EmName}}</td>
          <td>{{item.MonthNum}}</td>
          <td>{{item.Money}}</td>
          <template v-for="qitem in item.DetailList">
          <td><span :style="qitem.IsStandard==1?'color:red':''">{{qitem.TotalPNum}}</span></td>
          <td><span :style="qitem.IsStandard==1?'color:red':''">{{qitem.TravelPNum}}</span></td>
          <td><span :style="qitem.IsStandard==1?'color:red':''">{{qitem.SinglePNum}}</span></td>
          <td><span :style="qitem.IsStandard==1?'color:red':''">{{qitem.EuropePNum}}</span></td>
          <td><span :style="qitem.IsStandard==1?'color:red':''">{{qitem.IsStandard==1?'√':''}}</span></td>
        </template>
        </tr>
        <tr v-if="dataList.length==0">
          <td style="text-align:center" colspan="18">{{$t('system.content_noData')}}</td>
        </tr>
      </template>
        <template v-else>
          <tr style="height: 30px !important;">
          <th width="70px">年度</th>
          <th width="80px">{{$t('sm.company')}}</th>
          <th width="100px">姓名</th>
          <th width="80px">达标月数</th>
          <th width="100px">{{$t('ground.jiangljine')}}</th>
          <th v-for="item in dataObj.MonthList">{{item}}</th>
        </tr>
        <tr v-for="item in dataList">
          <td>{{item.Year}}</td>
          <td>{{item.BranchName}}</td>
          <td>{{item.EmName}}</td>
          <td>{{item.MonthNum}}</td>
          <td>{{item.Money}}</td>
          <template v-for="qitem in item.DetailList">
          <td><span :style="qitem.IsStandard==1?'color:red':''">{{qitem.TotalPNum}}</span></td>
        </template>
        </tr>
        <tr v-if="dataList.length==0">
          <td style="text-align:center" colspan="18">{{$t('system.content_noData')}}</td>
        </tr>
        </template>
      </table>
    </div>
      <!-- 分页 -->
      <el-pagination background @current-change="handleCurrentChange" :current-page.sync="msg.pageIndex"
        layout="total,prev, pager, next, jumper" :page-size='msg.pageSize' :total='total'>
      </el-pagination>
    </div>
  </template>

  <script>
    import moment from "moment"
    export default {
      components:{

      },
      data() {
        return {
          dataObj:{},
          Month: moment().format("YYYY-MM"),
          IsShowDetail:false,
          msg: {
            pageIndex: 1,
            pageSize: 20,
            EmpId: -1,
            Year: 2024,
            BranchId: -1,//公司ID
          },
          loading: false,
          //数据源
          dataList: [],
          total: 0,
          btnShow: false,
          searchList: [],
          TotalMoney: 0,
          TotalNum: 0,
          disabled: true,
          departmentList:[],
          companyList: [],
          getCompanyMsg:{
            RB_Group_Id:'0',
            Status:'0',
          },
          departmentMsg: {
            RB_Group_Id: '0',
            RB_Branch_Id:'0',
            Status:'0',
            ParentId:'-1',
            Tier:'0',
          },
          S_CheckBranchOrder:false,
          S_CheckAllOrder:false,
          disabled:true,
          outerVisible:false,//提成比例弹窗
          rateDataList: [],
          DigName:''
        }
      },
      created(){
          let userInfo = this.getLocalStorage();
          this.getCompanyMsg.RB_Group_Id=userInfo.RB_Group_id;    //集团ID
          this.departmentMsg.RB_Group_Id = userInfo.RB_Group_id; //集团
          this.departmentMsg.RB_Branch_Id = userInfo.RB_Branch_Id;

          this.msg.BranchId = this.$route.query.RB_Branch_Id?Number(this.$route.query.RB_Branch_Id):Number(userInfo.RB_Branch_id)
          this.msg.EmpId = this.$route.query.EmpId?Number(this.$route.query.EmpId):Number(userInfo.EmployeeId),
          this.msg.Year = this.$route.query.Year?this.$route.query.Year:-1
          let ActionMenuCode = userInfo.ActionMenuCode;
          if (ActionMenuCode.indexOf('S_CheckBranchOrder') != -1
            ||ActionMenuCode.indexOf('S_CheckAllOrder')!=-1
            ||ActionMenuCode.indexOf('F_Query_AllIncomPay')!=-1) {//是否有看所有人的权限
                this.msg.BranchId = this.$route.query.RB_Branch_Id?Number(this.$route.query.RB_Branch_Id):-1
                this.msg.EmpId = this.$route.query.EmpId?Number(this.$route.query.EmpId):-1
        }

          this.getEmployee() //人员
          this.getDepartment()
          this.getCompany()
          this.getList()
      },
      mounted() {
        let userInfo = this.getLocalStorage();
        let ActionMenuCode = userInfo.ActionMenuCode;
        // 判断是否销售
        if (ActionMenuCode.indexOf('S_CheckBranchOrder') != -1) {
          this.S_CheckBranchOrder = true
        }
        if (ActionMenuCode.indexOf('S_CheckAllOrder') != -1) {
          this.S_CheckAllOrder = true
        }
        if (ActionMenuCode.indexOf('S_CheckBranchOrder') != -1
            ||ActionMenuCode.indexOf('S_CheckAllOrder')!=-1
            ||ActionMenuCode.indexOf('F_Query_AllIncomPay')!=-1) {//是否有看所有人的权限
                this.disabled = false;
                this.msg.BranchId = this.$route.query.RB_Branch_Id?Number(this.$route.query.RB_Branch_Id):-1
                this.msg.EmpId = this.$route.query.EmpId?Number(this.$route.query.EmpId):-1
        }else{
          this.disabled = true;
        }

      },
      methods: {
        getDepartment() {
				this.apipost('admin_get_DepartmentGetList', this.departmentMsg, res => {
					if(res.data.resultCode == 1) {
						this.departmentList = res.data.data;
					}
				}, err => {})

			  },
        getCompany(){
            this.apipost('admin_get_BranchGetList',this.getCompanyMsg,res=>{
                if(res.data.resultCode==1){
                    this.companyList=res.data.data;
                }else{}
            },err=>{})
        },

        getEmployee() { //所有人员下拉
          let employeeMsg = {
            RB_Group_id: "0",
            RB_Branch_id: "-1",
            departmentId: "0",
            IsLeave: "-1"
          }
          this.apipost(
            "app_get_company_employee",
            employeeMsg,
            res => {
              if (res.data.resultCode == 1) {
                this.searchList = res.data.data;
              }
            },
            err => {}
          );
        },


        handleCurrentChange(val) {
          this.msg.pageIndex = val;
          this.getList();
        },
        goUrl(path, id) {
          this.$router.push({
            path: path,
            query: {
              PeriodId: id,
              blank: 'y',
              tab: '期数详情'
            }
          });
        },
        //获取数据
        getList() {
          let msg = JSON.parse(JSON.stringify(this.msg))
          this.loading = true;
          this.apipost(
            "sellcommission_GetTYYearBonusDetailPageList",
            msg,
            res => {
              this.loading = false;
              if (res.data.resultCode == 1) {
                this.dataObj = res.data.data
                this.dataList = res.data.data.pmodel.pageData;
                this.total = res.data.data.pmodel.count;
              } else {
                this.Error(res.data.message);
              }
            }
          );
        },
        exportExcel() { //导出
          let msg = JSON.parse(JSON.stringify(this.msg))
          let userInfo = this.getLocalStorage();
          msg.EmployeeIdUser = userInfo.EmployeeId
          msg.IsShowDetail= this.IsShowDetail?1:0;
          var fileName = "年终奖励明细.xls";
          this.GetLocalFile("sellcommission_GetTYYearBonusDetailListToExcel", msg, fileName);
        }
      }
    }

  </script>