<template>
  <el-dialog
    :title="textMap[dialogstatus]"
    :visible.sync="dialogFormVisible"
    width="600px"
    :close-on-click-modal="false"
    @click="dialogFormVisible = false"
  >
    <el-form ref="form" :model="form" :rules="rules" label-width="120px">
      <el-form-item label="套餐名称" prop="comboGoodsName">
        <el-input
          v-model.trim="form.comboGoodsName"
          autocomplete="off"
          type="username"
        />
      </el-form-item>
      <el-form-item label="库存" prop="comboGoodsNum">
        <el-input
          v-model.trim="form.comboGoodsNum"
          autocomplete="off"
          type="number"
        />个
      </el-form-item>
      <el-form-item label="设置价格" prop="comboGoodsPrice">
        <el-input
          v-model.trim="form.comboGoodsPrice"
          autocomplete="off"
          type="count"
        />元
      </el-form-item>
      <el-form-item label="成本价(非必填)">
        <el-input
          v-model="form.comboCostPrice"
          autocomplete="off"
          type="count"
        />元
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogFormVisible = false">取 消</el-button>
      <el-button
        type="primary"
        @click="dialogstatus === 'create' ? createData() : updateData()"
        >确 定</el-button
      >
    </div>
  </el-dialog>
</template>
<script>
import { mapGetters } from "vuex";
import { isGoodsNum, isPrice } from "@/utils/validate";
export default {
  name: "UserManagementEdit",
  props: {
    dialogstatus: {
      type: String,
      default: "",
    },
  },
  data() {
    const validatecomboGoodsNum = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请设置库存数量"));
      } else if (!isGoodsNum(value)) {
        callback(new Error("输入错误"));
      } else if(value>=100000){
        callback(new Error("库存最大数量为100000"));
      }else{
        callback();
      }
    };
    const validatecomboGoodsPrice = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请设置价格"));
      } else if (!isPrice(value)) {
        callback(new Error("请输入正确格式"));
      } else {
        callback();
      }
    };
    return {
      dialogImageUrl: "",
      dialogVisible: false,
      form: {
        comboGoodsName: "",
        comboGoodsNum: "",
        comboGoodsPrice: "",
      },
      rules: {
        comboGoodsName: [
          { required: true, trigger: "blur", message: "请输入套餐名称" },
        ],
        comboGoodsNum: [
          {
            required: true,
            trigger: "blur",
            validator: validatecomboGoodsNum,
          },
        ],
        comboGoodsPrice: [
          // { required: true, trigger: 'blur', message: '请设置价格' }
          {
            required: true,
            trigger: "blur",
            validator: validatecomboGoodsPrice,
          },
        ],
      },
      dialogFormVisible: false,
      textMap: {
        update: "编辑套餐",
        create: "新增套餐",
      },
    };
  },
  computed: {
    ...mapGetters({
      goodsID: "goodsID",
    }),
  },
  methods: {
    showEdit(row) {
      if (row) {
        this.form = Object.assign({}, row);
      }
      this.dialogFormVisible = true;
    },
    close() {
      this.$refs["form"].resetFields();
      this.form = this.$options.data().form;
      this.dialogFormVisible = false;
    },
    // 新增
    createData() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          this.addComboGoods();
        }
      });
    },
    // 编辑
    updateData() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          this.editComboGoods("编辑成功");
        }
      });
    },
    editComboGoods(text) {
      this.form.goodsID = this.goodsID;
      const obj = {
        type: "editComboGoods",
        data: this.form,
      };
      this.$http.post(this.$api.editComboGoods, obj).then((res) => {
        if (res.resultCode === "60001") {
          this.dialogFormVisible = false;
        } else {
          this.dialogFormVisible = false;
          this.$baseMessage(text, "success");
          this.$emit("fetchData");
        }
      });
    },
    addComboGoods() {
      this.form.goodsID = this.goodsID;
      const params = {
        type: "addComboGoods",
        data: this.form,
      };
      this.$http.post(this.$api.addComboGoods, params).then((res) => {
        if (res.resultCode === "60001") {
          this.dialogFormVisible = false;
        } else {
          this.dialogFormVisible = false;
          this.$baseMessage("添加成功", "success");
          this.$emit("fetchData");
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
::v-deep {
  .el-input {
    width: 300px;
    margin-right: 20px;
  }
  .el-form-item__content {
    display: flex;
  }
}

::v-depp {
  .el-form-item:nth-child(4) {
    .el-form-item__label {
      color: #f00;
    }
  }
}
</style>

