<template>
  <el-dialog class="dialog"
             :visible.sync="dialogVisible"
             center
             title="入库"
             append-to-body
             :before-close="onBeforeClose"
             @close="onClose"
             width="600px">
    <el-form label-width="120px" ref="dataForm" :model="dataForm" :rules="dataRules">
      <el-form-item label="物品名称" prop="name">
        <el-input v-model="dataForm.name" maxlength="30"></el-input>
      </el-form-item>
      <el-form-item label="物品数量" prop="count">
        <el-input v-model="dataForm.count" oninput="value=value.replace(/[^\d]/g,'')">
          <template slot="append">台</template>
        </el-input>
      </el-form-item>
      <el-form-item label="物品介绍" prop="description">
        <el-input v-model="dataForm.description" type="textarea" maxlength="255" rows="4"></el-input>
      </el-form-item>
      <el-form-item label="物品分类" prop="classifyId">
        <el-select v-model="dataForm.classifyId" placeholder="请选择物品分类" clearable>
          <el-option v-for="item in classifyList" :key="item.id" :label="item.name" :value="item.id"></el-option>
        </el-select>
      </el-form-item>
    </el-form>

    <div slot="footer">
      <el-button type="primary" @click="onConfirm">确 认</el-button>
      <el-button @click="onCancel">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>

import {validateNotEmpty} from "@/utils/validate";

export default {
  name: "assetsGoodsDialogSave",
  components: {},
  props: {
    visible: {
      type: Boolean
    },
  },
  computed: {
    dialogVisible: {
      get() {
        return this.visible
      },
      set(val) {
        this.$emit('update:visible', val)
      }
    }
  },
  data() {
    const validateCount = (rule, value, callback) => {
      if (rule.required) {
        if (!value || value.length === 0) {
          callback(new Error('物品数量不能为空'));
        } else if (Number(value) <= 0) {
          callback(new Error('物品数量至少为1'));
        }
      }
      callback();
    };
    return {
      dataForm: {
        name: undefined, // 物品名称
        count: undefined, // 变化数量，入库时大于0，出库时小于0
        description: undefined, // 物品介绍
        classifyId: undefined, // 物品分类id
      },

      dataRules: {
        count: [{validator: validateCount, required: true, trigger: 'change'},{validator: validateCount, required: true, trigger: 'blur'}],
        name: [{validator: validateNotEmpty, errorMessage: "物品名称不能为空", required: true, trigger: 'blur'}],
        description: [{validator: validateNotEmpty, errorMessage: "物品介绍不能为空", required: true, trigger: 'blur'}],
        classifyId: [{validator: validateNotEmpty, errorMessage: "物品分类不能为空", required: true, trigger: 'change'}]
      },

      classifyList: [], // 物品分类
    }
  },

  mounted() {
    this.initData();
  },

  methods: {
    // 初始化数据
    initData() {
      this.$axios.get("/v1/stock/classify/list", {params: {page: 1, size: 999}},false).then(data => {
        this.classifyList = data.list;
      });
    },

    // 取消
    onCancel() {
      this.dialogVisible = false;
    },

    // 确认
    onConfirm() {
      this.$refs['dataForm'].validate().then(valid => {
        if (valid) {
          this.$axios.post("/v1/stock/goods/add", this.dataForm).then(() => {
            this.$message.success("入库成功！");
            this.$emit("add");
            this.onCancel();
          });
        }
      })
    },

    // 关闭前确认
    onBeforeClose(done) {
      if (this.$store.state.app.closeConfirmEnable) {
        this.$confirm("确认关闭？").then(() => done());
      } else {
        done();
      }
    },

    // 关闭
    onClose() {
      this.$emit("close");
    }
  }
}
</script>

<style scoped lang="scss">

</style>
