define({
    name: "areaDividend",
    template: `
<div>
    <el-form ref="setForm" :model="jsonData" label-width="130px">
        <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="jsonData.is_dividend" :label="0">关闭</el-radio>
                        <el-radio v-model="jsonData.is_dividend" :label="1">开启</el-radio>
                        <div class="help-block">如果不开启区域分红，则不产生分红佣金</div>
                    </el-form-item>
                    <el-form-item label="独立规则">
                        <el-switch v-model="jsonData.has_dividend" :active-value="1" :inactive-value="0"></el-switch>
                        <span>启用独立佣金比例</span>
                        <div class="help-block">启用独立分红金额设置，此商品拥有独自的分红金额,不受默认设置限制</div>
                    </el-form-item>

                    <el-form-item label="独立分红金额" v-show="jsonData.has_dividend">
                        <el-col :span="6">
                            <el-form-item>
                                <el-input placeholder="请输入金额" v-model="jsonData.has_dividend_rate" maxlength="10" size="small" oninput="if(value<0)value=''" type="number">
                                    <template slot="append">% 固定</template>
                                </el-input>
                            </el-form-item>
                        </el-col>

                        <el-col :span="6">
                            <el-form-item>
                                <el-input placeholder="请输入金额" v-model="jsonData.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-form-item>

                    <el-form-item v-show="jsonData.has_dividend">
                        <div class="help-block">如果比例为空或等于0，则使用固定规则，如果都为空或等于0则使用默认规则</div>
                    </el-form-item>                    
                    <el-form-item label="独立设置">
                        <el-switch v-model="jsonData.alone_rule" :active-value="1" :inactive-value="0"></el-switch>
                        <span>启用独立佣金比例</span>
                        <div class="help-block">启用独立设置，如果比例为空为0则无分红佣金（开启了第一个独立规则，独立设置就无法开启）</div>
                    </el-form-item>
                    <div v-show="jsonData.alone_rule">
                        <el-form-item>
                            <el-input  style="width: 300px;" v-model="jsonData.province_rate" >
                                <template slot="prepend">省</template>
                                <template slot="append">%</template>
                            </el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-input  style="width: 300px;" v-model="jsonData.city_rate" >
                                <template slot="prepend">市</template>
                                <template slot="append">%</template>
                            </el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-input  style="width: 300px;" v-model="jsonData.area_rate" >
                                <template slot="prepend">区/县</template>
                                <template slot="append">%</template>
                            </el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-input  style="width: 300px;" v-model="jsonData.street_rate" >
                                <template slot="prepend">街道/乡镇</template>
                                <template slot="append">%</template>
                            </el-input>
                        </el-form-item>
                    </div>
                    <el-divider></el-divider>
                </div>

            </div>
        </div>
    </el-form>
</div>
    `,
    style: `
    .help-block{
        font-size:12px;
    }
    .location{
        display:flex;
        justify-content:flex-end;
    }
    `,
    props: {
        form: {
          type: Object,
          default() {
            return {}
          }
        },
    },
    data(){
      return {
        jsonData: {
            is_dividend: 0,
            has_dividend: 0,
            has_dividend_rate: '',
            has_dividend_price: '',
            alone_rule: 0,
            province_rate:'',
            city_rate:'',
            area_rate: '',
            street_rate: '',
        },
      }
    },
    mounted() {
        if (this.form.item && !Array.isArray(this.form.item)) {
            this.jsonData = {...this.form.item};
        }
    },
    methods: {
        validate(){

            let result = {
                is_dividend: this.jsonData.is_dividend,
                has_dividend: this.jsonData.has_dividend,
                alone_rule:this.jsonData.alone_rule,
            };

            if (this.jsonData.has_dividend) {
                result.has_dividend_rate = this.jsonData.has_dividend_rate?this.jsonData.has_dividend_rate:0;
                result.has_dividend_price = this.jsonData.has_dividend_price?this.jsonData.has_dividend_price:0;
            }

            if (this.jsonData.alone_rule) {
                result.province_rate = this.jsonData.province_rate?this.jsonData.province_rate:0;
                result.city_rate = this.jsonData.city_rate?this.jsonData.city_rate:0;
                result.area_rate = this.jsonData.area_rate?this.jsonData.area_rate:0;
                result.street_rate = this.jsonData.street_rate?this.jsonData.street_rate:0;
            }


            return result;
        },
    },
  });