<template>
  <div class="app-container">
    <el-form :model="form" :rules="rules" ref="form">
      <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
        <el-tab-pane label="自营商品分佣设置" name="1" v-loading="loading">
          <el-form-item label="是否开启分佣">
            <el-switch v-model="form.open" active-color="#13ce66" :active-value="true"
              :inactive-value="false"></el-switch>
          </el-form-item>
          <div v-if="form.open">
            <el-form-item label="分润方式" prop="computeMode" v-if="false">
              <el-radio v-model="form.computeMode" :label="0">固定价格</el-radio>
              <el-radio v-model="form.computeMode" :label="1">固定比例</el-radio>
            </el-form-item>
            <div v-if="form.computeMode === 0">
              <el-form-item label="一级固定价格" prop="firstLevelPrice">
                <el-input placeholder="请输入一级固定价格" class="input" maxlength="8"
                  @input="limitInput($event, 'firstLevelPrice')" v-model="form.firstLevelPrice">
                  <template slot="append">元</template>
                </el-input>
              </el-form-item>
              <el-form-item label="二级固定价格" prop="secondLevelPrice">
                <el-input placeholder="请输入二级固定价格" class="input" maxlength="8"
                  @input="limitInput($event, 'secondLevelPrice')" v-model="form.secondLevelPrice">
                  <template slot="append">元</template>
                </el-input>
              </el-form-item>
            </div>
            <div v-if="form.computeMode === 1">
              <el-form-item label="一级固定比例" prop="firstLevelRatio">
                <el-input placeholder="请输入一级固定比例" class="input" maxlength="8"
                  @input="limitInput($event, 'firstLevelRatio')" v-model="form.firstLevelRatio">
                  <template slot="append">%</template>
                </el-input>
              </el-form-item>
              <el-form-item label="二级固定比例" prop="secondLevelRatio">
                <el-input placeholder="请输入二级固定比例" class="input" maxlength="8"
                  @input="limitInput($event, 'secondLevelRatio')" v-model="form.secondLevelRatio">
                  <template slot="append">%</template>
                </el-input>
              </el-form-item>
              <el-form-item label="分账上限" prop="topLimit">
                <el-input placeholder="请输入分账上限" class="input" @input="limitInput($event, 'topLimit')"
                  v-model="form.topLimit">
                  <template slot="append">%</template>
                </el-input>
              </el-form-item>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
      <el-form-item>
        <el-button type="primary" :loading="submitLoading" @click="onSubmit('form')">提交</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { distributionBusinessConfigInfo, distributionBusinessConfigSet } from "@/api/marketing.js";
export default {
  data() {
    return {
      activeName: "1",
      form: {
        open: false,
        computeMode: 1,
      },
      loading: false,
      submitLoading: false,
      rules: {
        computeMode: [
          {
            required: true,
            message: "请选择分润方式",
            trigger: "blur",
          },
        ],
        firstLevelPrice: [
          {
            required: true,
            message: "请输入一级固定价格",
            trigger: "blur",
          },
        ],
        secondLevelPrice: [
          {
            required: true,
            message: "请输入二级固定价格",
            trigger: "blur",
          },
        ],
        firstLevelRatio: [
          {
            required: true,
            message: "请输入一级固定比例",
            trigger: "blur",
          },
        ],
        secondLevelRatio: [
          {
            required: true,
            message: "请输入二级固定比例",
            trigger: "blur",
          },
        ],
        topLimit: [
          {
            required: true,
            message: "请输入分账上限",
            trigger: "blur",
          },
        ],
      },
    };
  },

  mounted() {
    this.searchSetting();
  },

  methods: {
    limitInput(value, name) {
      this.form[name] =
        ("" + value) // 第一步：转成字符串
          .replace(/[^\d^\.]+/g, "") // 第二步：把不是数字，不是小数点的过滤掉
          .replace(/^0+(\d)/, "$1") // 第三步：第一位0开头，0后面为数字，则过滤掉，取后面的数字
          .replace(/^\./, "0.") // 第四步：如果输入的第一位为小数点，则替换成 0. 实现自动补全
          .match(/^\d*(\.?\d{0,2})/g)[0] || ""; // 第五步：最终匹配得到结果 以数字开头，只有一个小数点，而且小数点后面只能有0到2位小数
    },
    handleClick(e) {
      this.loading = true;
      if (e.name == 1) {
        this.form = {};
        this.searchSetting();
      }
    },

    /**
     * 查询自营商品分佣设置
     * */
    searchSetting() {
      distributionBusinessConfigInfo().then((res) => {
        if (res.code == 200) {
          this.form = {
            open: false,
            ...(res.data || {}),
            computeMode: 1,
          };
        }
        this.loading = false;
      });
    },
    // 保存
    onSubmit(e) {
      if (this.activeName == 1) {
        this.$refs["form"].validate((valid) => {
          if (valid) {
            this.submitLoading = true;
            distributionBusinessConfigSet(this.form).then((res) => {
              this.submitLoading = false;
              if (res && res.code == 200) {
                this.$message.success("保存成功！");
              }
            }).catch(() => {
              this.submitLoading = false;
            });;
          } else {
            console.log("error submit!!");
            return false;
          }
        })
      }
    },
  },
};
</script>

<style>
.el-flex {
  display: flex;
}

.mt30 {
  margin-top: 30px;
}

.wt80 {
  width: 80px;
}

.ml10 {
  margin-left: 10px;
}

.input {
  width: 222px;
  margin-right: 10px;
}

.m {
  width: 333px !important;
}

.b {
  width: 444px !important;
}

.content>div {
  margin-bottom: 15px;
}

.title {
  margin: 25px 0 10px 0;
  padding-left: 15px;
  border-left: 4px solid #17b3a3;
  line-height: 14px;
}
</style>
