define({
    name: "SmallShop",
    template: `
 <div>
    <el-form ref="form" label-width="15%">
        <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>
                <el-form-item label="微店分红" prop="status">
                        <el-radio v-model="is_open_bonus" :label="0">关闭</el-radio>
                        <el-radio v-model="is_open_bonus" :label="1">开启</el-radio>
                        <div class="help-block">通过微店店主链接购买任何参与微店分红的商品，店主都可获得对应的等级分红</span></div>
                    </el-form-item>
                    <div class="vue-main-title">
                        <div class="vue-main-title-left"></div>
                        <div class="vue-main-title-content">店主独立分红设置</div>
                    </div>
                    <el-divider></el-divider>
                    <el-form-item label="店主独立分红设置" prop="harvest">
                        <el-switch v-model="independent_bonus" :active-value="1" :inactive-value="0"></el-switch>
                        <div class="help-block">启用店主独立设置，微店店主拥有独立的分红比例，不受店主等级分红比例影响</div>
                    </el-form-item>
                    <el-form-item v-show="independent_bonus">
                        <div class="help-block" style="color:red">等级比例只能填写小数或整数，其他不做保存处理</div>
                        <el-row :gutter="10" v-for="(level, index) in micro_levels" :key="level.id">
                            <el-col :span="8" class="flex-col">
                                <el-input placeholder="请输入百分比" v-model="level.value"  size="small ">
                                    <template slot="prepend">{{level.level_name}}</template>
                                    <template slot="append">%</template>
                                </el-input>
                            </el-col>
                        </el-row>
                    </el-form-item>
                    <el-divider></el-divider>
            </div>
        </div>
    </el-form>
</div>
    `,
    style: `
    .help-block{
        font-size:14px;
        margin-bottom:0px;
    }
    .location{
        display:flex;
        justify-content:flex-end;
    }
    .gutter{
        text-align:center;
    }
    .flex-col{
        margin-top:5px;
    }
    `,
    props: {
      form: {
        type: Object,
        default() {
          return {}
        }
      }
    },
    data(){
      return {
          is_open_bonus: 0,
          independent_bonus: 0,
          micro_levels: [],
        }
    },

    mounted() {
        if (this.form.micro && !Array.isArray(this.form.micro)) {
            this.is_open_bonus = this.form.micro.is_open_bonus;
            this.independent_bonus = this.form.micro.independent_bonus;
        }
        this.micro_levels = this.form.micro_levels;
    },
    methods: {
        filterList (list=[]) {
            let arr = {};
            list.forEach((item, index) => {
                arr[item.id] = item.value;
            })
            return arr;
        },
        validate () {
            let json = {
                is_open_bonus: this.is_open_bonus,
                independent_bonus: this.independent_bonus,
            }
            if (this.independent_bonus) {
                json.level = this.filterList(this.micro_levels);
            }
            return json;
        },
    },
  })