<template>
  <a-modal :footer="null" centered :title="titleText" v-model="isShow" @cancle="cancel">
    <a-spin :spinning="loading">
      <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-spin>
  </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]+$/ }]
      },
      loading: false
    }
  },
  methods: {
    // 数据详情
    getPageInfo () {
      const _this = this
      _this.loading = true
      deviceDetails({
        srcDeviceCode: _this.deviceCode
      }).then(res => {
        if (res.status == 200) {
          _this.loading = false
          _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 = '编辑'
          this.getPageInfo()
        } else {
          this.titleText = '新增'
        }
      } else {
        this.cancel()
      }
    }
  }
}
</script>

<style>
</style>
