<template>
  <div>
    <!-- 新增编辑商品分类弹窗 -->
    <a-modal
      v-model="isShow"
      @cancle="isShow=false"
      :footer="null"
      width="60%"
      :centered="true"
      :title="titleText">
      <a-form id="components-form-demo-validate-other" :form="form" ref="form" v-bind="formItemLayout" @submit="handleSubmit">
        <a-form-item label="商品分类名称" :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol">
          <a-input
            id="addGoodsClassModal-name"
            :maxLength="30"
            v-decorator="['formData.name', { initialValue: formData.name,getValueFromEvent: $filterEmpty, rules: [{ required: true, message: '请输入供应商名称(最多30个字符)!' }] }]"
            placeholder="请输入商品名称(最多30个字符)"
            allowClear />
        </a-form-item>
        <a-form-item label="商城主页显示数量" :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol">
          <a-input-number
            id="addGoodsClassModal-popularizeGoodsLimit"
            class="inpNumber"
            :min="0"
            :max="999999"
            :precision="0"
            v-decorator="[ 'formData.popularizeGoodsLimit', { initialValue: formData.popularizeGoodsLimit, rules: [{ required: true, message: '请输入商城主页显示数量(0~999999)' }] } ]"
            placeholder="请输入商城主页显示数量(0~999999)"
            allowClear />
        </a-form-item>
        <a-form-item label="订单起购金额" :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol">
          <a-input-number
            id="addGoodsClassModal-goldLimit"
            class="inpNumber-unit"
            :min="0"
            :max="999999"
            :precision="0"
            v-decorator="[ 'formData.goldLimit', { initialValue: formData.goldLimit, rules: [{ required: true, message: '请输入订单起购金额(0~999999)' }] } ]"
            placeholder="请输入订单起购金额(0~999999)"
            allowClear />
          <span class="inp-unit">乐豆</span>
        </a-form-item>
        <a-form-item label="备注" :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol">
          <a-textarea
            :maxLength="500"
            v-decorator="['formData.remarks', { initialValue: formData.remarks, rules: [{ required: false, message: '请输入备注内容(最多500个字符)!' }] }]"
            id="addGoodsClassModal-remarks"
            placeholder="请输入备注内容(最多500个字符)"
            allowClear />
        </a-form-item>
        <a-form-item :wrapper-col="{ span: 12, offset: 6}" style="text-align: center;">
          <a-button type="primary" html-type="submit" id="addGoodsClassModal-submit" style="margin-right: 15px">保存</a-button>
          <a-button @click="isShow=false" style="margin-left: 15px" id="addGoodsClassModal-close">取消</a-button>
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script>
import {
  VSelect
} from '@/components'
import {
  goodsClassDetails,
  saveGoodsClass
} from '@/api/shopSetting.js'
export default {
  name: 'AddGoodsClassModal',
  components: {
    VSelect
  },
  props: {
    openGoodClassModal: {
      type: Boolean,
      default: false
    },
    itemId: {
      type: String,
      default: ''
    },
    itemData: {
      type: Object,
      default: function () {
        return {}
      }
    }
  },

  data () {
    return {
      formItemLayout: {
        labelCol: {
          span: 6
        },
        wrapperCol: {
          span: 14
        }
      },
      isShow: this.openGoodClassModal,
      titleText: '新增',
      formLayout: 'horizontal',
      form: this.$form.createForm(this, { name: 'addGoodsClassModal' }),
      formData: {
        name: '', // 分类名称
        goldLimit: '', // 限制金额
        remarks: '', // 备注
        popularizeGoodsLimit: ''
      }
    }
  },
  methods: {
    // 查看详情
    getPageInfo () {
      const _this = this
      goodsClassDetails({
        id: _this.itemId
      }).then(res => {
		  if (res.status == 200) {
			  this.form.setFieldsValue({ 'formData': res.data })
		  }
      })
    },
    // 点击保存;
    handleSubmit (e) {
      e.preventDefault()
      const _this = this
      this.form.validateFields((err, values) => {
        if (!err) {
          const formData = Object.assign({}, this.itemData, this.formData, values.formData)
		  formData.id = _this.itemId
          saveGoodsClass(formData).then(res => {
            if (res.status == 200) {
              _this.$message.success(res.message)
			  _this.$emit('refresh')
              setTimeout(function () {
                _this.isShow = false
              }, 300)
            }
          })
        }
      })
    }
  },
  watch: {
    openGoodClassModal (newValue, oldValue) {
      this.isShow = newValue
	  console.log(this.isShow)
    },
    isShow (val) {
	  if (!val) {
	    this.$emit('close')
	  } else {
		  this.form.resetFields()
	  }
    },
    itemId (newValue, oldValue) {
      if (newValue && this.isShow) {
        this.titleText = '编辑'
        this.getPageInfo(newValue)
      } else {
		  this.titleText = '新增'
	  }
    }
  }
}
</script>

<style lang="less">
	.input-number{
		display: flex;
		width: 100%;
	}
	.inpNumber{
		width: 100%;
	}
	.inpNumber-unit{  //  有单位的
		width: 90%;
		margin-right: 8px;
	}
</style>
