<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>{{$t('scen.sc_cp')}}</em>
            <el-select filterable  v-model='msg.OutBranchId'
            @change='handleCurrentChange(1)'>
            <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('tips.qishu')}}</em>
          <el-select v-model="msg.PeriodId" size="mini" @change="handleCurrentChange(1)" filterable>
              <el-option :label="$t('pub.unlimitedSel')" :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>{{$t('system.query_company')}}</em>
        <el-select filterable  v-model='msg.RB_Branch_Id'
        @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.UserId" 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>
              <em>{{$t('hotel.order_Number')}}</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>{{$t('visa.v_tuanhao')}}</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>{{$t('active.cl_orderType')}}</em>
              <el-select v-model="msg.OrderType" class="w200 HworkInput"
              @change="handleCurrentChange(1)">
                <el-option :label="$t('pub.unlimitedSel')" :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="$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">
            <div style="display: flex;justify-content: space-between;">
              <span>{{$t('objFill.v101.FinancialModule.tongji')}}</span>
              <span style="color: red;">{{$t('objFill.v101.FinancialModule.zhumpbjrrtjl')}}</span>
            </div>
            <p style="margin-top: 10px;">
              <span>{{$t('objFill.zongrenshu')}}：
                {{dataObj.TotalNum}}
              </span>
              <span style="margin-left: 20px;">{{$t('objFill.zongticeng')}}：
                {{dataObj.TotalMoney}}
              </span>
              <span style="margin-left: 20px;">{{$t('objFill.v101.FinancialModule.zongewaijl')}}：
                {{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;">{{$t('scen.sc_cp')}}</th>
          <th style="width: 80px;">{{$t('advmanager.v_type')}}</th>
          <th style="width: 80px;">{{$t('hotel.order_Number')}}</th>
          <th style="width: 150px;">{{$t('visa.v_tuanhao')}}</th>
          <th style="width: 100px;">{{$t('system.query_company')}}</th>

          <th style="width: 100px;">{{$t('admin.admin_Department')}}</th>
          <th style="width: 100px;">{{$t('system.query_name')}}</th>
          <th style="width: 100px;">{{$t('advmanager.v_line')}}</th>
          <th style="width: 100px;">{{$t('objFill.v101.FinancialModule.shifouoz')}}</th>

          <th style="width: 100px;">{{$t('objFill.v101.FinancialModule.dindanlr')}}</th>
          <th style="width: 100px;">{{$t('objFill.v101.FinancialModule.tuanduizrs')}}</th>
          <th style="width: 100px;">{{$t('objFill.v101.FinancialModule.tuanduilr')}}</th>
          <th style="width: 100px;">{{$t('objFill.tichengfanshi')}}</th>
          <th style="width: 100px;">{{$t('objFill.v101.FinancialModule.tichengbil')}}</th>
          <th style="width: 100px;">{{$t('objFill.v101.FinancialModule.dangyuelryj')}}</th>
          <th style="width: 100px;">{{$t('salesModule.TCmoney')}}</th>
          <th style="width: 100px;">{{$t('objFill.v101.FinancialModule.daifatic')}}</th>
          <th style="width: 100px;">{{$t('objFill.v101.FinancialModule.tichengcis')}}</th>
          <th style="width: 100px;">{{$t('tips.qishu')}}</th>
          <th width='200'>{{$t('pub.pubRemark')}}</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?$t('pub.yes'):''}}</td>
          <td>{{item.TCProfit?item.TCProfit:'-'}}</td>
          <td>{{item.PeopleNum?item.PeopleNum:'-'}}</td>
          <td>{{item.TCProfit?item.TCProfit:'-'}}</td><!-- TCGuestNum -->
          <td>{{item.Way==1?$t('objFill.xiaosoue'):$t('objFill.lirunbi')}}</td>
          <td><span class="cursor-p" :style="{'color': '#409EFF'}" @click="openCommissionRate(item.UserId,item.UserName)">{{item.Rate?item.Rate+'%':'-'}}</span></td>
          <td>{{item.OrderProfit}}</td>
          <td>{{item.CommissionMoney?item.CommissionMoney:'-'}}</td>
          <td>{{item.WaitCommissionMoney?item.WaitCommissionMoney:'-'}}</td>
          <td><span v-if="item.IssueNum<3" style="padding-left:5px;color:blue;cursor: pointer;text-decoration: underline;" @click="goUrlUser('TradeTicketDetails',item)">{{$t('tips.di')}}{{item.IssueNum}}{{$t('objFill.v101.FinancialModule.citicheng')}}</span>
            <span v-else-if="item.IssueNum>=3" style="padding-left:5px;color:red;cursor: pointer;text-decoration: underline;" @click="goUrlUser('TradeTicketDetails',item)">{{$t('tips.di')}}{{item.IssueNum}}{{$t('objFill.v101.FinancialModule.citicheng')}}</span></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">{{$t('system.content_noData')}}</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>

      <el-dialog width="1000px" :title="DigName+'-'+$t('objFill.v101.FinancialModule.tichengbil')" :visible.sync="outerVisible" center>
        <div>{{$t('objFill.v101.FinancialModule.zhuyxstcc')}}</div>
            <div
                class="cm_content"
                style="width: 100%;margin-bottom: 5px; "
            >
                <table
                class="po_content singeRowTable"
                style="border:1px solid #E6E6E6;"
                cellspacing="0"
                cellpadding="0"
                v-loading="loading">
                <tr>
                    <th>{{$t('ground.yuefen')}}</th>
                    <th>{{$t('advmanager.v_line')}}</th>
                    <th>{{$t('objFill.v101.FinancialModule.weijsdds')}}</th>
                </tr>
                <tr v-for="item in rateDataList">
                    <td>{{item.Month}}</td>
                    <td>
                        <span v-for="qitem in item.List">
                            {{qitem.LineName}} &nbsp;&nbsp; {{$t('objFill.v101.FinancialModule.dindanshu')}}：{{qitem.OrderNum}} &nbsp;&nbsp; {{$t('ground.ljlr')}}：{{qitem.TotalProfit}} &nbsp;&nbsp; {{$t('objFill.v101.FinancialModule.dingdanbil')}}：{{qitem.Rate}}% </br>
                        </span>
                    </td>
                    <td v-if="item.NoCommissionOrderNum>0">{{$t('objFill.gongji')}}：{{item.NoCommissionOrderNum}}{{$t('visa.v_dan')}}，<span v-for="oitem in item.NoCommissionOrderList">{{oitem}}、</span></td>
                    <td v-else>{{$t('fnc.no')}}</td>
                </tr>
                <tr v-if="rateDataList.length==0">
                    <td style="text-align:center" colspan="3">{{$t('system.content_noData')}}</td>
                </tr>
                </table>
            </div>
    <div slot="footer" class="dialog-footer">
        <button class="hollowFixedBtn" @click="outerVisible = false">{{$t('pub.cancelBtn')}}</button> &nbsp;
      </div>
    </el-dialog>

    </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: this.$t('pub.unlimitedSel'),id:'-1'},
              {name: this.$t('objfill.yingliu'),id:'2'},
              {name: this.$t('visat.sale'),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,
          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.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),
        this.msg.OrderType = this.$route.query.OrderType?this.$route.query.OrderType:-1
        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: {
        goUrlUser(path, item) {
              this.$router.push({
                  path: path,
                  query: {
                      PeriodId: 0,
                      UserId: item.UserId,
                      OrderId:item.OrderId,
                      OrderType:item.OrderType,
                      blank: 'y',
                      tab: '同业提现详情'
                  }
              });
          },
        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'
            }
          } 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(this.$t('objfill.v101.financialmodule.zhanbzck'))
            // 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 = this.$t('objFill.v101.FinancialModule.tongyetcryb')+".xls";
          this.GetLocalFile("sellcommission_GetTYSaleCommissionSingleDetailsListToExcel", msg, fileName);
        },
        openCommissionRate(userId,name){
                this.DigName = name;
                this.outerVisible = true;
                this.getCommissionRateData(userId);
            },
            getCommissionRateData(userId){
                this.loading = true;
                this.apipost(
                    "sellcommission_GetTYSaleHistoryCommissionRate",
                    {UserId : userId},
                    res => {
                        this.loading = false;
                        if (res.data.resultCode == 1) {
                            this.rateDataList = res.data.data;
                        } else {
                            this.Error(res.data.message);
                        }
                    },
                    null
                );
            }

      }
    }

  </script>
