<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('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('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>
            </div>
            <p style="margin-top: 10px;">
              <span>{{$t('objFill.zongrenshu')}}：
                {{dataObj.TotalNum}}
              </span>
              <span style="margin-left: 20px;">{{$t('objFill.zongticeng')}}：
                {{dataObj.TotalMoney}}
              </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.tuanduizrs')}}</th>
          <th style="width: 100px;">{{$t('objFill.v101.FinancialModule.tichengbil')}}</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.PeopleNum?item.PeopleNum:'-'}}</td>
          <td><span class="cursor-p" :style="{'color': '#409EFF'}">{{item.Rate?item.Rate+'/'+$t('hotel.hotel_people'):'-'}}</span></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('YNTradeTicketDetails',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('YNTradeTicketDetails',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>

    </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
            BranchType:1
          },
          loading: false,
          //数据源
          dataList: [],
          total: 0,
          PeroidsList:[],
          searchList: [],
          TotalMoney: 0,
          TotalNum: 0,
          disabled: true,
          OrderTypeList:[],
          S_CheckBranchOrder:false,
          S_CheckAllOrder:false,
          disabled:true
        }
      },
      created(){
          let userInfo = this.getLocalStorage();
          this.GetCommissionPeroidsList()//期数
          this.getEmployee() //人员          
      },
      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.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.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);
            }
          });
        },
            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(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",
              }
            });
          }
        })
      },

        GetCommissionPeroidsList() { //期数下拉
            this.apipost(
                "sellcommission_GetTYSaleCommissionPeriodsList",{BranchType:1},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: "1252",
            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);
        },

      }
    }

  </script>