define({
    name: "AnchorwomanBonus",
    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="isCommerce" :label="1">关闭</el-radio>
                        <el-radio v-model="isCommerce" :label="0">开启</el-radio>
                        <div class="help-block">关闭后主播选择商品页面不显示该商品</div>
                    </el-form-item>
                    <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="独立规则" prop="rule">
                        <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" label="" label-width="50px">
                        <el-row :gutter="20" class="gutter">
                            <el-col :span="3">
                                <div class="grid-content bg-purple">等级名称</div>
                            </el-col>
                            <el-col :span="10">
                                <div class="grid-content bg-purple">奖励比例</div>
                            </el-col>
                        </el-row>
                        <el-row :gutter="20" class="gutter" v-for="(level, index) in ruleLevels" :key="level.id">
                            <el-col :span="3">
                                <div class="grid-content bg-purple">{{level.name}}</div>
                            </el-col>
                            <el-col :span="10" class="flex-col">
                                <el-form-item prop="">
                                    <el-input v-model="level.has_dividend_rate" maxlength="10" size="small" oninput="if(value<0)value=''" type="number">
                                        <template slot="append">% 固定</template>
                                    </el-input>
                                </el-form-item>
                                <el-form-item prop="">
                                    <el-input v-model="level.has_dividend_price" maxlength="10" size="small" oninput="if(value<0)value=''" type="number">
                                        <template slot="append">元</template>
                                    </el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-form-item>
                    <el-divider></el-divider>
                </div>
            </div>
        </div>
    </el-form>
</div>
    `,
    style: `
    .help-block{
        font-size:12px;
    }
    .location{
        display:flex;
        justify-content:flex-end;
    }
    .gutter{
        text-align:center;
    }
    .flex-col{
        display:flex;
        margin-top:5px;
    }
    .vue-main-form {
        padding-left: 50px;
    }
    input::-webkit-outer-spin-button,
    input::-webkit-inner-spin-button {
      -webkit-appearance: none !important;
    }
    input[type="number"]{
      -moz-appearance: textfield;
    }
    `,
    props: {
        form: {
          type: Object,
          default() {
            return {}
          }
        }
    },
    data(){
      return {
          isCommerce: 0, // 0开启 1关闭
          is_dividend: 1, // 1开启 0关闭
          has_dividend: 0,
          ruleLevels: [],
      }
    },
    mounted(){
        if (!this.form) return;
        if (this.form.item && !Array.isArray(this.form.item)) {
            let data = this.form.item;
            this.has_dividend = data.has_dividend;
            this.is_dividend = data.is_dividend;
            this.isCommerce = data.open_anchor_commerce;
        }

        this.ruleLevels = JSON.parse(JSON.stringify(this.form.levels));
    },
    methods: {
        filterList (list=[]) {
            let ruleArr = {};
            list.forEach((item, index) => {
                ruleArr['level_' + item.id] = {
                    has_dividend_rate: item.has_dividend_rate,
                    has_dividend_price: item.has_dividend_price,
                }
            });
            return ruleArr;
        },
        validate () {
            let json = {};
            json = {
                open_anchor_commerce: this.isCommerce,
                is_dividend: this.is_dividend,
                has_dividend: this.has_dividend * 1,
            }
            if (this.has_dividend) {
                json.rule = this.filterList(this.ruleLevels)
            }
            return json;
        },

    },
  })