<template>
  <el-dialog
    title="BASIC CONFIGURATION"
    :visible="visible"
    custom-class="basic-points-dialog"
    :before-close="hideDialog">
    <el-form
      ref="baseConfigForm"
      :model="form"
      :rules="rules"
      label-position="top">
      <el-form-item
        label="POINTS EARNING FORMULA:"
        class="base-form-item"
        prop="earningPoints">
        <div class="flexc">
          <el-input
            class="input-text"
            v-model="form.earningValue"/>
          <div class="unit-text">SGD =</div>
          <el-input
            class="input-text"
            v-model="form.earningPoints"/>
          <div class="unit-text">POINTS</div>
        </div>
      </el-form-item>
      <el-form-item
        label="POINTS OFFSET FORMULA:"
        class="base-form-item"
        prop="offsetValue">
        <div class="flexc">
          <el-input
            class="input-text"
            v-model="form.offsetPoints"/>
          <div class="unit-text">POINTS =</div>
          <el-input
            class="input-text"
            v-model="form.offsetValue"/>
          <div class="unit-text">SGD</div>
        </div>
      </el-form-item>
      <div
        class="flexcc"
        style="padding-top: 60px;">
        <el-button
          class="cancel-button"
          @click="hideDialog">
          CANCEL
        </el-button>
        <el-button
          type="primary"
          @click="onSave"
          :loading="loadingBtn">
          &nbsp; SAVE &nbsp;
        </el-button>
      </div>
    </el-form>
  </el-dialog>
</template>

<script>
import points from '@/api/points';
export default {
  name: "BaseConfigDialog",
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    config: {
      type: Object,
      default: () => {}
    }
  },
  watch: {
    visible: {
      handler(n, o) {
        if (n) {
          if (this.config.dynamicPointsId) {
            this.form = {
              ...this.config
            }
          }
          this.$nextTick(() => {
            this.$refs.baseConfigForm.clearValidate();
          })
        }
      }
    }
  },
  data() {
    return {
      loadingBtn: false,
      form: {
        earningValue: "",
        earningPoints: "",
        offsetPoints: "",
        offsetValue: "",
        dynamicPointsId: ""
      },
      pattern: /^[1-9]+\d*\.?\d*$/,
      rules: {
        earningPoints: {
          required: false,
          trigger: 'change',
          validator: (rule, value, callback) => {
            if (this.form.earningValue && this.form.earningPoints) {
              if (this.pattern.test(this.form.earningValue) && this.pattern.test(this.form.earningPoints)) {
                callback()
              } else {
                callback(new Error("Please enter a correct number"))
              }
            } else {
              callback(new Error("Please enter points earning formula"))
            }
          }
        },
        offsetValue: {
          required: false,
          trigger: 'change',
          validator: (rule, value, callback) => {
            if (this.form.offsetPoints && this.form.offsetValue) {
              if (this.pattern.test(this.form.offsetPoints) && this.pattern.test(this.form.offsetValue)) {
                callback()
              } else {
                callback(new Error("Please enter a correct number"))
              }
            } else {
              callback(new Error("Please enter points offset formula"))
            }
          }
        }
      }
    };
  },
  mounted() {
    
  },
  methods: {
    hideDialog(e, h) {
      this.$emit("hide", h);
    },
    onSave() {
      this.$refs.baseConfigForm.validate((valid) => {
        if (valid) {
          this.updateBaseConfig();
        }
      })
    },
    updateBaseConfig() {
      this.loadingBtn = true;
      points.saveBasePointsConfig(this.form).then(res => {
        this.loadingBtn = false;
        this.$message({
          message: res.msg,
          type: 'success',
        })
        this.hideDialog(true, true);
      }).catch(err => {
        this.loadingBtn = false;
        this.$message({
          message: err,
          type: 'error',
        })
      })
    }
  }
}
</script>

<style scoped>
>>> .basic-points-dialog {
  width: 100%;
  padding: 0 10px;
  max-width: 450px;
}
.base-form-item >>> .el-form-item__label {
  color: #000;
}
.input-text {
  width: 100%;
  max-width: 120px;
}
.input-text >>> .el-textarea__inner {
  font-family: sans-serif;
}
.unit-text {
  color: #333;
  padding: 0 8px;
  font-size: 14px;
  font-weight: bold;
}
</style>