<template>
  <a-modal :footer="null" centered :title="titleText" v-model="isShow" @cancle="cancel">
    <a-form-model :model="formData" ref="ruleForm" :rules="rules">
      <a-form-model-item label="设备MAC地址" :label-col="{span:6}" :wrapper-col="{span:16}" prop="macAddress">
        <a-input
          placeholder="请输入设备MAC地址"
          :disabled="id?true:false"
          v-model="formData.macAddress"
          allowClea
          oninput="value=value.toLowerCase()"
          :maxLength="12" />
      </a-form-model-item>
      <a-form-model-item label="设备名称" :label-col="{span:6}" :wrapper-col="{span:16}" prop="deviceName">
        <a-input placeholder="请输入设备名称" v-model="formData.deviceName" allowClear :maxLength="30"/>
      </a-form-model-item>
      <a-form-model-item label="设备编号" :label-col="{span:6}" :wrapper-col="{span:16}" prop="deviceCode">
        <a-input placeholder="请输入设备编号" v-model="formData.deviceCode" allowClear :maxLength="30"/>
      </a-form-model-item>
      <a-form-model-item label="设备型号" :label-col="{span:6}" :wrapper-col="{span:16}" prop="deviceModel">
        <a-input placeholder="请输入设备型号" v-model="formData.deviceModel" allowClear :maxLength="30"/>
      </a-form-model-item>
      <a-form-model-item label="生产厂家" :label-col="{span:6}" :wrapper-col="{span:16}" prop="manufacturer">
        <a-input placeholder="请输入生产厂家" v-model="formData.manufacturer" allowClear :maxLength="30"/>
      </a-form-model-item>
      <a-form-model-item :wrapper-col="{ span: 24, offset: 8 }">
        <a-button type="primary" @click="handleSubmit()" :style="{ marginRight: '15px' }">
          保存
        </a-button>
        <a-button :style="{ marginLeft: '15px' }" @click="cancel">
          取消
        </a-button>
      </a-form-model-item>
    </a-form-model>
  </a-modal>
</template>

<script>
import { saveDevice, deviceDetails } from '@/api/electronicScale.js'
export default {
  name: 'AddElectronicScale',
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    deviceCode: {
      type: [Number, String],
      default: ''
    },
    id: {
      type: [Number, String],
      default: ''
    }
  },
  data () {
    return {
      formData: { macAddress: '', deviceCode: '', deviceName: '', deviceModel: '', manufacturer: '' },
      isShow: this.visible, // 弹框状态
      titleText: '新增',
      rules: {
        macAddress: [{ required: true, message: '请输入设备MAC地址(数字与英文字母组合)', trigger: 'blur', pattern: /^[A-Za-z0-9]+$/ }]
      }
    }
  },
  methods: {
	  // 数据详情
	  getPageInfo () {
		 const _this = this
	    deviceDetails({
	      srcDeviceCode: _this.deviceCode
	    }).then(res => {
	      if (res.status == 200) {
	  	  _this.formData = Object.assign({}, this.formData, res.data)
	  	  _this.formData.loginFlag = Number(this.formData.loginFlag)
	      }
	    })
	  },
    handleSubmit () {
      this.$refs.ruleForm.validate(valid => {
        const _this = this
        if (valid) {
	      const params = JSON.parse(JSON.stringify(this.formData))
	      saveDevice(params).then(res => {
	        console.log(res, 'rrrrrrrrr')
	        if (res.status == 200) {
	          _this.$message.success(res.message)
	          _this.$emit('refresh')
	          setTimeout(function () {
	            _this.cancel()
	          }, 300)
	        }
	      })
	    }
	  })
    },
    cancel (e) {
	  this.clear()
	  this.$emit('close')
    },
    clear () {
	  this.$refs.ruleForm.resetFields()
	  delete this.formData.id
	  this.formData.macAddress = ''
	  this.formData.deviceCode = ''
	  this.formData.deviceName = ''
      this.formData.deviceModel = ''
      this.formData.manufacturer = ''
    }
  },
  // 监听弹窗
  watch: {
    // 父页面传过来的弹窗状态
    visible (newValue, oldValue) {
      this.isShow = newValue
    },
    isShow (newValue, oldValue) {
      if (newValue) {
		  if (this.id) { // 编辑
		    this.titleText = '编辑'
          console.log(this.deviceCode, '---------shebei 编号')
		    this.getPageInfo()
		  } else {
		    this.titleText = '新增'
		  }
      } else {
		  this.cancel()
      }
      // if (!newValue) {
      //   this.$emit('close')
      // } else {
      //   this.$nextTick(() => {
      //     this.$refs.ruleForm.resetFields()
      //   })
      // }
    }
  }
}
</script>

<style>
</style>
