define({
    name: "dealerCommission",
    template: `
<div>
    <el-form label-width="200px">
        <div id="vue_head">
            <div class="base_set">
                <div class="vue-main-title">
                    <div class="vue-main-title-left"></div>
                    <div class="vue-main-title-content">经销商提成设置</div>
                </div>
                <el-divider></el-divider>

                <div class="vue-main-form">
                    <el-form-item label="开启经销商提成">
                        <el-radio v-model="is_dividend" :label="0">关闭</el-radio>
                        <el-radio v-model="is_dividend" :label="1">开启</el-radio>
                        <div class="help-block">如果不开启经销商提成，则不产生提成金额</div>
                    </el-form-item>
                    <el-form-item label="购买商品分红限制">
                        <el-radio v-model="is_restrict" :label="0">关闭</el-radio>
                        <el-radio v-model="is_restrict" :label="1">开启</el-radio>
                        <div class="help-block">
                            <span class="help-block-detail">如果开启了，经销商推广该商品计算分红时，如果经销商没有购买过该商品，则不能获得经销商全部的分红奖励(包括经销商分红、平级奖等)，并不计入平级奖层级，但计入经销提成层级限制</span>
                        </div>
                    </el-form-item>
                    <el-form-item label="经销商平级奖">
                        <el-radio v-model="is_hierarchy" :label="0">关闭</el-radio>
                        <el-radio v-model="is_hierarchy" :label="1">开启</el-radio>
                        <div class="help-block">如果不开启经销商平级奖，则不产生平级奖</div>
                    </el-form-item>
                    <el-form-item label="独立规则">
                        <el-switch v-model="has_dividend" :active-value="1" :inactive-value="0"></el-switch>
                        <span>启用独立提成比例</span>
                        <div class="help-block">启用独立提成金额设置，此商品拥有独自的提成金额,不受默认设置限制</div>
                    </el-form-item>
                    <el-form-item v-show="has_dividend">
                        <el-row :gutter="20" class="gutter">
                            <el-col :span="6">
                                <div class="grid-content bg-purple">经销商等级</div>
                            </el-col>
                            <el-col :span="12">
                                <div class="grid-content bg-purple">提成比例</div>
                            </el-col>
                            <el-col :span="6">
                                <div class="grid-content bg-purple" v-if="teamSet.is_extra_award == 1">额外奖励</div>
                            </el-col>
                        </el-row>
                        <el-row :gutter="20" class="gutter" v-for="(level, index) in levelList" :key="level.id">
                            <el-col :span="6">
                                <div class="grid-content bg-purple">{{level.level_name}}</div>
                            </el-col>
                            <el-col :span="12" class="flex-col">
                                <el-input placeholder="请输入百分比" v-model="level.has_dividend_rates" maxlength="10" size="small" oninput="if(value<0)value=''" type="number">
                                    <template slot="append">%</template>
                                </el-input>
                                <el-input placeholder="请输入金额" v-model="level.has_dividend_prices" maxlength="10" size="small" oninput="if(value<0)value=''" type="number">
                                    <template slot="append">元 固定</template>
                                </el-input>
                            </el-col>
                            <el-col :span="6" class="flex-col" v-if="teamSet.is_extra_award == 1">
                                <el-input placeholder="请输入金额" v-model="level.has_dividend_extra" maxlength="10" size="small " oninput="if(value<0)value=''" type="number">
                                    <template slot="append">元</template>
                                </el-input>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="17" style="width:100%">
                                <div class="help-block">
                                    <span class="help-block-detail">如果比例都为空或等于0，则使用固定金额规则，如果比例和金额都为空或等于0则不获得提成(ps:为了确保经销商能获得提成，建议统一设置为比例或者统一设置为固定金额，如果高等级设置比例低等级设置固定金额，有可能会造成部分经销商无提成)</span>
                                    <span class="help-block-detail">商品启用经销商独立提成：如果商品经销商独立提成设置的是比例，那么平级奖计算金额则按照商品实际支付金额计算； 如果商品经销商独立提成设置的是固定金额，那么平级奖计算金额则按照固定金额计算</span>
                                </div>
                            </el-col>
                        </el-row>
                    </el-form-item>
                    <el-form-item label="分月返佣">
                        <el-switch v-model="is_stages" :active-value="1" :inactive-value="0"></el-switch>
                        <span>启用分月返佣</span>
                        <div class="help-block">启用后，独立规则将失效；返佣规则将按照分月返佣规则返佣</div>
                    </el-form-item>
                    <el-form-item v-show="is_stages">
                        <el-row :gutter="20" class="gutter">
                            <el-col :span="6">
                                <div class="grid-content bg-purple">经销商等级</div>
                            </el-col>
                            <el-col :span="12">
                                <div class="grid-content bg-purple">佣金类型</div>
                            </el-col>
                            <el-col :span="6">
                                <div class="grid-content bg-purple">分多少月</div>
                            </el-col>
                        </el-row>
                        <div v-for="(level, index) in levelList" :key="level.id">
                            <el-row :gutter="20" class="gutter">
                                <el-col :span="6">
                                    <div class="grid-content bg-purple">{{level.level_name}}</div>
                                </el-col>
                                <el-col :span="12" class="flex-col">
                                    <el-radio v-model="level.stages_type" :label="0">百分比</el-radio>
                                    <el-radio v-model="level.stages_type" :label="1">固定金额</el-radio>
                                </el-col>
                                <el-col :span="6" class="flex-col">
                                    <el-input v-model="level.stages_num" @input="changeMonth(index)" maxlength="10" size="small " type="number">
                                        <template slot="append">期</template>
                                    </el-input>
                                </el-col>
                            </el-row>
                            <el-row :gutter="20" class="gutter">
                                <el-input v-model.number="level.immediately"
                                    maxlength="10"
                                    size="small"
                                    type="number"
                                    style="width: 230px;float: left;margin-right: 10px;margin-bottom: 10px;"
                                >
                                    <template slot="prepend">立即返佣</template>
                                    <template slot="append">{{ level.stages_type == 1 ? '元' : '%'}}</template>
                                </el-input>
                                <el-input
                                    v-for="(monthInfo,index) in level.stages_month_list"
                                    v-model.number="level.stages_month_list[index]"
                                    maxlength="10"
                                    size="small"
                                    type="number"
                                    style="width: 230px;float: left;margin-right: 10px;margin-bottom: 10px;"
                                >
                                    <template slot="prepend">第 {{ index }} 月返佣</template>
                                    <template slot="append">{{ level.stages_type == 1 ? '元' : '%'}}</template>
                                </el-input>
                            </el-row>
                        </div>
                    </el-form-item>
                    
                    <el-form-item label="平级奖独立规则">
                        <el-switch v-model="has_peers" :active-value="1" :inactive-value="0"></el-switch>
                        <span>启用独立提成比例</span>
                        <div class="help-block">比例为空或等于0则则无平级奖</div>
                    </el-form-item>
                    <el-form-item v-show="has_peers">
                        <el-row :gutter="20" class="gutter">
                            <el-col :span="6">
                                <div class="grid-content bg-purple">经销商等级</div>
                            </el-col>
                            <el-col :span="12">
                                <div class="grid-content bg-purple">平级奖</div>
                            </el-col>
                        </el-row>
                        <el-row :gutter="20" class="gutter" v-for="(level, index) in levelList" :key="level.id">
                            <el-col :span="6">
                                <div class="grid-content bg-purple">{{level.level_name}}</div>
                            </el-col>
                            <el-col :span="12" class="flex-col">
                                <el-col :span="14">
                                    <el-input placeholder="请输入层级" v-model="level.hierarchy" maxlength="10" size="small ">
                                        <template slot="prepend">层级</template>
                                        <template slot="append">层</template>
                                    </el-input>
                                </el-col>
                                <el-col :span="10">
                                    <el-input placeholder="请输入百分比" v-model="level.ratio" maxlength="10" size="small" oninput="if(value<0)value=''" type="number">
                                        <template slot="append">%</template>
                                    </el-input>
                                </el-col>
                            </el-col>
                        </el-row>
                    </el-form-item>
                    <el-divider></el-divider>
                </div>
            </div>
        </div>
    </el-form>
</div>
    `,
    style: `
    .help-block{
        font-size:12px;
    }
    .help-block-detail{
        white-space:pre-wrap;
        display: flex;
        flex-direction: column;
    }
    .location{
        display:flex;
        justify-content:flex-end;
    }
    .gutter{
        text-align:center;
    }
    .flex-col{
        display:flex;
        margin-top:5px;
    }
    .el-input-group__append, .el-input-group__prepend {
        padding: 0 10px;
    }
    `,
    props: {
      form: {
        type: Object,
        default() {
          return {}
        }
      }
    },
    data(){
      return {
          is_dividend: 1,
          is_restrict: 0,
          is_hierarchy: 0,
          has_dividend: 0,
          has_peers: 0,
          teamSet: {},
          levelList: [],
          is_stages: 0,
      }
    },
    mounted(){
        if (this.form.item && !Array.isArray(this.form.item)) {
            this.is_dividend = this.form.item.is_dividend;
            this.is_restrict = this.form.item.is_restrict;
            this.is_hierarchy = this.form.item.is_hierarchy;
            this.has_dividend = this.form.item.has_dividend;
            this.has_peers = this.form.item.has_peers;

            this.is_stages = this.form.item.is_stages
        }
        this.teamSet = JSON.parse(JSON.stringify(this.form.teamSet !== null ? this.form.teamSet : {}));
        this.levelList = JSON.parse(JSON.stringify(this.form.dividendLevel));
    },

    methods: {
        pick  (obj, arr) {
            arr.reduce((iter, val) => (val in obj && (iter[val] = obj[val]), iter), {});
        },
        filterList (list=[]) {
            let ratesList = {};
            let pricesList = {};
            let extraList = {};
            let gradeList = {};
            let stagesTypeList = {};
            let stagesNumList = {};
            let stagesMonthList = {};
            let immediatelyList = {};
            list.forEach((item, index) => {
                let key = 'level_' + item.id;
                let {has_dividend_rates, has_dividend_prices, has_dividend_extra, hierarchy, ratio, stages_type,stages_num, stages_month_list, immediately} = item;
                // 独立规则
                if (this.has_dividend) { 
                    ratesList[key] = has_dividend_rates;
                    pricesList[key] = has_dividend_prices;
                }
                // 额外奖励
                if (this.has_dividend && this.teamSet.is_extra_award == 1) {
                    extraList[key] = has_dividend_extra;
                }
                // 分期佣金
                if(this.is_stages){
                    stagesTypeList[key] = stages_type;
                    stagesNumList[key] = stages_num;
                    stagesMonthList[key] = stages_month_list;
                    immediatelyList[key] = immediately;
                }


                // 平级奖
                if (this.has_peers) {
                    gradeList[item.id] = {
                        hierarchy,
                        ratio
                    }
                }
            });
            return {ratesList, pricesList, extraList, gradeList, stagesTypeList, stagesNumList, stagesMonthList, immediatelyList }
        },
        validate () {
            let aggregate = this.filterList(this.levelList);
            return {
                has_peers: this.has_peers,
                is_dividend: this.is_dividend,
                is_restrict: this.is_restrict,
                is_hierarchy: this.is_hierarchy,
                has_dividend: this.has_dividend,
                // dividendLevel: this.filterList(this.levelList)
                has_dividend_rates: aggregate.ratesList,
                has_dividend_prices: aggregate.pricesList,
                has_dividend_extra: aggregate.extraList,
                has_hierarchys: aggregate.gradeList,

                is_stages: this.is_stages,
                stages_type: aggregate.stagesTypeList,
                stages_num: aggregate.stagesNumList,
                stages_month_list: aggregate.stagesMonthList,
                immediately: aggregate.immediatelyList
            }
        },
        changeMonth(index){
            let currentLevel = Object.assign({}, this.levelList[index]);
            let stagesMonthList = currentLevel.stages_month_list || {};
            let stages_num = currentLevel.stages_num || 0;
            let newStagesMonthList = {};
            for (stages_num;stages_num>0;stages_num--){
                newStagesMonthList[stages_num] = stagesMonthList[stages_num] || 0;
            }

            currentLevel.stages_month_list = newStagesMonthList;

            this.$set(this.levelList, index,currentLevel);
            this.$forceUpdate();
        }
    },

  })