<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: #33B3FF !important;
      color: #FFFFFF !important;
    }
    /deep/.relative-position .el-progress-bar__outer{
        border-radius: 0 !important;
    }
    /deep/.relative-position .el-progress-bar__inner{
        text-align: center;
        text-indent: 10px;
        border-radius: 0 !important;
    }
    /deep/.relative-position:first-child .el-progress{
        border-top-left-radius: 15px !important;
        border-bottom-left-radius: 15px !important;
        overflow: hidden !important
    }
    /deep/.relative-position:last-child .el-progress{
        border-top-right-radius: 15px !important;
        border-bottom-right-radius: 15px !important;
        overflow: hidden !important
    }
    .clickCp{
        cursor: pointer;
        color: #2961fe;
    }
</style>
<template>
    <div class="flexOne domesticCommissionUser">
        <template>
            <div
                class="cm_content"
                style="width: 100%;margin-bottom: 35px;margin-top: 30px;"
            >

            <div class="ITUDWageMoney-box" style="margin-bottom: 20px;">
                <span>{{$t('system.query_name')}}：{{EmName}}</span>
            </div>
                <table
                class="po_content singeRowTable"
                style="border:1px solid #E6E6E6;"
                cellspacing="0"
                cellpadding="0"
                v-loading="loading">
                <tr>
                    <th>{{$t('tips.qishu')}}</th>
                    <th>{{$t('advmanager.v_type')}}</th>
                    <th>{{$t('restaurant.res_profit')}}</th>
                    <th>{{$t('objFill.v101.FinancialModule.yingliushul')}}</th>
                    <th>{{$t('objFill.v101.FinancialModule.chengjiaodind')}}</th>

                </tr>
                <tr v-for="(item,index) in commissionratioList.List"
                    :key="index">
                    <td>{{item.Month}}</td>
                    <td>{{item.EmpType!=1?$t('objFill.yingliu'):$t('visaT.sale')}}</td>
                    <td>{{item.ProfitMoney}}</td>
                    <td>{{item.EmpType!=1?item.LureNum:'-'}}</td>
                    <td>{{item.EmpType!=1?item.OrderNum:'-'}}</td>
                </tr>
                <tr>
                    <td>{{$t('objFill.v101.FinancialModule.pingjun')}}</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>{{$t('objFill.v101.FinancialModule.zuijiagz')}}：{{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)"
                            :color="commissionratioList.WageMoney>=item.Rate?customColor[0]
                            :customColor[1]">
                            </el-progress>
                            <div class="rate-box">
                            <div class="sanjiao" :style="{'border-bottom-color':commissionratioList.WageMoney>=item.Rate?'#33B3FF':'#CACACA'}"></div>
                            <div class="rate full-width" :class="{'active-rate':commissionratioList.WageMoney>=item.Rate}">
                                <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>{{$t('objFill.v101.FinancialModule.tichengbil')}}：{{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)"
                            :color="commissionratioList.CommissionRate>=item.Rate?customColor[0]
                            :customColor[1]">
                            </el-progress>
                            <div class="rate-box">
                            <div class="sanjiao" :style="{'border-bottom-color':commissionratioList.CommissionRate>=item.Rate?'#33B3FF':'#CACACA'}"></div>
                                <div class="rate full-width" :class="{'active-rate':commissionratioList.CommissionRate>=item.Rate}">
                                    <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;"
            >{{$t('system.content_noData')}}</div>

        </template>
    </div>
</template>

<script>
    export default {
        props:{
            msgNew: {
                type: Object,
                default: null
            },
        },
        data() {
            return {
              customColor: ['rgba(51,179,255,1)','rgba(222,225,230,1)'],
                msg:{},
                EmName:'',
                EmpType:'',
                commissionratioList:[],//提成比例
                outerVisible:false,//提成比例弹窗
                loading: false,
                titleList:[
                    {name:this.$t('pub.unlimitedSel'),id:'-1'},
                    {name: this.$t('objfill.yingliu'),id:'2'},
                    {name: this.$t('visat.sale'),id:'1'}
                ],
                colors: [
                    'rgba(42, 48, 54,.2)',
                    'rgba(138, 24, 48,.2)',
                    'rgba(200, 138, 131,.2)',
                    'rgba(84, 221, 226,.2)',
                    'rgba(178, 199, 168,.2)',
                    'rgba(16, 195, 195,.2)',
                    'rgba(0, 21, 68,.2)',
                    'rgba(226, 166, 198,.2)',
                    'rgba(278,17,66,.2)',
                    'rgba(153, 199, 235,.2)',
                    'rgba(34,184,221,.2)',
                    'rgba(221,72,34,.2)',
                    'rgba(204,51,204,.2)',
                    'rgba(255,204,0,.2)',
                    'rgba(77,179,179,.2)',
                    'rgba(196,60,141,.2)',
                    'rgba(195,90,141,.2)',
                ],
                colorlists: [
                    'rgba(42, 48, 54, 1)',
                    'rgba(138, 24, 48, 1)',
                    'rgba(200, 138, 131, 1)',
                    'rgba(84, 221, 226, 1)',
                    'rgba(178, 199, 168, 1)',
                    'rgba(16, 195, 195, 1)',
                    'rgba(0, 21, 68, 1)',
                    'rgba(226, 166, 198, 1)',
                    'rgba(278,17,66, 1)',
                    'rgba(153, 199, 235,1)',
                    'rgba(34,184,221,1)',
                    'rgba(221,72,34,1)',
                    'rgba(204,51,204,1)',
                    'rgba(255,204,0,1)',
                    'rgba(77,179,179,1)',
                    'rgba(196,60,141,1)',
                    'rgba(195,90,141,1)',
                ],
            }
        },
        watch:{
            msgNew: {
                immediate:true,
                handler: function(val, oldVal) {
                    this.msg = val
                    this.GenerateScale()
                },
                deep: true
            },
        },
        mounted() {

        },
        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 100
                }
            },
            // 自定义进度条文字
            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(){
                this.loading = true
                this.EmName = this.msg.EmName
                this.EmpType = this.msg.EmpType
                let msg = {
                    WageReId:this.msg.WageReId
                }
                this.crmapipost("/api/Commission/GetCommissionSource",msg,res => {
                    if (res.data.resultCode == 1) {
                        this.loading = false
                        this.commissionratioList = res.data.data
                    } else {
                        this.loading = false
                        this.Error(res.data.message);
                    }
                    }
                );
            },

        }
    }
</script>