<template>
  <div class="app-container">
    <div>
      <h4>设置返券商品返券比例</h4>
      <el-form
        :model="queryParams"
        ref="queryForm"
        size="small"
        :inline="true"
        :rules="rules"
        label-width="120px"
      >
        <el-row>
          <el-col :span="24">
            <el-form-item label="是否返券" prop="rebateCoupons">
              <el-switch
                v-model="queryParams.rebateCoupons"
                active-color="#13ce66"
                inactive-color="#ff4949"
                :active-value="0"
                :inactive-value="1"
              >
              </el-switch> </el-form-item
          ></el-col>
          <el-col :span="24">
            <el-form-item label="返券比例" prop="bl">
              <el-input
                oninput="if(value){value=value.replace(/[^\d]/g,1);
              if(Number(value)<=0){value=0}} if(Number(value)>100){value=100}"
                v-model="queryParams.bl"
                placeholder="请输入"
                clearable
                style="width: 180px"
                :max="100"
                :min="1"
              >
                <span slot="suffix">%</span>
              </el-input>
              <br />
              <span style="font-size: 12px; color: orange"
                >*只针对会员专区返券商品进行设置,用户购买返券商品，反一定金额代金券，返券金额=商品金额*返券比例%</span
              >
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-row>
        <el-col style="text-align: center">
          <el-button size="mini" type="primary" @click="submitFree"
            >保存</el-button
          ></el-col
        >
      </el-row>
    </div>
  </div>
</template>

<script>
import { setRebateCouponsGoods, getRebateCouponsGoods } from "@/api/manage/product";
import { getStoreInfo } from "@/api/common/index";
export default {
  data() {
    return {
      queryParams: {
        rebateCoupons: 1,
        rebateCouponsProportion: "",
        bl: "",
      },
      tableData: [],
      shopInfo: {},
      expressType: 0,
      rules: {
        rebateCoupons: [{ required: true, message: "请选择是否返券", trigger: "blur" }],
        bl: [{ required: true, message: "请输入返券比例", trigger: "blur" }],
      },
    };
  },
  created() {
    this.getInfo();
  },
  mounted() {},
  methods: {
    submitFree() {
      this.$refs["queryForm"].validate((valid) => {
        if (valid) {
          this.queryParams.rebateCouponsProportion = this.queryParams.bl / 100;
          setRebateCouponsGoods(this.queryParams).then((res) => {
            if (res.code == 200) {
              this.$message.success("保存成功！");
              this.getInfo();
            }
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    getInfo() {
      getRebateCouponsGoods().then((res) => {
        if (res.code == 200) {
          this.queryParams.rebateCoupons = res.data.rebateCoupons;
          this.queryParams.rebateCouponsProportion = (
            res.data.rebateCouponsProportion * 100
          ).toFixed(0);
          this.queryParams.bl = (res.data.rebateCouponsProportion * 100).toFixed(0);
        }
      });
    },
  },
};
</script>

<style></style>
