<template>
    <div class="payroll-box">
        <div class="tools">
            <!-- <h1>订单管理</h1> -->
            <div class="rightmenu">
                <!-- <el-button size="mini" type="primary" @click="downLoadExcel">导出</el-button> -->
            </div>
        </div>
        <div class="query-box">
            <el-row :gutter="20" style="position: relative;">
                <el-col :xs="7" :sm="6" :md="5" :lg="4" :xl="3">
                    <span class="font-size-12" style="padding-right: 10px;flex-shrink: 0;">期数：</span>
                    <el-select size="mini" width="200" v-model="msg.PeriodsId" placeholder="请选择" @change="getList">
                        <el-option label="不限" :value="-1"></el-option>
                        <el-option v-for="item in PeroidsList" :key="item.Id" :label="item.Periods" :value="item.Id">
                        </el-option>
                    </el-select>
                </el-col>
                <el-col :xs="7" :sm="6" :md="5" :lg="4" :xl="3">
                    <span class="font-size-12" style="padding-right: 10px;flex-shrink: 0;">月份：</span>
                    <el-select size="mini" width="200" v-model="msg.MonthId" placeholder="请选择" @change="getList">
                        <el-option v-for="item in monthList" :key="item.Id" :label="item.Name" :value="item.Id">
                        </el-option>
                    </el-select>
                </el-col>
                <el-col :xs="13" :sm="14" :md="15" :lg="16" :xl="17" v-if="PredictData.State==1">
                    <div style="text-align: right;position: absolute;right: 20px;top: 0;font-size: 14px;">
                        {{PredictData.EmpType==1?'当月预期利润':'当月预期引流数量'}}
                        <template v-if="PredictData.EmpType==1">
                            <span style="font-size: 16px;"
                                :style="{'color':PredictData.OrderProfit>PredictData.LimitMoney?'red':'green'}">{{PredictData.OrderProfit}}</span>
                            <template v-if="PredictData.LimitMoney>0">
                                <span style="font-size: 16px;"> /</span>
                                <span style="font-size: 16px;">
                                    {{PredictData.LimitMoney}}
                                </span>
                            </template>
                            <template v-if="PredictData.SalesMoney">
                                <span>销售额 </span>
                                <span style="font-size: 16px;"
                                    :style="{'color':!PredictData.SalesMoney?'red':'green'}">{{PredictData.SalesMoney}}</span>
                            </template>
                            <span style="color: red;margin-left: 5px;"
                                v-if="PredictData.LimitMoney>0&&PredictData.LimitMoney>PredictData.OrderProfit">
                                目标未达成仍需努力
                            </span>
                        </template>
                        <template v-else>
                            <span style="font-size: 16px;"
                                :style="{'color':PredictData.LureNum>PredictData.LimitNum?'red':'green'}">{{PredictData.LureNum}}</span>
                            <template v-if="PredictData.LimitNum>0">
                                <span style="font-size: 16px;"> /</span>
                                <span style="font-size: 16px;">
                                    {{PredictData.LimitNum}}
                                </span>
                            </template>
                            <template v-if="PredictData.SalesMoney">
                                <span>销售额 </span>
                                <span style="font-size: 16px;"
                                    :style="{'color':!PredictData.SalesMoney?'red':'green'}">{{PredictData.SalesMoney}}</span>
                            </template>
                            <span style="color: red;margin-left: 5px;font-size: 14px;"
                                v-if="PredictData.LimitNum>0&&PredictData.LimitNum>PredictData.LureNum">
                                目标未达成仍需努力
                            </span>
                        </template>
                    </div>
                </el-col>
            </el-row>
        </div>
        <div class="page-content">
            <el-table v-loading="loading" stripe ref="multipleTable" :data="dataList" tooltip-effect="dark"
                style="width: 100%" :height="dataList.length > 0 ? '600' : '660'" row-class-name="font-size-12">
                <el-table-column label="期数">
                    <template slot-scope="scope">
                        {{scope.row.Month}}
                    </template>
                </el-table-column>
                <el-table-column label="总利润">
                    <template slot-scope="scope">
                        {{scope.row.ProfitMoney}}
                    </template>
                </el-table-column>
                <el-table-column label="总销售额">
                    <template slot-scope="scope">
                        {{scope.row.SalesMoney?scope.row.SalesMoney:'-'}}
                    </template>
                </el-table-column>
                <el-table-column label="引流数量">
                    <template slot-scope="scope">
                        {{scope.row.EmpType == 1 ? '-' : scope.row.LureNum}}
                    </template>
                </el-table-column>
                <el-table-column label="成交单数">
                    <template slot-scope="scope">
                        {{scope.row.EmpType == 1 ? '-' : scope.row.OrderNum}}
                    </template>
                </el-table-column>
                <el-table-column label="工资规则">
                    <template slot-scope="scope">
                        <span :class="scope.row.WageReId?'cursor-p':''"
                            @click="GenerateScale(scope.row)">{{scope.row.WageType!=1?'上季度定档':'新员工比例'}}</span>
                    </template>
                </el-table-column>
                <!-- <el-table-column label="追加工资">
                    <template slot-scope="scope">
                        + {{scope.row.WageMoney}}
                    </template>
                </el-table-column> -->
                <el-table-column label="本次提成比例">
                    <template slot-scope="scope">
                        {{scope.row.CommissionRate}}%
                    </template>
                </el-table-column>
                <el-table-column label="提成金额">
                    <template slot-scope="scope">
                        <span :class="scope.row.Commission<0?'red':(scope.row.Commission==0?'black':'green')"
                            @click="scope.row.Commission>=0?commissionDetails(scope.row):''">{{scope.row.Commission}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="本次年终比例">
                    <template slot-scope="scope">
                        {{scope.row.BonusRate}}%
                    </template>
                </el-table-column>
                <el-table-column label="当月年终奖励">
                    <template slot-scope="scope">
                        {{scope.row.BonusMoney}}
                    </template>
                </el-table-column>
                <el-table-column label="累计年终奖励">
                    <template slot-scope="scope">
                        {{scope.row.TotalBonus}}
                    </template>
                </el-table-column>

                <el-table-column label="备注" show-overflow-tooltip min-width="100">
                    <template slot-scope="scope">
                        {{scope.row.Remark?scope.row.Remark:'-'}}
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div v-if="total>0">
            <el-pagination class="Mypagination" background @current-change="handleCurrentChange"
                :page-sizes="[10, 20, 30, 60, 90, 100]" :page-size="msg.pageSize"
                layout="total, sizes, prev, pager, next" @size-change="handleSizeChange" :total="total">
            </el-pagination>
        </div>
        <!-- 查看生成比例 -->
        <el-dialog custom-class='w1006' title="员工生成比例" :visible.sync="outerVisible" center>
            <inAccordanceWith v-if="objNew" :msgNew="objNew"></inAccordanceWith>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" class="add-box-btn" @click="outerVisible = false">确 定</el-button>
                <el-button class="add-box-btn add-box-cancel" @click="outerVisible = false">取 消
                </el-button>
            </div>
        </el-dialog>
        <commissionPopUp v-if="commissionPopUpVisible" :parameters="parameters"></commissionPopUp>
    </div>
</template>

<script>
    import commissionPopUp from "../dialogModel/commissionPopUp"
    import inAccordanceWith from "../dialogModel/inAccordanceWithDialog"
    export default {
        components: {
            commissionPopUp,
            inAccordanceWith
        },
        data() {
            return {
                monthList:[
                    {Name:'当月',Id:0,},
                    {Name:'上月',Id:1,},
                ],
                commissionPopUpVisible: false,
                parameters: {},
                outerVisible: false,
                objNew: {},
                commissionratioList: [],
                EmName: '',
                EmpType: '',
                outerVisible: false,
                loading: false,
                PeroidsList: [],
                titleList: [{
                        name: '不限',
                        id: '-1'
                    },
                    {
                        name: '引流规则',
                        id: '2'
                    },
                    {
                        name: '销售规则',
                        id: '1'
                    }
                ],
                dataList: [],
                total: 0,
                msg: {
                    pageIndex: 1,
                    pageSize: 20,
                    PeriodsId: -1,
                    MonthId: 0,
                    Month: '',
                },
                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,.23)',
                    '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)',
                ],
                PredictData: {}
            }
        },
        mounted() {
            let $this = this
            this.getList()
            this.GetCommissionPeroidsList()
            this.MsgBus.$on("closeaddContacts", function () {
                $this.commissionPopUpVisible = false;
            });
            this.getMyCommissionMonthPredict()
        },
        methods: {
            getMyCommissionMonthPredict() {
                this.apipost(
                    "/api/commission/GetMyCommissionMonthPredict", {},
                    (res) => {
                        if (res.data.resultCode == 1) {
                            this.PredictData = res.data.data
                        }
                    },
                    (err) => {}
                );
            },
            // 提成详情
            commissionDetails(item) {
                this.parameters = item
                this.commissionPopUpVisible = true
            },
            // 自定义进度条文字
            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(item) {
                if (!item.WageReId) {
                    return
                }
                this.objNew = item
                this.outerVisible = true
            },
            GetCommissionPeroidsList() { //期数下拉
                this.apipost(
                    "/api/Commission/GetCommissionPeroidsList", {}, res => {
                        if (res.data.resultCode == 1) {
                            this.PeroidsList = res.data.data;
                        } else {
                            this.Error(res.data.message);
                        }
                    }
                );
            },
            // 获取订单列表
            getList() {
                var myDate = new Date();
                let getMonth = parseInt(myDate.getMonth()) 
                let getMonth1 = parseInt(myDate.getMonth() + 1)
                if(this.msg.MonthId){
                    this.msg.Month = myDate.getFullYear() + '-' + (getMonth>10?getMonth:'0'+getMonth)
                }else{
                    this.msg.Month = myDate.getFullYear() + '-' + (getMonth1>10?getMonth1:'0'+getMonth1)
                }
                this.loading = true;
                this.apipost(
                    "/api/Commission/GetMyCommissionPageList",
                    this.msg,
                    (res) => {
                        if (res.data.resultCode == 1) {
                            this.loading = false
                            this.dataList = res.data.data.pageData
                            this.total = res.data.data.count;
                        } else {
                            this.loading = false
                            this.$message.error(res.data.message);
                        }
                    })
            },
            handleSizeChange(val) {
                this.msg.pageSize = val;
                this.getList();
            },
            handleCurrentChange(val) {
                this.msg.pageIndex = val;
                this.getList();
            },
        }
    }
</script>

<style scoped>
    /deep/.el-table tr:first-child th:nth-child(6) {
        background: #FFE082 !important;
    }

    /deep/.el-table tr:first-child th:nth-child(7) {
        background: #FFE082 !important;
    }

    /deep/.el-table tr:first-child th:nth-child(8) {
        background: #FFE082 !important;
    }

    /deep/.el-table tr:first-child th:nth-child(9) {
        background: #E1BEE7 !important;
    }

    /deep/.el-table tr:first-child th:nth-child(10) {
        background: #E1BEE7 !important;
    }

    /deep/.el-table tr:first-child th:nth-child(11) {
        background: #E1BEE7 !important;
    }

    /deep/.el-table tr td:nth-child(6) {
        background: #FFE082;
    }

    /deep/.el-table tr td:nth-child(7) {
        background: #FFE082;
    }

    /deep/.el-table tr td:nth-child(8) {
        background: #FFE082;
    }

    /deep/.el-table tr td:nth-child(9) {
        background: #E1BEE7;
    }

    /deep/.el-table tr td:nth-child(10) {
        background: #E1BEE7;
    }

    /deep/.el-table tr td:nth-child(11) {
        background: #E1BEE7;
    }

    .cursor-p {
        cursor: pointer;
    }

    .cursor-p:hover {
        color: #409EFF;
    }

    .red {
        color: red;
    }

    .black {
        color: black;
        cursor: pointer;
        padding: 5px 10px 5px 0;
    }

    .green {
        color: green;
        cursor: pointer;
    }

    .black:hover,
    .green:hover {
        color: #409EFF;
    }
</style>