  <style scoped>
    .addContacts .add-tit {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 20px;
}
.addContacts .add-tit p {
  display: flex;
  align-items: center;
  font-weight: bold;
  color: rgba(17, 17, 17, 1);
  font-size: 14px;
}
.addContacts .add-tit p span {
  display: inline-block;
  width: 6px;
  height: 6px;
  background: #409efe;
  border-radius: 50%;
  margin-right: 10px;
}
.addContacts .el-dialog__header {
  padding: 15px 20px;
  background: rgba(255, 255, 255, 1);
}
.addContacts .dialog-footer {
  text-align: center;
  background-color: rgba(248, 250, 251, 1);
  padding-bottom: 20px;
}
.addContacts .el-dialog__footer {
  padding: 0;
}
  </style>
  <template>
    <el-dialog @closed="closedDialog" :modal="false" :visible.sync="dialogTableVisible" :close-on-click-modal="false" class="addContacts">
      <div class="add-tit" slot="title">
        <p><span></span>提成列表</p>
        <span icon="el-icon-close"></span>
     </div>
      <div class="form-box">
        <el-table
            v-loading="loading"
            ref="multipleTable"
            :data="dataList"
            style="width: 100%"
            row-class-name="font-size-12">
            <!-- <el-table-column fixed type="selection" width="40"></el-table-column> -->
            <el-table-column 
                label="类型"
                show-overflow-tooltip>
                <template slot-scope="scope">
                    {{scope.row.EmpType!=1?'引流':'销售'}}
                </template>
            </el-table-column>
            <el-table-column 
                prop="BranchName"
                label="公司"
                show-overflow-tooltip>
            </el-table-column>
            <el-table-column 
                prop="DeptName"
                label="部门"
                show-overflow-tooltip>
            </el-table-column>
            <el-table-column 
                label="岗位"
                show-overflow-tooltip>
                <template slot-scope="scope">
                    {{scope.row.PostName?scope.row.PostName:'-'}}
                </template>
            </el-table-column>
            <el-table-column 
                prop="EmName"
                label="姓名"
                show-overflow-tooltip>
            </el-table-column>
            <el-table-column 
                prop="OrderId"
                label="订单号"
                show-overflow-tooltip>
            </el-table-column>
            <el-table-column 
                prop="OrderProfit"
                label="订单利润"
                show-overflow-tooltip>
            </el-table-column>
            <el-table-column 
                prop="Commission"
                label="提成"
                show-overflow-tooltip>
            </el-table-column>
            <el-table-column
                label="提成比例"
                show-overflow-tooltip>
                <template slot-scope="scope">
                    {{scope.row.CommissionRate}}%
                </template>
            </el-table-column>
            <el-table-column 
                prop="BonusMoney"
                label="年终"
                show-overflow-tooltip>
            </el-table-column>
            <el-table-column 
                label="年终比例"
                show-overflow-tooltip>
                <template slot-scope="scope">
                    {{scope.row.BonusRate}}%
                </template>
            </el-table-column>
            <el-table-column 
                prop="Month"
                label="期数"
                show-overflow-tooltip>
            </el-table-column>
            <el-table-column 
                label="备注"
                show-overflow-tooltip>
                <template slot-scope="scope">
                    {{scope.row.Remark?scope.row.Remark:'-'}}
                </template>
            </el-table-column>
            <!-- <el-table-column 
                prop="IsFirstContact"
                label="操作"
                show-overflow-tooltip>
                <template slot-scope="scope">
                    
                </template>
            </el-table-column> -->
        </el-table>
        <!-- 分页 -->
        <el-pagination class="Mypagination" background @current-change="handleCurrentChange"
            :page-sizes="[15, 30, 60, 90, 100]" :page-size="msg.pageSize" layout="total, sizes, prev, pager, next"
            @size-change="handleSizeChange" :total="total">
        </el-pagination>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" class="add-box-btn" @click="dialogTableVisible = false">确 定</el-button>
        <el-button class="add-box-btn add-box-cancel" @click="dialogTableVisible = false">取 消
        </el-button>
      </div>
    </el-dialog>
  </template>
  <script>
    export default {
      props: {
        parameters:{
            type: Object,
            default: true
        }
      },
      data() {
        return {
            total:0,
            dataList:[],
            msg: {
                pageIndex: 1,
                pageSize: 20,
                // EmpId: -1,
                // PeriodsId: -1,
                // EmpType: '-1',
                OrderId:''
            },
            loading:false,
            dialogTableVisible:false
        };
      },
      watch: {},
      created(){
         
      },
      mounted() {
        this.msg.OrderId = this.parameters.OrderId
        this.dialogTableVisible = true
        this.getList()
      },    
      methods: {
        //获取数据
        getList() {
            this.loading = true;
            this.apipost(
                "/api/Commission/GetCommissionOrderDetialPageList",
                this.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);
                    }
                }
            );
        },
        handleSizeChange(val) {
            this.msg.pageSize = val;
            this.getList();
        },
        handleCurrentChange(val) {
            this.msg.pageIndex = val;
            this.getList();
        },
        closedDialog(){
            this.MsgBus.$emit("closeaddContacts");
        }
      },
    };
  </script>