<template>
  <el-dialog :title="title" :visible.sync="show" :width="width" :before-close="close" append-to-body>
    <el-form v-loading="loading" ref="ruleForm" :model="ruleForm" :rules="rules" label-width="120px">
      <el-form-item prop="stock" label="可占库存">
        <el-select v-model="ruleForm.type" placeholder="请选择" class="prepend-select w100">
          <el-option label="增加" :value="1"></el-option>
          <el-option label="减少" :value="2"></el-option>
        </el-select>
        <el-input-number v-model="ruleForm.stock" placeholder="请输入" controls-position="right" :precision="0" :min="1" :max="max" class="w140 block-center insert-input" size="small"></el-input-number>
      </el-form-item>
      <el-form-item prop="remark" label="调整备注">
        <el-input type="textarea" v-model="ruleForm.remark" maxlength="240" show-word-limit class="w260" placeholder="" :rows="4"></el-input>
      </el-form-item>
    </el-form>
    <slot></slot>
    <span slot="footer" class="dialog-footer">
      <el-button @click="close">取消</el-button>
      <el-button type="primary" :loading="loading" @click="submit">确认</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  name: 'AdjustStock',
  props: {
    totalCount: {
      type: Number,
      default: 0
    },
    show: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: '调整库存'
    },
    width: {
      type: String,
      default: '500px'
    }
  },
  data() {
    const validateStock = (rule, value, callback) => {
      const { stock } = this.ruleForm;
      if (stock === '' || stock == undefined) {
        callback(new Error('请输入库存值'));
      } else {
        callback();
      }
    };
    return {
      ruleForm: {
        stock: 0,
        type: 1, // int	1: 增加; 2: 减少
        remark: ''
      },
      rules: {
        stock: { required: true, validator: validateStock, trigger: 'change' },
        remark: { required: true, message: '请输入备注', trigger: 'change' },
      },
      loading: false,
    };
  },
  methods: {
    close() {
      this.loading = false;
      this.$emit('update:show', false);
      this.ruleForm.type = 1;
      this.ruleForm.stock = 0;
      this.ruleForm.remark = '';
      this.$refs.ruleForm.resetFields();
    },
    submit() {
      this.$refs.ruleForm.validate((valid) => {
        if (!valid) {
          return;
        }
        // 后端会控制的，减少值大于库存值直接减到0 success
        // if(this.ruleForm.type == 2 && this.totalCount < this.ruleForm.stock) {
        //   this.$tips({ message: '调整目标值大于当前库存值', type: 'error' });
        //   return;
        // }
        const params = {
          remark: this.ruleForm.remark,
          optType: this.ruleForm.type, // 1: 增加; 2: 减少
          count: this.ruleForm.stock // 增加或者减少数量
        };
        this.$emit('handleSubmit', params);
      });
    }
  },
};
</script>

<style lang="scss" scoped>
.prepend-select /deep/ {
  .el-input__inner {
    box-shadow: none !important;
    border-color: $gray-border !important;
    border-right: none !important;
    border-radius: 2px 0 0 2px;
  }
}
.insert-input /deep/ {
  .el-input__inner {
    border-radius: 0 2px 2px 0;
  }
}
</style>