<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 .hoverSpan span:hover {
      cursor: pointer;
      text-decoration: underline;
      color: red;
    }
  
  </style>
  <template>
    <div class="flexOne domesticCommissiondetails">
      <div style="min-height: 70px;" v-if="!isSearch">
        <ul class="opUl">
          <li>
            <em>期数</em>
            <el-select v-model="msg.PeriodId" size="mini" @change="handleCurrentChange(1)">
              <el-option label="不限" :value="0"></el-option>
              <el-option v-for="(item,index) in PeriodsList" :key="item.index" :label="item.Name" :value="item.Id">
              </el-option>
            </el-select>
          </li>
          <li>
            <em>出团公司</em>
            <el-select v-model="msg.OutBranchId" size="mini" @change="handleCurrentChange(1)">
              <el-option label="不限" :value="-1"></el-option>
              <el-option v-for="(item,index) in BranchList" :key="item.index" :label="item.BName" :value="item.Id">
              </el-option>
            </el-select>
          </li>
          <li>
            <em>公司</em>
            <el-select v-model="msg.RB_Branch_Id" size="mini" @change="handleCurrentChange(1)" :disabled='disabled'>
              <el-option label="不限" :value="-1"></el-option>
              <el-option v-for="(item,index) in BranchList" :key="item.index" :label="item.BName" :value="item.Id">
              </el-option>
            </el-select>
          </li>
          <li>
            <em>部门</em>
            <el-select v-model="msg.RB_Department_Id" size="mini" @change="handleCurrentChange(1)" :disabled='disabled'>
              <el-option label="不限" :value="-1"></el-option>
              <el-option v-for="(item,index) in departMentList" :key="item.index" :label="item.DepartmentName"
                :value="item.DepartmentID"></el-option>
            </el-select>
          </li>
          <li>
            <em>人员</em>
            <el-select v-model="msg.UserId" size="mini" @change="handleCurrentChange(1)" filterable :disabled='disabled'>
              <el-option label="不限" :value="-1"></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>
            <em>订单号</em>
            <el-input maxlength="50" v-model="msg.OrderId" class="permiss-input w200"
              @keyup.native.enter="handleCurrentChange(1)" :placeholder="$t('pub.pleaseImport')"></el-input>
          </li> -->
          <li>
            <em>团号</em>
            <el-input maxlength="50" v-model="msg.TCNUM" class="permiss-input w200"
              @keyup.native.enter="handleCurrentChange(1)" :placeholder="$t('pub.pleaseImport')"></el-input>
          </li>
  
  
  
        </ul>
      </div>
      <!-- <li>
              <input type="button" class="normalBtn" value="导出" @click="exportExcel">
          </li> -->
      <div style="display: flex;align-items: center;height: 50px;justify-content: space-between;">
        <div style="display: flex;align-items: center;">
          <span>总金额：{{TotalMoney}}元</span>
          <span style="margin-left: 15px;">总人数：{{TotalNum}}人</span>
        </div>
        <input type="button" class="normalBtn" value="导出" @click="exportExcel">
  
      </div>
      <table v-loading="loading" class="singeRowTable" border="0" cellspacing="0" cellpadding="0"
        style="margin-top: 10px;">
        <tr>
  
          <th>公司</th>
          <th>部门</th>
          <th>销售</th>
          <th>团信息</th>
          <th>团利润</th>
          <!-- <th>订单号</th> -->
          <th>人数</th>
          <th>提成</th>
          
          <th>期数</th>
          <th width='400'>备注</th>
  
          <!-- <th>操作</th> -->
        </tr>
        <tr v-for="item in dataList">
  
          <td>{{item.BranchName}}</td>
          <td>{{item.DeptName}}</td>
          <td>{{item.UserName}}</td>
          <td>
            <div>{{item.OutBranchName}}</div>
            <span style="cursor: pointer;text-decoration: underline;" @click="goTravel(item.TCID)">
              {{item.TCNUM}}({{item.TCID}})
            </span>
  
          </td>
          <td>{{item.TCProfit}}</td>
          <td>{{item.PeopleCount}}</td>
          <td>{{item.CommissionMoney}}</td>
       
          <td>{{item.Periods}}</td>
          <td>{{item.Description}}</td>
  
  
          <!-- <td>
  
                      <el-tooltip class="item" effect="dark" content="查看" placement="top">
                          <el-button type="primary" class="CM_look" @click="goUrl('OPCommissionDetail',item.ID)"
                              icon="iconfont icon-chakan" circle></el-button>
                      </el-tooltip>
  
  
                  </td> -->
        </tr>
        <tr v-if="dataList.length==0">
          <td style="text-align:center" colspan="12">暂无数据</td>
        </tr>
      </table>
      <!-- 分页 -->
      <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 {
      data() {
        return {
          isSearch: false,
          Month: moment().format("YYYY-MM"),
          msg: {
            pageIndex: 1,
            pageSize: 20,
            PeriodId: 0,
            UserId: -1,
            RB_Branch_Id: -1,
            RB_Department_Id: -1,
            // OrderId: '',
            TCNUM: '',
            OutBranchId: -1
          },
          loading: false,
          //数据源
          dataList: [],
          total: 0,
          btnShow: false,
          PeriodsList: [],
          BranchList: [],
          searchList: [],
          departMentList: [],
          TotalMoney: 0,
          TotalNum: 0,
          disabled: true
  
        }
      },
      mounted() {
        let userInfo = this.getLocalStorage();
        let ActionMenuCode = userInfo.ActionMenuCode;
        if (this.$route.query) { //不大于0的话用默认值
          if (this.$route.query.PeriodId && this.$route.query.PeriodId > 0) {
            this.msg.PeriodId = Number(this.$route.query.PeriodId)
          }
          if (this.$route.query.UserId && this.$route.query.UserId > 0) {
            this.msg.UserId = Number(this.$route.query.UserId)
          }
          if (this.$route.query.RB_Branch_Id) {
            this.msg.RB_Branch_Id = Number(this.$route.query.RB_Branch_Id)
          }
          if (this.$route.query.TCNUM) {
            this.msg.TCNUM = this.$route.query.TCNUM
          }
          
          if (this.$route.query.RB_Department_Id && this.$route.query.RB_Department_Id > 0) {
            this.msg.RB_Department_Id = Number(this.$route.query.RB_Department_Id)
          }
          if(this.$route.query.OutBranchId){
            this.msg.OutBranchId = Number(this.$route.query.OutBranchId)
          }
          this.isSearch = this.$route.query.isSearch?this.$route.query.isSearch:false
        }
        if (ActionMenuCode.indexOf('home_CommissionSeeAll') != -1) { //是否有看所有人的权限
          this.disabled = false;
        } else {
          this.disabled = true;
          if(!this.$route.query.UserId){
            this.msg.UserId = Number(userInfo.EmployeeId)
          }
        }
        this.getList();
        this.getqishilist()
        this.getCompanyList() //获取公司
        this.getEmployee() //人员
        this.getDerpartMent() //部门
      },
      methods: {
        getDerpartMent() {
          //获取部门
          this.apipost(
            "admin_get_DepartmentGetList",
            this.getDepartmentMsg,
            res => {
              if (res.data.resultCode == 1) {
                this.departMentList = 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 => {}
          );
        },
        //初始化公司
        getCompanyList() {
          let userInfo = this.getLocalStorage();
          var RB_Group_id = userInfo.RB_Group_id;
          let msg = {
            Status: 0,
            is_show: 0,
            RB_Group_Id: RB_Group_id
          };
          this.apipost(
            "admin_get_BranchGetList",
            msg,
            res => {
              if (res.data.resultCode == 1) {
                this.BranchList = res.data.data;
  
              }
            },
            err => {}
          );
        },
        getqishilist() {
          this.apipost(
            "opcommission_GetGNOPCommissionPeriodsList", {},
            res => {
              if (res.data.resultCode == 1) {
                this.PeriodsList = res.data.data;
                if (this.PeriodsList && this.PeriodsList.length > 0) {
                  // this.msg.Periods = Number(this.PeriodsList[0].Id)
                }
  
              } else {
                this.Error(res.data.message);
              }
            },
            null
          );
        },
  
  
        handleCurrentChange(val) {
          this.msg.pageIndex = val;
          this.getList();
        },
        goUrl(path, id) {
          this.$router.push({
            path: path,
            query: {
              PeriodsId: id,
              blank: 'y',
              tab: '期数详情'
            }
          });
        },
        //获取数据
        getList() {
          let msg = JSON.parse(JSON.stringify(this.msg))
          if (msg.OrderId == '') {
            msg.OrderId = 0
          }
          this.loading = true;
          this.apipost(
            "opcommission_GetGNOPCommissionSingleDetailsList",
            msg,
            res => {
              this.loading = false;
              if (res.data.resultCode == 1) {
                this.TotalMoney = res.data.data.TotalMoney ? res.data.data.TotalMoney : 0
                this.TotalNum = res.data.data.TotalNum ? res.data.data.TotalNum : 0
                this.dataList = res.data.data.pmodel.pageData;
                this.total = res.data.data.pmodel.count;
              } else {
                this.Error(res.data.message);
              }
            },
            null
          );
        },
        exportExcel() { //导出
          let msg = JSON.parse(JSON.stringify(this.msg))
          if (msg.OrderId == '') {
            msg.OrderId = 0
  
          }
          let userInfo = this.getLocalStorage();
          msg.EmployeeIdUser = userInfo.EmployeeId
          var fileName = "国内OP提成明细.xls";
          this.GetLocalFile("opcommission_GetGNOPCommissionSingleDetailsListToExcel", msg, fileName);
        },
        goTravel(TCID) { //跳转到团队列表
          this.$router.push({
            path: 'TravelControlList',
            query: {
              TCID: TCID,
              blank: 'y',
              tab: '团控列表'
            }
          });
        }
  
      }
    }
  
  </script>
  