<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;
    }
    .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>出团公司</em>
            <el-select filterable  v-model='msg.OutBranchId'
            @change='handleCurrentChange(1)'>
            <el-option label="不限" :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>期数</em>
          <el-select v-model="msg.PeriodId" size="mini" @change="handleCurrentChange(1)" filterable>
              <el-option label="不限" :value="-1"></el-option>
              <el-option v-for="(item,index) in PeroidsList" :key="item.index" :label="item.Periods"
                  :value="item.Id"></el-option>
          </el-select>
      </li>
      <li>
        <em>所属公司</em>
        <el-select filterable  v-model='msg.RB_Branch_Id'
        @change='getDepartment();handleCurrentChange(1)' :disabled="disabled">
        <el-option label="不限" :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>部门</em>
        <el-select filterable  v-model='msg.RB_Department_Id'
        @change='getEmployee();handleCurrentChange(1)' :disabled="disabled">
        <el-option label="不限" :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>人员</em>
        <el-select v-model="msg.UserId" size="mini"
        @change="handleCurrentChange(1)" :disabled="disabled" filterable>
            <el-option label="不限" :value="-1"></el-option>
            <!-- <el-option label="微途" :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>
              <em>订单号</em>
              <el-input maxlength="50" v-model="msg.OrderId" class="permiss-input w200"
                @change="handleCurrentChange(1)" :placeholder="$t('pub.pleaseImport')"></el-input>
            </li>
            <li>
              <em>团号</em>
              <el-input maxlength="50" v-model="msg.TCNUM" class="permiss-input w200"
                @change="handleCurrentChange(1)" :placeholder="$t('pub.pleaseImport')"></el-input>
            </li>
            <li>
              <em>订单类型</em>
              <el-select v-model="msg.OrderType" class="w200 HworkInput"
              @change="handleCurrentChange(1)">
                <el-option label="不限" :value="-1"></el-option>
                <el-option v-for="item in OrderTypeList" :key="item.Id" :label="item.Name" :value="item.Id"></el-option>
              </el-select>
            </li>



      <li style="position: fixed;right: 3px;top: 51px;"><input type="button" class="normalBtn" value="导出" @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">
            <div style="display: flex;justify-content: space-between;">
              <span>统计</span>
              <span style="color: red;">注：门票不计入人头奖励</span>
            </div>
            <p style="margin-top: 10px;">
              <span>总人数：
                {{dataObj.TotalNum}}
              </span>
              <span style="margin-left: 20px;">总提成：
                {{dataObj.TotalMoney}}
              </span>
              <span style="margin-left: 20px;">总额外奖励：
                {{dataObj.TotalExtraReward}}
              </span>
            </p>
          </div>
        </el-col>

      </el-row>
    </div>
      <table v-loading="loading" class="singeRowTable" border="0" cellspacing="0" cellpadding="0"
        style="margin-top: 10px;">
        <tr>
          <th style="width: 100px;">出团公司</th>
          <th style="width: 80px;">类型</th>
          <th style="width: 80px;">订单号</th>
          <th style="width: 150px;">团号</th>
          <th style="width: 100px;">所属公司</th>

          <th style="width: 100px;">部门</th>
          <th style="width: 100px;">姓名</th>
          <th style="width: 100px;">线路</th>
          <th style="width: 100px;">是否欧洲</th>

          <th style="width: 100px;">订单利润</th>
          <th style="width: 100px;">团队总人数</th>
          <th style="width: 100px;">团队利润</th>
          <th style="width: 100px;">提成方式</th>
          <th style="width: 100px;">提成比例</th>
          <th style="width: 100px;">当月利润/业绩</th>
          <th style="width: 100px;">提成金额</th>
          <th style="width: 100px;">期数</th>
          <th width='200'>备注</th>

        </tr>
        <tr v-for="item in dataList">
          <td>{{item.OutBranchName?item.OutBranchName:'-'}}</td>
          <td>{{item.OrderTypeName}}</td>
          <td><span class="cursor-p" :style="{'color': !disabled?'#409EFF':''}" @click="!disabled?clickUrl(item,1):''">{{item.OrderId}}</span></td>
          <td><span class="cursor-p" :style="{'color': !disabled?'#409EFF':''}" v-if="item.TCNUM" @click="!disabled?goTuanDetails(item):''">{{item.TCNUM}}({{item.TCID}})</span></td>
          <td>{{item.BranchName?item.BranchName:'-'}}</td>
          <td>{{item.DeptName?item.DeptName:'-'}}</td>
          <td>{{item.UserName}}</td>
          <td>{{item.LineName}}</td>
          <td>{{item.IsEurope==1?'是':''}}</td>
          <td>{{item.TCProfit?item.TCProfit:'-'}}</td>
          <td>{{item.PeopleNum?item.PeopleNum:'-'}}</td>
          <td>{{item.TCProfit?item.TCProfit:'-'}}</td><!-- TCGuestNum -->
          <td>{{item.Way==1?'销售额':'利润比'}}</td>
          <td>{{item.Rate?item.Rate+'%':'-'}}</td>
          <td>{{item.OrderProfit}}</td>
          <td>{{item.CommissionMoney?item.CommissionMoney:'-'}}</td>
          <td>{{item.Periods}}</td>
          <td>{{item.Description?item.Description:'-'}}</td>
        </tr>
        <tr v-if="dataList.length==0">
          <td style="text-align:center" colspan="18">暂无数据</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 {
      components:{

      },
      data() {
        return {
          dataObj:{},
          Month: moment().format("YYYY-MM"),
          msg: {
            pageIndex: 1,
            pageSize: 20,
            UserId: -1,
            PeriodId: -1,
            OrderId:'',
            OrderType: -1,
            TCNUM: '',
            RB_Department_Id: -1,//部门ID
            RB_Branch_Id: -1,//公司ID
            OutBranchId: -1,//出团公司ID
          },
          loading: false,
          //数据源
          dataList: [],
          total: 0,
          btnShow: false,
          PeroidsList:[],
          searchList: [],
          TotalMoney: 0,
          TotalNum: 0,
          disabled: true,
          titleList:[
              {name:'不限',id:'-1'},
              {name:'引流',id:'2'},
              {name:'销售',id:'1'}
          ],
          OrderTypeList:[],
          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,
        }
      },
      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.GetCommissionPeroidsList()//期数
          this.getEmployee() //人员
          this.getDepartment()
          this.getCompany()
          this.GetOrderTypeEnumList()
          this.GetCommissionPeroidsList()//期数
      },
      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 (this.$route.query) { //不大于0的话用默认值
          if (this.$route.query.PeriodId && this.$route.query.PeriodId > 0) {

          }
        }
        this.msg.TCNUM = this.$route.query.TCNUM?this.$route.query.TCNUM:''
        this.msg.PeriodId = this.$route.query.PeriodId?Number(this.$route.query.PeriodId):-1
        this.msg.OrderId = this.$route.query.OrderId?this.$route.query.OrderId:''
        this.msg.OutBranchId = this.$route.query.OutBranchId?Number(this.$route.query.OutBranchId):-1
        this.msg.RB_Branch_Id = this.$route.query.RB_Branch_Id?Number(this.$route.query.RB_Branch_Id):Number(userInfo.RB_Branch_id)
        this.msg.UserId = this.$route.query.UserId?Number(this.$route.query.UserId):Number(userInfo.EmployeeId)
        if (ActionMenuCode.indexOf('S_CheckBranchOrder') != -1
            ||ActionMenuCode.indexOf('S_CheckAllOrder')!=-1
            ||ActionMenuCode.indexOf('F_Query_AllIncomPay')!=-1) {//是否有看所有人的权限
                this.disabled = false;
                this.msg.OutBranchId = this.$route.query.OutBranchId?Number(this.$route.query.OutBranchId):-1
                this.msg.RB_Branch_Id = this.$route.query.RB_Branch_Id?Number(this.$route.query.RB_Branch_Id):-1
                // this.msg.RB_Department_Id = -1
                this.msg.UserId = this.$route.query.UserId?Number(this.$route.query.UserId):-1
        }else{
          this.disabled = true;
        }

      },
      methods: {
        GetOrderTypeEnumList() {
          this.apipost("CarSingle_post_GetOrderTypeEnumList", {}, (res) => {
            if (res.data.resultCode == 1) {
              this.OrderTypeList = res.data.data;
            } else {
              this.$message.error(res.data.message);
            }
          });
        },
        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=>{})
            },
            goTuanDetails(row) {
              this.$router.push({
              path: 'TeamBalancePayment',//TravelControlList
              query: {
                id: row.TCID,
                blank: 'y',
                tab: '团队收支'//团控列表
              }
            });
            // let name = ''
            // if (row.IsOneDayOrder == 1) {
            //   name = 'groupTourOrderByTuanOne'
            // } else {
            //   name = 'groupTourOrderByTuan'
            // }
            // this.$router.push({
            //   name: name,
            //   query: {
            //     id: row.TCID,
            //     tcmun: row.TCNUM,
            //     blank: "y",
            //   }
            // });
      },
        clickUrl(row,type){
          let data = [{
          path: "",
          OrderId: row.OrderId,
          Type: '',
          PeriodId: this.msg.PeriodId
        }]
        let href
        let url = this.domainManager().crmRoutingUrl;

        if (row.OrderType == 1) {

          if (this.S_CheckBranchOrder || this.S_CheckAllOrder) {
            data[0].path = 'customerOrderAllType'
          } else {
            data[0].path = 'myCustomerOrderAllType'
          }
          href = url + 'automaticLogin?token=' + this.getLocalStorage().token + '&data=' + JSON.stringify(data)
          window.open(href);

        } else {
          let name = ''
          if (row.OrderType == 6) {
            if (this.S_CheckBranchOrder || this.S_CheckAllOrder) {
              name = 'VisaProductEditOrderOP'
            } else {
              name = 'VisaProductEditOrder'
            }
            this.$router.push({
              name: name,
            });
          } else if (row.OrderType == 2) { //跟团 一日游
            if (this.S_CheckBranchOrder || this.S_CheckAllOrder) {
              name = 'enrollTotal'
            } else {
              if (row.TravelType == 1) {
                name = 'groupTourOrder'
              } else {
                name = 'groupTourOrderOne'
              }
            }
          } else if (row.OrderType == 3) { //酒店
            if (this.S_CheckBranchOrder || this.S_CheckAllOrder) {
              name = 'singleProductHotelOrderOP'
            } else {
              name = 'singleProductHotelOrder'
            }
          } else if (row.OrderType == 4) { //门票
            if (this.S_CheckBranchOrder || this.S_CheckAllOrder) {
              name = 'SingleticketOrderListOP'
            } else {
              name = 'SingleticketOrderList'
            }
          } else if (row.OrderType == 5) { //包车
            if(row.CarType==''||row.CarType==null){
              this.GetAdminCarOrderPageList(row,url,href,data)
            }else{
              if(this.S_CheckBranchOrder || this.S_CheckAllOrder){
                name = 'CharterOrderListOP'
              }else{
                name= 'CharterOrderList'
              }
              data[0].Type = row.CarType==null||!row.CarType?4:row.CarType
            }
          } else if (row.OrderType == 7) { //jalan酒店
            this.$message.info('jalan酒店暂不支持查看')
            // if(!this.S_CheckBranchOrder  && !this.S_CheckAllOrder){
            //   name = 'CharterOrderList'
            // }else{
            //   name = 'CharterOrderListOP'
            // }
          }
          if (name) {
            this.$router.push({
              name: name,
              query: {
                OrderId: row.OrderId,
                PeriodId: this.msg.PeriodId,
                blank: "y",
              }
            });
          }

        }
        },
        GetAdminCarOrderPageList(row, url, href, data) {
        let msg = {
          pageIndex: 1,
          pageSize: 5,
          OrderType: '',
          OrderId: row.OrderId,
          OrderNo: '',
          SurName: '',
          Name: '',
          OrderStatus: 0,
          StartTime: '',
          EndTime: '',
          OrderSTime: '',
          OrderETime: '',
          ProductName: '',
          Mobile: '', //电话
          IsSelectSale: 1,
          EnterID: 0, //业务员
        }
        let name
        this.apipost('CarSingle_post_GetAdminCarOrderPageList', msg, res => {
          if (res.data.resultCode == 1) {
            let pageData = res.data.data.pageData
            let OrderType
            if (pageData && pageData.length > 0) {
              OrderType = pageData[0].OrderType
            }
            if (this.S_CheckBranchOrder || this.S_CheckAllOrder) {
              name = 'CharterOrderListOP'
            } else {
              name = 'CharterOrderList'
            }
            this.$router.push({
              name: name,
              query: {
                OrderId: row.OrderId,
                OrderType: OrderType ? OrderType : 4,
                blank: "y",
              }
            });
          }
        })
      },

        // 订单统计
        OrderStatistics(item){
          let data = [
              {
                  path: "customerOrder",
                  OrderId: item.OrderId
              },
          ];
        let href = this.domainManager().crmRoutingUrl +
          "automaticLogin?token=" +
          this.getLocalStorage().token +
          "&data=" +
          JSON.stringify(data);
          window.open(href);
      },
        GetCommissionPeroidsList() { //期数下拉
            this.apipost(
                "sellcommission_GetTYSaleCommissionPeriodsList",{},res => {
                if (res.data.resultCode == 1) {
                    this.PeroidsList = res.data.data;
                    if(!this.$route.query.PeriodId){
                      this.msg.PeriodId = this.PeroidsList[0].Id
                    }
                    this.getList()
                } else {
                    this.Error(res.data.message);
                }
                }
            );
        },
        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))
          if (msg.OrderId == '') {
            msg.OrderId = 0
          }
          this.loading = true;
          this.apipost(
            "sellcommission_GetTYSaleCommissionSingleDetailsList",
            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
          var fileName = "同业提成人员表.xls";
          this.GetLocalFile("sellcommission_GetTYSaleCommissionSingleDetailsListToExcel", msg, fileName);
        }

      }
    }

  </script>