<template>
  <div id="">
    <div>
      <h4>积分规则：</h4>
      <div class="dis_fx">
        <el-checkbox v-model="formData.yearOverEnable"></el-checkbox>
        1、一个自然年自动清零
      </div>
      <el-divider></el-divider>
    </div>
    <div>
      <h4>积分兑换：</h4>
      <div class="dis_fx">
        <el-checkbox v-model="formData.oneExchangeEnable"></el-checkbox> 1、1元
        =
        <el-input-number
          :controls="false"
          v-model="formData.oneExchangeValue"
          placeholder="输入积分"
          :min="0"
          :precision="0"
        /><span>积分</span>
      </div>
      <el-divider></el-divider>
    </div>
    <div>
      <h4>积分奖励：</h4>
      <div class="dis_fx">
        <el-checkbox v-model="formData.fullEnable"></el-checkbox>
        1、下单满<el-input-number
          :controls="false"
          v-model="formData.fullMoneyValue"
          placeholder="输入金额"
          :min="0"
          :precision="2"
        />元，送<el-input-number
          :controls="false"
          v-model="formData.fullPointsValue"
          placeholder="输入积分"
          :min="0"
          :precision="0"
        />积分
      </div>
      <div class="dis_fx">
        <el-checkbox v-model="formData.uploadCarteEnable"></el-checkbox>
        2、e管证证书上传，送<el-input-number
          :controls="false"
          v-model="formData.uploadCarteValue"
          placeholder="输入积分"
          :min="0"
          :precision="0"
        />积分
      </div>
      <div class="dis_fx">
        <el-checkbox v-model="formData.shareGoodsEnable"></el-checkbox>
        3、分享商品，送<el-input-number
          :controls="false"
          v-model="formData.shareGoodsValue"
          placeholder="输入积分"
          :min="0"
          :precision="0"
        />积分
      </div>
      <div style="text-align: center; margin-top: 40px">
        <el-button size="small" type="primary" @click="submit">保存</el-button>
        <el-button size="small" @click="record">修改记录</el-button>
      </div>
    </div>
    <record
      :dialogVisible.sync="dialogVisible"
      @search="search"
    ></record>
  </div>
</template>

<script>
import record from "./record.vue";
export default {
  name: "ExchangeRules",
  components: { record },
  data() {
    return {
      dialogVisible: false,
      formData: {},
    };
  },
  created() {
    this.search();
  },
  methods: {
    submit() {
      this.$alert("确定更改兑换规则吗？", "提示", {
        dangerouslyUseHTMLString: true,
      })
        .then(() => {
          this.$api.mallstoreupdatePointsRule(this.formData).then((res) => {
            this.$message.success("保存成功");
            this.search();
          });
        })
        .catch(() => {});
    },
    record() {
      this.dialogVisible = true;
    },
    search() {
      this.$api.mallstoreconfigKeypointsRule().then((res) => {
        this.formData = res.data;
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.el-checkbox {
  margin-right: 6px;
}
.dis_fx {
  font-size: 14px;
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  span {
    flex-shrink: 0;
    margin: 0px 10px;
  }
  .el-input-number {
    width: 120px;
    margin: 0px 6px;
  }
}
h4 {
  font-weight: bold;
}
.el-divider {
  margin: 40px 0px;
}
</style>
