<template>
  <el-dialog
    :title="title"
    size="30%"
    :visible.sync="dialogVisible"
    :before-close="handleClose">
    <div class="page">
      <el-form
        style="max-width: 400px;"
        size="small"
        ref="pubForm"
        label-position="right"
        label-width="140px"
        label-suffix=":"
        :rules="rules"
        :model="form"
        class="search-form">
        <el-form-item prop="awardInterval" label="奖励间隔">
          <el-input v-model="form.awardInterval"></el-input>
        </el-form-item>
        <el-form-item prop="dayMaxPoint" label="单日最大奖励值">
          <el-input v-model="form.dayMaxPoint"></el-input>
        </el-form-item>
        <el-form-item prop="dayMaxTimes" label="单日最大奖励次数">
          <el-input v-model="form.dayMaxTimes"></el-input>
        </el-form-item>
        <template v-if="form.limitId">
          <el-form-item prop="status" label="状态">
            <el-switch active-value="ENABLED" inactive-value="UNENABLED" v-model="form.status"></el-switch>
          </el-form-item>
        </template>
        <el-form-item label="描述">
          <el-input type="textarea" :rows="3" v-model="form.memo"></el-input>
        </el-form-item>
      </el-form>
    </div>

    <div slot="footer" class="dialog-footer">
      <el-button @click="handleClose">取 消</el-button>
      <el-button type="primary" @click="onSubmit('pubForm')">确 定</el-button>
    </div>

  </el-dialog>
</template>

<script>
import API from "@/api/delivery";
import BlockHeader from "@/components/block-header";

export default {
  name: "CardNew",
  components: {
    BlockHeader
  },
  props: {
    title: {
      type: String,
      required: true
    },
    items: {
      type: Object,
      required: false
    },
    dialogVisible: {
      type: Boolean,
      required: true
    }
  },
  data() {
    return {
      item: null,
      detail: {},
      rules: {
        awardInterval: [
          { required: true, message: "请输入奖励间隔", trigger: "blur" },
          {
            validator: (rule, value, callback) => {
              const reg = /^\d+$/;
              if (!reg.test(value)) {
                callback(new Error("请输入数字"));
              } else {
                callback();
              }
            },
            trigger: "blur"
          }
        ],
        dayMaxPoint: [
          { required: true, message: "请输入单日最大奖励值", trigger: "blur" },
          {
            validator: (rule, value, callback) => {
              const reg = /^\d+$/;
              if (!reg.test(value)) {
                callback(new Error("请输入数字"));
              } else {
                callback();
              }
            },
            trigger: "blur"
          }
        ],
        dayMaxTimes: [
          { required: true, message: "请输入单日最大奖励次数", trigger: "blur" },
          {
            validator: (rule, value, callback) => {
              const reg = /^\d+$/;
              if (!reg.test(value)) {
                callback(new Error("请输入数字"));
              } else {
                callback();
              }
            },
            trigger: "blur"
          }
        ],
        status: [
          { required: true, message: "请选择状态", trigger: "blur" }
        ]
      },
      form: {
        awardType: "TaiPoint",
        awardInterval: "",
        dayMaxPoint: "",
        dayMaxTimes: "",
        memo: "",
        status: ""
      }
    };
  },
  async mounted() {
    if (this.items) {
      const items = this.items;
      this.form = items;
      this.form.limitId = items.id;
    }
  },
  methods: {
    headerStyle() {
      return "tableHeaderStyle";
    },
    handleClose() {
      this.$emit("handleClose");
    },
    async onSubmit(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          let result;
          if (this.items) {
            result = await API.editDeliveryAwardLimit({
              ...this.form
            });
          } else {
            result = await API.addDeliveryAwardLimit({
              ...this.form
            });
          }

          if (result.status === 200) {
            this.$message.success("保存成功");
            this.handleClose();
            this.$emit("callback");
          }
        }
      });
    }
  }
};
</script>
