<template>
  <el-dialog title="品牌分销推广" :visible.sync="dialogFormVisible">
    <el-form ref="ruleForm" :model="form" :rules="rules">
      <div class="brandInfo">
        <span class="pattern"></span>
        推广营销工具
      </div>
      <div style="font-size: 14px; margin-bottom: 20px">
        <i
          class="el-icon-warning-outline"
          style="width: 1em; height: 1em; margin-right: 4px"
        ></i>
        分销推广功能开启后，平台的分销商有机会优先选择本品牌进行推广，推广成功分销商可获得佣金；品牌方可根据实际情况，对推广本品牌的分销商佣金比例进行调整；品牌分销和商铺分销不叠加同享，且优先按品牌分销佣金比例进行分销商分佣。
      </div>
      <el-form-item label="状态：" :label-width="formLabelWidth">
        <el-switch
          :active-value="1"
          :inactive-value="0"
          v-model="form.openDis"
          active-text="开启"
          inactive-text="禁用"
        ></el-switch>
        <div style="font-size: 14px">
          请勿频繁切换；已产生的关系&订单不受影响
        </div>
      </el-form-item>
      <div class="brandInfo">
        <span class="pattern"></span>
        推广佣金配置
      </div>
      <div style="font-size: 14px; margin-bottom: 20px">
        <i
          class="el-icon-warning-outline"
          style="width: 1em; height: 1em; margin-right: 4px"
        ></i>
        配置推广成功分销商可获得的订单佣金奖励比例（订单实付金额）；品牌分销订单无上级分佣。
      </div>
      <el-form-item
        label="订单佣金比例 (单位：%)"
        :label-width="formLabelWidth"
        prop="sharingRatio"
      >
        <el-select
          :disabled="form.openDis != 1"
          v-model="form.sharingRatio"
          filterable
          placeholder="请选择"
          style="width: 240px"
        >
          <el-option
            v-for="item in proportion"
            :key="item"
            :label="item"
            :value="item"
          />
        </el-select>
      </el-form-item>
      <div class="brandInfo">
        <span class="pattern"></span>
        品牌分销商招募令配置
      </div>
      <div style="font-size: 14px; margin-bottom: 20px">
        <i
          class="el-icon-warning-outline"
          style="width: 1em; height: 1em; margin-right: 4px"
        ></i>
        此配置将展示在店铺页，吸引用户申请分销商并为店铺进行宣传推广。长度限制在100字内。
      </div>
      <el-form-item
        prop="promotionWords"
        label="推广文案:"
        :label-width="formLabelWidth"
      >
        <el-input
          :disabled="form.openDis != 1"
          style="width: 80%"
          type="textarea"
          :rows="5"
          placeholder="请输入内容"
          maxlength="100"
          show-word-limit
          v-model="form.promotionWords"
        >
        </el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogFormVisible = false">取 消</el-button>
      <el-button type="primary" @click="determine">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  data() {
    return {
      dialogFormVisible: false,
      formLabelWidth: "200px",
      form: {},
      proportion: [],
      rules: {
        sharingRatio: [
          { required: true, message: "请选择佣金比例", trigger: "change" },
        ],
        promotionWords: [
          { required: true, message: "请输入推广文案", trigger: "blur" },
          { max: 100, message: "长度100个字符内", trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    init(row) {
      this.form = JSON.parse(JSON.stringify(row));
      console.log(this.form);
      this.form.openDis = this.form.openDis ? 1 : 0
      this.proportion = [];
      if (!row.minSharingRate) {
        row.minSharingRate = 1
      }
      if (!row.maxSharingRate) {
        row.maxSharingRate = 5
      }
      for (let i = row.minSharingRate; i <= row.maxSharingRate; i++) {
        this.proportion.push(i);
      }
      console.log(this.proportion);

      this.dialogFormVisible = true;
    },
    determine() {
      if (this.form.openDis == 0) {
        this.$api.mer_admin.editBrandInfo(this.form).then((res) => {
          this.dialogFormVisible = false;
          this.$emit("getList");
        });
      } else {
        this.$refs.ruleForm.validate((valid) => {
          if (valid) {
            this.$api.mer_admin.editBrandInfo(this.form).then((res) => {
              this.dialogFormVisible = false;
              this.$emit("getList");
            });
          }
        });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.brandInfo {
  margin-bottom: 20px;
  font-size: 18px;
  font-weight: 700;
}
.pattern {
  display: inline-block;
  width: 8px;
  height: 16px;
  background: rgba(28, 146, 152, 1);
}
</style>
