<template>
  <div>
    <!-- 弹窗 -->
    <a-modal
      v-model="isShow"
      @cancle="isShow=false"
      :footer="null"
      :centered="true"
      title="修改乐豆金额"
      class="ld-num-modal">
      <a-form id="components-form-demo-validate-other" ref="form" :form="form" @submit="handleSubmit">
        <a-form-item label="乐豆变动类型" :label-col="{ span: 7 }" :wrapper-col="{ span: 17 }">
          <v-select
            v-decorator="[
              'formData.changeType',
              { initialValue: formData.changeType, rules: [{ required: true, message: '请选择!' },] }
            ]"
            id="editLdNumModal-changeType"
            code="GOLD_CHANGE_TYPE"
            placeholder="请选择"
            allowClear></v-select>
        </a-form-item>
        <a-form-item label="乐豆变动量" :label-col="{ span: 7 }" :wrapper-col="{ span: 17 }">
          <a-input-number
            id="changeNum"
            class="inpNumber-unit"
            :min="0"
            :max="999999"
            :precision="0"
            v-decorator="[ 'formData.changeNum', { initialValue: formData.changeNum, rules: [{ required: true, message: '请输入乐豆变动量(0~999999)' }] } ]"
            placeholder="请输入乐豆变动量(0~999999)"
            allowClear />
          <span class="inp-unit">乐豆</span>
        </a-form-item>
        <a-form-item label="变动原因" :label-col="{ span:7 }" :wrapper-col="{ span:17}">
          <v-select
            v-decorator="[
              'formData.operateType',
              { initialValue: formData.operateType, rules: [{ required: true, message: '请输入修改原因!' },] }
            ]"
            id="editLdNumModal-operateType"
            code="GOLD_OPERATE_TYPE"
            placeholder="请选择"
            allowClear></v-select>
        </a-form-item>
        <a-form-item label="详情" :label-col="{ span:7 }" :wrapper-col="{ span:17}">
          <a-textarea
            id="editLdNumModal-remarks"
            :maxLength="500"
            v-decorator="[
              'formData.remarks',
              {
                initialValue: formData.remarks,
                rules: [] },
            ]"
            style="min-height: 50px;"
            placeholder="请输入详情内容(最多500个字符)"
            autosize />
        </a-form-item>
        <a-form-item :wrapper-col="{ span: 12, offset: 6}" style="text-align: center;">
          <a-button type="primary" html-type="submit" id="editLdNumModal-submit" style="margin-right: 15px">保存</a-button>
          <a-button @click="isShow=false" style="margin-left: 15px" id="editLdNumModal-close">取消</a-button>
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script>
import { VSelect } from '@/components'
import { updateGold } from '@/api/userInfo.js'
export default {
  name: 'EditLdNumModal',
  components: { VSelect },
  props: {
    openLdNumModal: {
      type: Boolean,
      default: false
    },
    customerNo: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      formItemLayout: {
			  labelCol: {
			    span: 6
			  },
			  wrapperCol: {
			    span: 14
			  }
      },
      isShow: this.openLdNumModal,
      form: this.$form.createForm(this, { name: 'editLdNumModal' }),
      formData: {
        operateType: '', // 手机号码
        changeType: '',
        changeNum: '',
        remarks: ''
      }
    }
  },
  methods: {
    // 点击保存;
    handleSubmit (e) {
      e.preventDefault()
      const _this = this
      this.form.validateFields((err, values) => {
        if (!err) {
          const formData = Object.assign({}, { customerNo: this.customerNo }, this.formData, values.formData)
          updateGold(formData).then(res => {
            console.log(res, 'rrrrrrrrr')
            if (res.status == 200) {
              _this.$message.success(res.message)
              // _this.$router.push({ path: `/userInfo/userManageList/list` })
              setTimeout(function () {
                _this.isShow = false
				 location.reload()
              }, 300)
            }
          })
        }
      })
    }
  },
  watch: {
    openLdNumModal (newValue, oldValue) {
      this.isShow = newValue
    },
    isShow (val) {
      console.log(this.customerNo)
      if (!val) {
        this.$emit('close')
      } else {
   	  this.form.resetFields()
      }
    }
  }
}
</script>

<style lang="less">
	.ld-num-modal{
		.input-number{
			display: flex;
			width: 100%;
		}
		//  input-number 框宽度
		.inpNumber{
		  width: 100%;
		}
		.inpNumber-unit{  //  有单位的
		  width: 88%;
		  margin-right: 8px;
		}
	}
</style>
