<template>
  <div>
    <a-modal
      centered
      wrapClassName="addHWModal-modal"
      :footer="null"
      :maskClosable="false"
      :title="textTitle"
      v-model="isshow"
      @cancle="isshow=false"
      :width="500">
      <a-spin :spinning="spinning" tip="Loading...">
        <a-form-model
          id="addHWModal-form"
          ref="ruleForm"
          :model="form"
          :rules="rules"
        >
          <a-row :gutter="20">
            <a-col :span="24">
              <a-form-model-item label="货位号" prop="shelfPlaceCode" :label-col="{span: 5}" :wrapper-col="{span: 18}">
                <a-input id="addHWModal-shelfPlaceCode" v-model.trim="form.shelfPlaceCode" allowClear placeholder="请输入货位号"/>
              </a-form-model-item>
            </a-col>
          </a-row>
          <a-form-model-item :label-col="{span: 0}" :wrapper-col="{span: 24}" style="text-align: center;">
            <a-button type="primary" @click="handleSubmit()" :style="{ marginRight: '8px' }" id="addHWModal-handleSubmit">保存</a-button>
            <a-button :style="{ marginLeft: '8px' }" @click="isshow=false" id="addHWModal-close">取消</a-button>
          </a-form-model-item>
        </a-form-model>
      </a-spin>
    </a-modal>
  </div>
</template>

<script>
import { saveHw, shelfHWDetail } from '@/api/shelf.js'
export default {
  name: 'AddHWModal',
  props: {
    openHWModal: {
      type: Boolean,
      default: false
    },
    shelfSn: {
      type: [String, Number],
      default: ''
    },
    shelfPlaceSn: {
      type: [String, Number],
      default: ''
    }
  },

  data () {
    return {
      spinning: false,
      isshow: this.openHWModal,
      textTitle: '新增货位',
      roleList: [],
      pageInfo: null,
      form: {
        shelfPlaceCode: '' // 货位号
      },
      rules: {
        shelfPlaceCode: [ { required: true, message: '请输入货位号', trigger: 'blur' }]
      }
    }
  },
  methods: {
    // 过滤空格
    filterEmpty () {
      let str = this.form.name
      str = str.replace(/\ +/g, '')
      str = str.replace(/[ ]/g, '')
      str = str.replace(/[\r\n]/g, '')
      this.form.name = str
    },
    // 查询货位详情
    getShelfHWDetail () {
      this.spinning = true
      shelfHWDetail({ shelfPlaceSn: this.shelfPlaceSn }).then(res => {
        if (res.status == 200) {
          this.form = Object.assign({}, res.data)
        }
        this.spinning = false
      })
    },
    // 保存提交
    handleSubmit () {
      const _this = this
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          const params = JSON.parse(JSON.stringify(_this.form))
          params.shelfSn = _this.shelfSn ? _this.shelfSn : null
          console.log(params.id, params.shelfSn, '------------编辑新增')
          _this.spinning = true
          saveHw(params).then(res => {
            if (res.status == 200) {
              _this.$message.success(res.message)
              _this.$emit('refresh')
              setTimeout(function () {
                _this.isshow = false
                _this.spinning = false
              }, 300)
            } else {
              _this.spinning = false
            }
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }
  },
  watch: {
    openHWModal (newValue, oldValue) {
      console.log(newValue, 'newValue')
      this.isshow = newValue
    },
    isshow (newValue, oldValue) {
      if (!newValue) {
        this.$refs.ruleForm.resetFields()
        this.form = {}
        this.textTitle = '新增货位'
        this.$emit('close')
      }
    },
    shelfPlaceSn: {
      handler (newValue, oldValue) {
        if (this.isshow && newValue) {
          if (this.shelfPlaceSn) { //  编辑
            this.textTitle = '编辑货位'
            this.getShelfHWDetail()
          }
        }
      },
      deep: true
    }
  }
}
</script>
<style lang="less">
</style>
