<template>
  <el-dialog :title="form.id ? '修改红包' : '新增红包'" width="500px" :visible.sync="dialogVisible" @close="diaClose"
    :close-on-click-modal="true">
    <el-form :model="form" label-width="100px">
      <el-form-item label="描述" required>
        <el-input v-model="form.name"></el-input>
      </el-form-item>
      <el-form-item label="从第几次开始变化">
        <el-input-number :min="0" stepstep-strictly v-model="form.num"></el-input-number>
      </el-form-item>
      <el-form-item label="最大金额" required>
        <el-input-number :min="0" :max="100" v-model="form.maxAmount"></el-input-number>
        <span>元</span>
      </el-form-item>

      <el-form-item label="中奖概率" required>
        <el-input-number :min="0" :max="1" :step="0.1" v-model="form.random"></el-input-number>
        <span></span>
      </el-form-item>
      <el-form-item label="是否启用" required>
        <el-switch v-model="form.status" :inactive-value="0" :active-value="1"></el-switch>
      </el-form-item>
    </el-form>

    <div class="dialog-footer" style="display: flex; justify-content: flex-end">
      <el-button @click="diaClose">取 消</el-button>
      <el-button type="primary" @click="confirm">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { $redPackApi } from "@/api/red-pack.js";
import { isNull } from "@/utils/validate.js";
export default {
  props: {
    source: {
      type: [String, Number],
      default: 1
    }
  },
  data() {
    return {
      dialogVisible: false,
      form: {
        id: "",
        name: "",
        maxAmount: "",
        random: "",
        status: "",
        num: undefined,
      },
    };
  },
  methods: {
    uploadSuccess(file) {
      this.form.url = file.data;
    },
    open(item) {
      console.log(item);
      this.dialogVisible = true;
      this.item = item;
      if (item !== undefined) {
        this.form = {
          ...item,
          num: item.num === "" || item.num === null ? undefined : item.num,
        };
      }

      console.log(this.form);
    },
    diaClose() {
      this.dialogVisible = false;
      for (let i in this.form) {
        this.form[i] = "";
      }
    },
    async confirm() {
      const { name, maxAmount, random, status, id } = this.form;
      console.log(this.form);
      if (isNull(name)) {
        return this.$message.error("描述不能为空");
      }
      if (isNull(maxAmount)) {
        return this.$message.error("最大金额不能为空！");
      }
      if (isNull(random)) {
        return this.$message.error("中奖不能为空！");
      }
      if (this.form.random > 1 || this.form.random < 0) {
        return this.$message.error("概率为0-1");
      }
      console.log(id);
      const res = id
        ? await $redPackApi.update({ ...this.form, num: this.form.num || "", discType: this.source, type: this.source })
        : await $redPackApi.add({ ...this.form, discType: this.source, type: this.source });
      console.log(res);
      const { data, msg } = res;
      if (data && data.code == 0) {
        this.$message.success(id ? "修改成功" : "添加成功");
        this.$emit("refresh");
        this.diaClose();
      } else {
        this.$message.error(msg || "操作失败！");
      }
    },
  },
};
</script>
<style scoped lang="scss">
.el-form-item__label {
  text-align: left;
}

::v-deep .el-form-item__label {
  text-align: left;
}

.upload-file-box {
  border-radius: 6px;
  width: 148px;
  height: 148px;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  border: 1px solid #c0c4cc;

  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}
</style>