<template>
  <div>
    <obj-modal
      ref="modal"
      labelWidth="150px"
      :modalConfig="modalConfig"
      :modalData="modalData"
      :modalHandles="modalHandles"
    >
      <div slot="dialog__content">
        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          label-width="150px"
          class="demo-ruleForm"
        >
          <el-form-item label="预售剩余库存：" prop="name">
            <span style="font-size: 20px; margin-right: 20px">≤</span>
            <el-input-number
              v-model="ruleForm.name"
              :min="1"
              :max="9999"
              :precision="0"
              :step="1"
              label="请输入数量"
            ></el-input-number>
            <span style="font-size: 20px; margin-left: 14px">时通知我</span>
          </el-form-item>
          <el-form-item label="通知方式：" prop="value">
            <el-radio v-model="ruleForm.value" label="1">系统通知</el-radio>
            <el-radio v-model="ruleForm.value" label="2">短信通知</el-radio>
          </el-form-item>
        </el-form>
      </div>
    </obj-modal>
  </div>
</template>
<script>
import { debounce, cloneDeep } from "lodash";
export default {
  components: {},
  data() {
    return {
      isAdd: true,
      //表格属性
      modalConfig: {
        title: "库存预警设置",
        show: false,
        width: "800px",
      },
      modalData: {},
      ruleForm: {
        name: "",
        value: "1",
      },
      rules: {
        name: [{ required: true, message: "请输入属性名称", trigger: "blur" }],
        value: [
          {
            required: true,
            message: "请输入属性内容",
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    queryTableData(pageNo, pageSize) {},
    toggle(e) {
      if (this.modalConfig.show == false) {
        this.modalConfig.show = true;
      } else {
        this.modalConfig.show = false;
      }
      if (e) {
        this.init(cloneDeep(e.row));
      }
      return {
        add: (data) => {
          this.modalConfig.title = "库存预警设置";
          this.isAdd = true;
        },
        update: () => {
          this.isAdd = false;
        },
      };
    },
    init(row) {
      this.modalData = row;
    },
  },
  computed: {
    modalHandles() {
      return [
        {
          label: "取消",
          handle: () => {
            this.toggle();
          },
        },
        {
          label: "确认",
          type: "primary",
          // submit: true,
          handle: () => {
            this.$refs.ruleForm.validate((valid) => {
              if (valid) {
                this.$emit("getAttribute", this.ruleForm);
                this.toggle();
              }
            });
          },
        },
      ];
    },
  },
  asyncComputed: {},
};
</script>
<style lang="scss" scoped>
</style>