<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-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-select v-model="msg.EmpType" size="mini" @change="handleCurrentChange(1)" filterable>
                  <el-option v-for="(item,index) in titleList" :key="item.index" :label="item.name"
                      :value="item.id"></el-option>
              </el-select>
            </li>
            <li>
              <em>人员</em>
              <el-select v-model="msg.EmpId" size="mini" @change="handleCurrentChange(1)" 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-select v-model="msg.PeriodsId" 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>
        </ul>
      </div>
      <div style="display: flex;align-items: center;height: 50px;justify-content: space-between;">
        <div style="display: flex;align-items: center;">
          
        </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>未达标提成</th>
          <th>提成比例</th>
          <th>依据类型</th>
          <th>年终</th>
          <th>年终比例</th>
          <th>期数</th>
          <th width='300'>备注</th>
  
          <!-- <th>操作</th> -->
        </tr>
        <tr v-for="item in dataList">
          <td>{{item.EmpType==1?'销售':item.EmpType==2?'引流':'-'}}</td>
          <td>{{item.BranchName}}</td>
          <td>{{item.DeptName}}</td>
          <td>{{item.PostName?item.PostName:'-'}}</td>
          <td>{{item.EmName}}</td>
          <td><span class="cursor-p" @click="clickUrl(item,1)">{{item.OrderId}}</span></td>
          <td>{{item.OrderProfit}}</td>
          <td>{{item.YCommission}}</td>
          <td>{{item.Commission}}</td>
          <td>{{item.LimitCommission != 0?item.LimitCommission:'-'}}</td>
          <td>{{item.CommissionRate}}%</td>
          <td @click="GenerateScale(item)">
            <span
              :class="item.WageReId?'cursor-p':''">{{item.WageType==1?'新员工比例':item.WageType==2?'上季度定档':'-'}}</span>
          </td>
          <td>{{item.EmName!='微途'?item.BonusMoney:'-'}}</td>
          <td>{{item.EmName!='微途'?item.BonusRate+'%':'-'}}</td>
          <td>{{item.Month}}</td>
          <td>{{item.Remark?item.Remark:'-'}}</td>
        </tr>
        <tr v-if="dataList.length==0">
          <td style="text-align:center" colspan="16">暂无数据</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 custom-class='w1006' title="员工生成比例" :visible.sync="outerVisible" center>
        <inAccordanceWith v-if="objNew" :msgNew="objNew"></inAccordanceWith>
        <div slot="footer" class="dialog-footer">
          <button class="hollowFixedBtn" @click="outerVisible = false">取消</button> &nbsp;
          <button class="normalBtn" type="primary" @click="outerVisible = false">确定</button>				
        </div>
		  </el-dialog>
    </div>
  </template>
  
  <script>
    import inAccordanceWith from "./inAccordanceWithDialog"
    import moment from "moment"
    export default {
      components:{
        inAccordanceWith
      },
      data() {
        return {
          objNew:{},
          outerVisible:false,
          Month: moment().format("YYYY-MM"),
          msg: {
            pageIndex: 1,
            pageSize: 20,
            EmpId: -1,
            PeriodsId: -1,
            EmpType: '-1',
            OrderId:''
          },
          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'}
          ],

        }
      },
      mounted() {
        let userInfo = this.getLocalStorage();
        
        this.getEmployee() //人员
        this.GetCommissionPeroidsList()//期数
        let ActionMenuCode = userInfo.ActionMenuCode;
        if (this.$route.query) { //不大于0的话用默认值
          if (this.$route.query.PeriodsId && this.$route.query.PeriodsId > 0) {
            this.msg.PeriodsId = Number(this.$route.query.PeriodsId)
          }
          if (this.$route.query.EmpType) {
            this.msg.EmpType = this.$route.query.EmpType
          }
        }
      },
      methods: {
        clickUrl(item,type){
            if(type==2){//线索
                
            }else{
                this.OrderStatistics(item)
            }
        },
        // 订单统计
        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);
      },
        GenerateScale(item){
          if(!item.WageReId){
              return
          }
          this.objNew = item
          this.outerVisible = true
        },
        GetCommissionPeroidsList() { //期数下拉
            this.crmapipost(
                "/api/Commission/GetCommissionPeroidsList",{},res => {
                if (res.data.resultCode == 1) {
                    this.PeroidsList = res.data.data;
                } 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;
                if (this.$route.query.EmpId) {
                  this.msg.EmpId = Number(this.$route.query.EmpId)
                  this.getList()
                }
              }
            },
            err => {}
          );
        },
  
  
        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.crmapipost(
            "/api/Commission/GetCommissionOrderDetialPageList",
            msg,
            res => {
              this.loading = false;
              if (res.data.resultCode == 1) {
                this.dataList = res.data.data.pageData;
                this.total = res.data.data.count;
              } else {
                this.Error(res.data.message);
              }
            }
          );
        },
        exportExcel() { //导出
          var fileName = "印象票务提成人员表.xls";
          this.crmGetLocalFile("/api/Commission/GetCommissionOrderDetialToExcel", this.msg, fileName);
        }
  
      }
    }
  
  </script>
  