<style scoped>
    .CM_look {
        padding: 4px !important;
        position: relative;
        top: 1px;
    }

    .opUl li {
        display: inline-block;
        margin: 10px 15px 10px 0;
    }
    .domesticCommissionUser .opUl li input{
        height: 34px !important;
    }
    .domesticCommissionUser .singeRowTable{
        /* position: absolute; */
    }
    .domesticCommissionUser .singeRowTable tr td {
        padding: 8px 5px;
    }

    .domesticCommissionUser .hoverSpan span:hover {
        cursor: pointer;
        text-decoration: underline;
        color: red;
    }
    .text-fixed{
        /* height: 100%;
        position: absolute;
        left: 0;
        top: 0; */
    }
    .cursor-p{
        cursor: pointer;
    }
    .cursor-p:hover{
        color: #409EFF;
    }
    .ITUDWageMoney-box{
        margin-top: 20px;
        margin-bottom: 10px;
    }
    .ITUDschedule-Box-box{
        display: flex;
        flex-direction: row;
        justify-content: space-between;
    }
    .ITUDschedule-box{
        flex: 1;
        display: flex;
        flex-direction: column;
    }
    .ITUD-title{
        margin-top: 10px;
        margin-bottom: 10px;
    }
    .progress-box{
        flex: 1;
        display: flex;
        flex-direction: row;
        
    }
    .relative-position{
        flex: 1;
        margin-right: 0;
        position: relative;
    }
    /deep/.relative-position .el-progress-bar__outer{
        border-radius: 0 !important;
    }
    /deep/.relative-position .el-progress-bar__inner{
        border-radius: 0 !important;
    }
    .ITUD-text-box{
        position: relative;
    }
    .ITUD-text{
        position: absolute;
        z-index: 999;
        color: red;
    }
    .rate-box {
        position: absolute;
        top: 30px;
        left: 50%;
        transform: translateX(-50%);
        color: #000;
        z-index: 9;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        
    }
  .sanjiao {
      width: 0;
      height: 0;
      margin-left: 5%;
      border-right: 4px solid transparent;
      border-left: 4px solid transparent;
      border-bottom: 3px solid #CACACA;
    }
    .rate {
      min-width: 20px;
      padding: 2px 6px;
      background-color: #CACACA !important;
      display: flex;
      justify-content: center;
      align-items: center;
      color: #666666;
      font-size: 0.62vw;
      font-family: PingFang SC;
      border-radius: 7px;
      line-height:12px;
      white-space:nowrap;
    }
    .active-rate{
      background-color: #FF7262 !important;
      color: #FFFFFF !important;
    }
</style>
<template>
    <div class="flexOne domesticCommissionUser">
        <div>
            <ul class="opUl">
                <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 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">
            <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>操作</th>
            </tr>
            <tr v-for="item in dataList">
                <td>{{item.EmpType!=1?'引流':'销售'}}</td>
                <td>{{item.BranchName}}</td>
                <td>{{item.DeptName}}</td>
                <td>{{item.PostName?item.PostName:'-'}}</td>
                <td>{{item.EmName}}</td>
                <td>{{item.ProfitMoney}}</td>
                <td>{{item.EmpType!=1?item.LureNum:'-'}}</td>
                <td>{{item.EmpType!=1?item.OrderNum:'-'}}</td>
                <td>{{item.WageMoney}}</td>
                <td @click="GenerateScale(item)">
                    <span class="cursor-p">{{item.WageType!=1?'上季度定档':'新员工比例'}}</span>
                </td>
                <td>{{item.Commission}}</td>
                <td>{{item.CommissionRate}}%</td>
                <td>{{item.BonusMoney}}</td>
                <td>{{item.BonusRate}}%</td>
                <td>{{item.Month}}</td>
                <td>

                    <el-tooltip class="item" effect="dark" content="查看" placement="top">
                        <el-button type="primary" class="CM_look" @click="goUrl('ImpressionTicketDetails',item)"
                            icon="iconfont icon-chakan" circle></el-button>
                    </el-tooltip>


                </td>
            </tr>
            <tr v-if="dataList.length==0">
                <td style="text-align:center" colspan="14">暂无数据</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>
            <template>
                <div
                  class="cm_content"
                  style="width: 100%;margin-bottom: 35px;margin-top: 30px;"
                >
                  
                <div class="ITUDWageMoney-box" style="margin-bottom: 20px;">
                    <span>姓名：{{EmName}}</span>
                </div>
                  <table
                    class="po_content singeRowTable"
                    style="border:1px solid #E6E6E6;"
                    cellspacing="0"
                    cellpadding="0"
                    v-loading="loading">
                    <tr>
                        <th>期数</th>
                        <th>类型</th>
                        <th>利润</th>
                        <th>引流数量</th>
                        <th>成交订单</th>
                        
                    </tr>
                    <tr v-for="(item,index) in commissionratioList.List"
                        :key="index">
                        <td>{{item.Month}}</td>
                        <td>{{item.EmpType!=1?'引流':'销售'}}</td>
                        <td>{{item.ProfitMoney}}</td>
                        <td>{{item.EmpType!=1?item.LureNum:'-'}}</td>
                        <td>{{item.EmpType!=1?item.OrderNum:'-'}}</td>
                    </tr>
                    <tr>
                        <td>平均</td>
                        <td>-</td>
                        <td>{{commissionratioList.AvgProfit}}</td>
                        <td>{{commissionratioList.AvgLureNum}}</td>
                        <td>{{commissionratioList.AvfOrderNum}}</td>
                    </tr>
                  </table>
                  
                  <div class="ITUDschedule-Box-box">
                    <div class="ITUDschedule-box">
                        <div class="ITUDWageMoney-box">
                            <span>工资：{{commissionratioList.WageMoney}}</span>
                        </div>
                        <div class="progress-box">
                            <div v-for="(item,index) in commissionratioList.WageRateList" :key="index" 
                            class="relative-position">
                            <el-progress :text-inside="true" :stroke-width="20"
                              :percentage="setItemProgress(item)"
                              :status="setItemStatus(item)"
                              :format="setItemTextW(item)">
                              </el-progress>
                              <div class="rate-box" v-if="commissionratioList.AvgLureNum>item.StartValue&&
                                commissionratioList.AvfOrderNum>item.EndValue">
                                <div class="sanjiao" :style="{'border-bottom-color':commissionratioList.AvgLureNum>item.StartValue&&
                                commissionratioList.AvfOrderNum>item.EndValue?'#FF7262':'#CACACA'}"></div>
                                <div class="rate full-width" :class="{'active-rate':commissionratioList.AvgLureNum>item.StartValue&&
                                    commissionratioList.AvfOrderNum>item.EndValue}">
                                  <i class="el-icon-check" style="font-size:8px"></i> {{item.Rate}}%
                                </div>
                              </div>
                            </div>
                        </div>
                    </div>
                    <div class="ITUDschedule-box" style="margin-left: 20px;">
                        <div class="ITUDWageMoney-box">
                            <span>提成比例：{{commissionratioList.CommissionRate}}%</span>
                        </div>
                        <div class="progress-box">
                            <div v-for="(item,index) in commissionratioList.CommissionRateList" :key="index" 
                            class="relative-position">
                              <el-progress :text-inside="true" :stroke-width="20"
                              :percentage="setItemProgress(item)"
                              :status="setItemStatus(item)"
                              :format="setItemText(item)">
                              </el-progress>
                              <div class="rate-box" v-if="commissionratioList.AvgLureNum>item.StartValue&&
                                commissionratioList.AvfOrderNum>item.EndValue">
                                <div class="sanjiao" :style="{'border-bottom-color':commissionratioList.AvgLureNum>item.StartValue&&
                                commissionratioList.AvfOrderNum>item.EndValue?'#FF7262':'#CACACA'}"></div>
                                <div class="rate full-width" :class="{'active-rate':commissionratioList.AvgLureNum>item.StartValue&&
                                    commissionratioList.AvfOrderNum>item.EndValue}">
                                  <i class="el-icon-check" style="font-size:8px"></i> {{item.Rate}}%
                                </div>
                    
                              </div>
                            </div>
                        </div>
                    </div>
                    
                  </div>
                  
                </div>
                <div v-if="!commissionratioList"
                  style="width: 100%;border:1px solid #fff;display: flex;align-items: center;justify-content: center;height: 60px;margin-top: 30px;"
                >暂无数据</div>
               
              </template>
			<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 moment from "moment"
    export default {
        data() {
            return {
                EmName:'',
                EmpType:'',
                commissionratioList:[],//提成比例
                outerVisible:false,//提成比例弹窗
                Month: moment().format("YYYY-MM"),
                msg: {
                    pageIndex: 1,
                    pageSize: 20,
                    EmpId: -1,
                    PeriodsId: -1,
                    EmpType: '-1',
                },
                loading: false,
                //数据源
                dataList: [],
                total: 0,
                disabled: true,
                PeroidsList:[],
                searchList: [],
                departMentList:[],
                titleList:[
                    {name:'不限',id:'-1'},
                    {name:'引流',id:'2'},
                    {name:'销售',id:'1'}
                ],
            }
        },
        mounted() {
            let userInfo = this.getLocalStorage();
            let ActionMenuCode = userInfo.ActionMenuCode;
            if (this.$route.query && this.$route.query.PeriodsId) {
                this.msg.PeriodsId = Number(this.$route.query.PeriodsId)
            }
            if (this.$route.query && this.$route.query.EmpIds) {
                this.msg.EmpIds = this.$route.query.EmpIds
            }
            this.getList()
            this.getEmployee()//人员
            this.GetCommissionPeroidsList()//期数
        },
        methods: {
            // 自定义进度条文字
            setItemTextW(row) {
                return () => {
                    return row.StartValue + ' - ' + row.EndValue
                }
            },
            // 设置进度
            setItemProgress(data) {
                if(this.commissionratioList.AvgLureNum>=data.StartValue&&this.commissionratioList.AvfOrderNum>=data.EndValue){
                    return 100
                }else{
                    return 0
                }
            },
            // 自定义进度条文字
            setItemText(row) {
                this.formatProgress(row)
                return () => {
                    return row.StartValue + ' - ' + row.EndValue
                }
            },
            // 设置当前进度条状态，显示不同颜色
            setItemStatus(data) {
                if(this.commissionratioList.AvgLureNum>=data.StartValue&&this.commissionratioList.AvfOrderNum>=data.EndValue){
                    return 'exception'
                }
            },
            formatProgress(data){
                if (data.StartValue > 0) {
                    const s = data.StartValue.toString().slice(0, -4) ? data.StartValue.toString().slice(0, -4) : '0'
                    const e = data.StartValue.toString().slice(-4, -3)
                    data.StartValue = s + (e > 0 ? ('.' + e) : '') + 'w';
                } else if (data.StartValue == 0) {
                    data.StartValue = 0
                } else if (data.StartValue == -1) {
                   data.StartValue = '∞'
                }
                if (data.EndValue > 0) {
                    const s = data.EndValue.toString().slice(0, -4) ? data.EndValue.toString().slice(0, -4) : '0'
                    const e = data.EndValue.toString().slice(-4, -3)
                   data.EndValue = s + (e > 0 ? ('.' + e) : '') + 'w';
                } else if (data.EndValue == 0) {
                    data.EndValue = 0
                } else if (data.EndValue == -1) {
                    data.EndValue = '∞'
                }
            },
            // 获取员工生成比例
            GenerateScale(item){
                if(!item.WageReId){
                    return
                }
                this.EmName = item.EmName
                this.EmpType = item.EmpType
                let msg = {
                    WageReId:item.WageReId//item.WageReId?item.WageReId:6
                }
                this.crmapipost(
                    "/api/Commission/GetCommissionSource",msg,res => {
                    if (res.data.resultCode == 1) {
                        this.outerVisible = true
                        this.commissionratioList = res.data.data
                    } else {
                        this.Error(res.data.message);
                    }
                    }
                );
            },
            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;
                        }
                    },
                    err => { }
                );
            },

            handleCurrentChange(val) {
                this.msg.pageIndex = val;
                this.getList();
            },
            goUrl(path, item) {
                this.$router.push({
                    path: path,
                    query: {
                        PeriodsId: this.$route.query.PeriodsId,
                        EmpType:this.msg.EmpType,
                        EmpId: item.EmpId,  
                        blank: 'y',
                        tab: '票务提现详情'
                    }
                });
            },
            //获取数据
            getList() {
                this.loading = true;
                this.crmapipost(
                    "/api/Commission/GetCommissionEmpPageList",
                    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);
                        }
                    },
                    null
                );
            },
            exportExcel() { //导出
                var fileName = "印象票务提成明细表.xls";
                this.crmGetLocalFile("/api/Commission/GetCommissionEmpStatisticsToExcel", this.msg, fileName);
            }

        }
    }
</script>