<!--
  @description: 商品管理/修改库存弹框
  @Modifier：dijia
  @date：2021/08/10
-->
<template>
  <div>
    <el-dialog
      v-loading="loading"
      :visible.sync="dialog"
      title="修改库存"
      width="500px"
      custom-class="shop_mall_dialog"
    >
      <el-form
        ref="fromDataRef"
        :rules="rules"
        :model="formData"
        :inline-message="true"
      >
        <table class="from_table" style="margin-bottom:10px;">
          <tr>
            <td>
              <el-form-item label="商品原库存" />
            </td>
            <td>
              <el-input v-model="stock" disabled />
            </td>
          </tr>
          <tr>
            <td>
              <el-form-item ref="newInventory" prop="newInventory" label="增减后商品库存" />
            </td>
            <td>
              <el-input v-model="formData.newInventory" placeholder="请输入数字" maxlength="10" show-word-limit @input="proving" />
            </td>
          </tr>
          <tr>
            <td>
              <el-form-item label="增减差值" />
            </td>
            <td>
              <el-input v-model="result" placeholder="差值自动计算" disabled />
            </td>
          </tr>
        </table>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitClick">提 交</el-button>
        <el-button @click="dialog = false">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
/* api*/
import { getProductDetails, updateProductSock } from '@/api/shoppingmall/products'
import { characters1_auto } from '@/assets/js/validate'// 校验输入内容
export default {
  name: 'ModifyStockDialog',
  props: {
  },
  data() {
    return {
      dialog: false,
      loading: false,
      formData: {
        newInventory: null,
        productId: ''
      },
      result: '',
      stock: 0,
      rules: {
        newInventory: [{ required: true, validator: characters1_auto, trigger: 'blur' }]
      }
    }
  },
  watch: {
    'dialog'(val) {
      if (!val) {
        this.resetForm()
      }
    }
  },
  methods: {
    openDialog(id) {
      this.dialog = true
      this.loading = true
      this.formData.newInventory = null
      this.formData.productId = id
      getProductDetails(id).then(res => {
        this.stock = res.data.inventoryQuantity
        this.loading = false
      })
    },
    resetForm() {
      this.formData = {
        newInventory: null,
        productId: ''
      }
      this.stock = 0
      this.result = ''
    },
    submitClick() {
      this.loading = true
      if (!this.formData.newInventory && this.formData.newInventory !== 0) {
        this.$message.info('请填写商品库存！')
        return
      }
      updateProductSock(this.formData.productId, this.formData.newInventory).then(res => {
        if (res.header.ret === '0') {
          this.$message.success('修改库存成功！')
          this.$emit('saveSuccess')
          this.loading = false
          this.dialog = false
        }
      })
    },
    // input过滤只能输入正整数
    proving() {
      // 先把非数字的都替换掉，除了数字
      this.formData.newInventory = this.formData.newInventory.replace(/[^\d]/g, '')
      // 不能是000000
      this.formData.newInventory = this.formData.newInventory.replace(/^(0)*(\d[0-9]*)/g, '$2')
      if (this.formData.newInventory === null) {
        this.result = ''
      } else {
        this.result = this.formData.newInventory - this.stock
      }
    }
  }
}
</script>

<style lang="less" scoped>
</style>
