<template>
  <div>
    <a-modal
      centered
      wrapClassName="setModal-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="setModal-form"
          ref="ruleForm"
          :model="form"
          :rules="rules"
        >
          <div style="margin-bottom: 10px;text-align: center;">
            <strong>近30天下单额</strong>
          </div>
          <a-form-model-item label="LV1" prop="lv1" :label-col="{span: 4}" :wrapper-col="{span: 18}">
            <a-input-number style="width:80%;" v-model.trim="form.lv1" :precision="2" allowClear placeholder="请输入LV1下单额"/>
            元以下
          </a-form-model-item>
          <a-form-model-item label="LV2" prop="lv2" :label-col="{span: 4}" :wrapper-col="{span: 18}">
            <a-input-group style="width: 90%;" compact>
              <a-input style="width: 43%; text-align: center;pointer-events: none; backgroundColor: #f8f8f8;color:#666;" disabled v-model.trim="form.lv1"/>
              <a-input
                style=" width: 12%; pointer-events: none; backgroundColor: #fff"
                placeholder="至"
                disabled
              />
              <a-input-number
                :precision="2"
                :min="form.lv1"
                style="width: 43%; text-align: center"
                v-model.trim="form.lv2"
                allowClear
                placeholder="请输入LV2下单额"/>
            </a-input-group>
            元
          </a-form-model-item>
          <a-form-model-item label="LV3" prop="lv3" :label-col="{span: 4}" :wrapper-col="{span: 18}">
            <a-input-group style="width: 90%;" compact>
              <a-input style=" width: 43%; text-align: center;pointer-events: none; backgroundColor: #f8f8f8;color:#666;" disabled v-model.trim="form.lv2"/>
              <a-input
                style=" width: 12%; pointer-events: none; backgroundColor: #fff"
                placeholder="至"
                disabled
              />
              <a-input-number
                :precision="2"
                :min="form.lv2"
                style=" width: 43%; text-align: center"
                v-model.trim="form.lv3"
                allowClear
                placeholder="请输入LV3下单额"/>
            </a-input-group>
            元
          </a-form-model-item>
          <a-form-model-item label="LV4" prop="lv4" :label-col="{span: 4}" :wrapper-col="{span: 18}">
            <a-input-group style="width: 90%;" compact>
              <a-input style=" width: 43%; text-align: center;pointer-events: none; backgroundColor: #f8f8f8;color:#666;" disabled v-model.trim="form.lv3"/>
              <a-input
                style=" width: 12%; pointer-events: none; backgroundColor: #fff"
                placeholder="至"
                disabled
              />
              <a-input-number
                :precision="2"
                :min="form.lv3"
                style=" width: 43%; text-align: center"
                v-model.trim="form.lv4"
                allowClear
                placeholder="请输入LV4下单额"/>
            </a-input-group>
            元
          </a-form-model-item>
          <a-form-model-item label="LV5" :label-col="{span: 4}" :wrapper-col="{span: 18}">
            <a-input style="width: 80%; text-align: center;pointer-events: none; backgroundColor: #f8f8f8;color:#666;" disabled v-model.trim="form.lv4"/>
            元以上
          </a-form-model-item>

          <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="setModal-handleSubmit">保存</a-button>
            <a-button :style="{ marginLeft: '8px' }" @click="isshow=false" id="setModal-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: {
    openModal: {
      type: Boolean,
      default: false
    },
    shelfSn: {
      type: [String, Number],
      default: ''
    },
    nowData: {
      type: Object,
      default: function () {
        return {}
      }
    }
  },

  data () {
    return {
      spinning: false,
      isshow: this.openModal,
      textTitle: '参数设置',
      roleList: [],
      pageInfo: null,
      form: {
        lv1: '',
        lv2: '',
        lv3: '',
        lv4: ''
      },
      rules: {
        lv1: [{ required: true, message: '请输入LV1下单金额', trigger: 'blur' }],
        lv2: [{ required: true, message: '请输入LV2下单金额', trigger: 'blur' }],
        lv3: [{ required: true, message: '请输入LV3下单金额', trigger: 'blur' }],
        lv4: [{ required: true, message: '请输入LV4下单金额', trigger: 'blur' }]
      }
    }
  },
  methods: {
    // 查询货位详情
    getShelfHWDetail () {
      this.spinning = true
      shelfHWDetail({ shelfPlaceSn: this.nowData.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: {
    openModal (newValue, oldValue) {
      this.isshow = newValue
    },
    isshow (newValue, oldValue) {
      if (!newValue) {
        this.$refs.ruleForm.resetFields()
        this.form = {}
        this.$emit('close')
      } else {
        if (this.nowData && this.nowData.id) { //  编辑
          this.getShelfHWDetail()
        }
      }
    }
  }
}
</script>
<style lang="less">
</style>
