<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="compute_mode">
              <el-radio v-model="form.compute_mode" :label="0"
                >固定价格</el-radio
              >
              <el-radio v-model="form.compute_mode" :label="1"
                >固定比例</el-radio
              >
            </el-form-item>
            <div v-if="form.compute_mode === 0">
              <el-form-item label="一级固定价格" prop="first_level_price">
                <el-input
                  placeholder="请输入一级固定价格"
                  class="input"
                  maxlength="8"
                  @input="limitInput($event, 'first_level_price')"
                  v-model="form.first_level_price"
                >
                  <template slot="append">元</template>
                </el-input>
              </el-form-item>
              <el-form-item label="二级固定价格" prop="second_level_price">
                <el-input
                  placeholder="请输入二级固定价格"
                  class="input"
                  maxlength="8"
                  @input="limitInput($event, 'second_level_price')"
                  v-model="form.second_level_price"
                >
                  <template slot="append">元</template>
                </el-input>
              </el-form-item>
            </div>
            <div v-if="form.compute_mode === 1">
              <el-form-item label="一级固定比例" prop="first_level_ratio">
                <el-input
                  placeholder="请输入一级固定比例"
                  class="input"
                  maxlength="8"
                  @input="limitInput($event, 'first_level_ratio')"
                  v-model="form.first_level_ratio"
                >
                  <template slot="append">%</template>
                </el-input>
              </el-form-item>
              <el-form-item label="二级固定比例" prop="second_level_ratio">
                <el-input
                  placeholder="请输入二级固定比例"
                  class="input"
                  maxlength="8"
                  @input="limitInput($event, 'second_level_ratio')"
                  v-model="form.second_level_ratio"
                >
                  <template slot="append">%</template>
                </el-input>
              </el-form-item>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane
          label="代销商品小程序分佣设置"
          name="2"
          v-if="platform_shop && false"
        >
          <el-form-item label="是否开启分佣">
            <el-switch
              v-model="form.open"
              active-color="#13ce66"
              :active-value="true"
              :inactive-value="false"
            ></el-switch>
          </el-form-item>
          <!-- form.open&&form.proxy_goods_rule -->
          <el-form-item label="分佣方式" v-if="0">
            <br />
            <div>
              <div class="title">282礼包</div>
              <div class="content">
                <el-input
                  class="input"
                  maxlength="8"
                  @input="limitInputtwo($event, 'oneVal')"
                  v-model="oneVal"
                >
                  <template slot="prepend">一级</template>
                  <template slot="append">元</template>
                </el-input>
                <el-input
                  class="input"
                  maxlength="8"
                  @input="limitInputtwo($event, 'twoVal')"
                  v-model="twoVal"
                >
                  <template slot="prepend">二级</template>
                  <template slot="append">元</template>
                </el-input>
                <div>
                  <el-input
                    class="input m"
                    maxlength="8"
                    @input="limitInputtwo($event, 'threeVal')"
                    v-model="threeVal"
                  >
                    <template slot="prepend">市级代理</template>
                    <template slot="append">元</template>
                  </el-input>
                </div>
              </div>
            </div>
            <div>
              <div class="title">6750礼包</div>
              <div class="content">
                <el-input
                  class="input m"
                  maxlength="8"
                  @input="limitInputtwo($event, 'cardVal1')"
                  v-model="cardVal1"
                >
                  <template slot="prepend">平台合伙人</template>
                  <template slot="append">元</template>
                </el-input>
                <el-input
                  class="input b"
                  maxlength="8"
                  @input="limitInputtwo($event, 'cardVal2')"
                  v-model="cardVal2"
                >
                  <template slot="prepend"
                    >【间接】市级代理 / 县级代理</template
                  >
                  <template slot="append">元</template>
                </el-input>
                <div>
                  <el-input
                    class="input b"
                    maxlength="8"
                    @input="limitInputtwo($event, 'cardVal3')"
                    v-model="cardVal3"
                  >
                    <template slot="prepend">
                      【直接】市级代理 / 县级代理</template
                    >
                    <template slot="append">元</template>
                  </el-input>
                </div>
                <el-input
                  class="input b"
                  maxlength="5"
                  @input="limitInputtwo($event, 'cardVal4')"
                  v-model="cardVal4"
                >
                  <template slot="prepend"> 市级代理 / 县级代理</template>
                  <template slot="append">%实际销售价</template>
                </el-input>
                <el-input
                  class="input b"
                  maxlength="5"
                  @input="limitInputtwo($event, 'cardVal5')"
                  v-model="cardVal5"
                >
                  <template slot="prepend"> 市级代理 / 县级代理</template>
                  <template slot="append">%实际销售价</template>
                </el-input>
              </div>
            </div>

            <div>
              <div class="title">差价分佣</div>
              <div class="content">
                <el-input class="input b" maxlength="8" value="折扣差" disabled>
                  <template slot="prepend"> 平台合伙人</template>
                  <template slot="append">* 实际销售价</template>
                </el-input>
                <el-input class="input b" maxlength="8" value="折扣差" disabled>
                  <template slot="prepend"
                    >【间接】市级代理 / 县级代理</template
                  >
                  <template slot="append">* 实际销售价</template>
                </el-input>
                <div>
                  <el-input
                    class="input b"
                    maxlength="8"
                    value="折扣差"
                    disabled
                  >
                    <template slot="prepend"
                      >【直接】市级代理 / 县级代理</template
                    >
                    <template slot="append">* 实际销售价</template>
                  </el-input>
                </div>
                <div>
                  <el-input
                    class="input b"
                    maxlength="5"
                    @input="limitInputtwo($event, 'lastVal1')"
                    v-model="lastVal1"
                  >
                    <template slot="prepend"> 市级代理 / 县级代理</template>
                    <template slot="append">% 实际销售价</template>
                  </el-input>
                  <el-input
                    class="input b"
                    maxlength="5"
                    @input="limitInputtwo($event, 'lastVal2')"
                    v-model="lastVal2"
                  >
                    <template slot="prepend"> 市级代理 / 县级代理</template>
                    <template slot="append">% 实际销售价</template>
                  </el-input>
                </div>
              </div>
            </div>
          </el-form-item>
        </el-tab-pane>
        <el-tab-pane
          label="商家分享设置"
          name="3"
          v-loading="loading"
          v-if="false"
        >
          <el-form-item label="是否开启分享">
            <el-switch
              v-model="form.is_share"
              @change="switchTrue"
              :active-value="true"
              :inactive-value="false"
            ></el-switch>
          </el-form-item>
          <!-- <el-form-item label="是否开启App分享" v-if="form.is_share">
						<el-switch  v-model="form.is_app_share"   :active-value="true" :inactive-value="false"></el-switch>
					</el-form-item> -->
          <el-form-item label="是否开启小程序分享" v-if="form.is_share">
            <el-switch
              v-model="form.is_applets_share"
              :active-value="true"
              :inactive-value="false"
            ></el-switch>
          </el-form-item>
          <el-form-item
            label="会员分享提成比例（%）"
            :rules="[{ required: true, message: '请输入', trigger: 'blur' }]"
          >
            <el-input-number
              placeholder="请输入"
              class="input"
              :min="0"
              :max="100"
              :controls="false"
              :precision="0"
              v-model="form.user_share_ratio"
            >
            </el-input-number>
          </el-form-item>
          <el-form-item
            label="网红分享提成比例（%）"
            :rules="[{ required: true, message: '请输入', trigger: 'blur' }]"
          >
            <el-input-number
              placeholder="请输入"
              class="input"
              maxlength="8"
              :min="0"
              :max="100"
              :controls="false"
              :precision="0"
              v-model="form.net_red_share_ratio"
            >
            </el-input-number>
          </el-form-item>
          <el-form-item
            label="会员打开分享商品链接的有效时间(天)"
            :rules="[{ required: true, message: '请输入', trigger: 'blur' }]"
          >
            <el-input-number
              placeholder="请输入"
              class="input"
              maxlength="8"
              :min="0"
              :controls="false"
              :max="10000"
              :precision="0"
              v-model="form.user_share_valid_time"
            >
            </el-input-number>
          </el-form-item>
        </el-tab-pane>
      </el-tabs>
      <el-form-item>
        <el-button type="primary" @click="onSubmit('form')">提交</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
// import serviceApione from "@/api/serviceApione.js";
export default {
  data() {
    return {
      activeName: "1",
      form: {
        open: false,
      },
      loading: false,
      platform_shop: false,
      oneVal: "",
      twoVal: "",
      threeVal: "",
      cardVal1: "",
      cardVal2: "",
      cardVal3: "",
      cardVal4: "",
      cardVal5: "",
      lastVal1: "",
      lastVal2: "",
      rules: {
        compute_mode: [
          {
            required: true,
            message: "请选择分润方式",
            trigger: "blur",
          },
        ],
        first_level_price: [
          {
            required: true,
            message: "请输入一级固定价格",
            trigger: "blur",
          },
        ],
        second_level_price: [
          {
            required: true,
            message: "请输入二级固定价格",
            trigger: "blur",
          },
        ],
        first_level_ratio: [
          {
            required: true,
            message: "请输入一级固定比例",
            trigger: "blur",
          },
        ],
        second_level_ratio: [
          {
            required: true,
            message: "请输入二级固定比例",
            trigger: "blur",
          },
        ],
      },
    };
  },

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

  methods: {
    switchTrue(e) {
      if (e == false) {
        this.form.is_app_share = false;
        this.form.is_applets_share = false;
      }
    },
    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位小数
    },
    limitInputtwo(value, name) {
      this[name] =
        ("" + value) // 第一步：转成字符串
          .replace(/[^\d^\.]+/g, "") // 第二步：把不是数字，不是小数点的过滤掉
          .replace(/^0+(\d)/, "$1") // 第三步：第一位0开头，0后面为数字，则过滤掉，取后面的数字
          .replace(/^\./, "0.") // 第四步：如果输入的第一位为小数点，则替换成 0. 实现自动补全
          .match(/^\d*(\.?\d{0,2})/g)[0] || ""; // 第五步：最终匹配得到结果 以数字开头，只有一个小数点，而且小数点后面只能有0到2位小数
    },
    getShopInfoAdmin() {
      serviceApione.getShopInfoAdmin().then((res) => {
        if (res.data.data) {
          this.platform_shop = res.data.data.platform_shop;
        }
      });
    },
    handleClick(e) {
      this.loading = true;
      if (e.name == 1) {
        this.form = {};
        this.searchSetting();
      } else if (e.name == 2) {
        this.form = {
          proxy_goods_rule: {
            gift_one_rule: {},
            gift_two_rule: {},
            spread_price_rule: {},
          },
          open: false,
        };
        this.searchShopproxyconfig();
      } else {
        this.getShare();
      }
    },

    /**
     * 查询自营商品分佣设置
     * */
    searchSetting() {
      serviceApione.getGoodsSalesConfig().then((res) => {
        if (res.data && res.data.code == 200) {
          if (res.data.data) {
            this.form = res.data.data;
          }
        }
        this.loading = false;
      });
    },
    getShare() {
      serviceApione.getShare().then((res) => {
        if (res.data && res.data.code == 200) {
          if (res.data.config) {
            this.form = res.data.config;
          }
        }
        this.loading = false;
      });
    },
    // 保存
    onSubmit(e) {
      if (this.activeName == 1) {
        this.$refs["form"].validate((valid) => {
          if (valid) {
            serviceApione.setGoodsSalesConfig(this.form).then((res) => {
              if (res.data && res.data.code == 200) {
                this.$message.success("保存成功！");
              }
            });
          } else {
            console.log("error submit!!");
            return false;
          }
        });
      } else if (this.activeName == 2) {
        this.form.proxy_goods_rule.gift_one_rule.one_level = this.oneVal;
        this.form.proxy_goods_rule.gift_one_rule.two_level = this.twoVal;
        this.form.proxy_goods_rule.gift_one_rule.city_proxy = this.threeVal;

        this.form.proxy_goods_rule.gift_two_rule.direct_partner = this.cardVal1;
        this.form.proxy_goods_rule.gift_two_rule.indirect_county_city =
          this.cardVal2;
        this.form.proxy_goods_rule.gift_two_rule.direct_county_city =
          this.cardVal3;
        this.form.proxy_goods_rule.gift_two_rule.ten_county_city =
          this.cardVal4;
        this.form.proxy_goods_rule.gift_two_rule.seven_county_city =
          this.cardVal5;

        this.form.proxy_goods_rule.spread_price_rule.ten_county_city =
          this.lastVal1;
        this.form.proxy_goods_rule.spread_price_rule.seven_county_city =
          this.lastVal2;
        serviceApione.setShopproxyconfig(this.form).then((res) => {
          if (res.data && res.data.code == 200) {
            this.$message.success("保存成功！");
          }
        });
      } else {
        serviceApione
          .shareSave({
            is_share: this.form.is_share,
            is_app_share: this.form.is_app_share,
            is_applets_share: this.form.is_applets_share,
            user_share_ratio: this.form.user_share_ratio,
            net_red_share_ratio: this.form.net_red_share_ratio,
            user_share_valid_time: this.form.user_share_valid_time,
          })
          .then((res) => {
            if (res.data && res.data.code == 200) {
              this.$message.success("保存成功！");
            }
          });
      }
    },

    /**
     * 查询平台商家代销商品小程序分佣配置
     * */
    searchShopproxyconfig() {
      serviceApione.getShopproxyconfig().then((res) => {
        if (res.data && res.data.code == 200) {
          if (res.data.data) {
            let keys = res.data.data;
            this.oneVal = keys.proxy_goods_rule.gift_one_rule.one_level;
            this.twoVal = keys.proxy_goods_rule.gift_one_rule.two_level;
            this.threeVal = keys.proxy_goods_rule.gift_one_rule.city_proxy;

            this.cardVal1 = keys.proxy_goods_rule.gift_two_rule.direct_partner;
            this.cardVal2 =
              keys.proxy_goods_rule.gift_two_rule.indirect_county_city;
            this.cardVal3 =
              keys.proxy_goods_rule.gift_two_rule.direct_county_city;
            this.cardVal4 = keys.proxy_goods_rule.gift_two_rule.ten_county_city;
            this.cardVal5 =
              keys.proxy_goods_rule.gift_two_rule.seven_county_city;

            this.lastVal1 =
              keys.proxy_goods_rule.spread_price_rule.ten_county_city;
            this.lastVal2 =
              keys.proxy_goods_rule.spread_price_rule.seven_county_city;

            this.form.open = keys.open;
          }
        }
        this.loading = 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>
