<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="所属分类" :label-col="{span:6}" :wrapper-col="{span:16}" prop="labelType">
          <v-select
            v-model="formData.labelType"
            ref="labelType"
            id="addLabelSetting-labelType"
            code="LABEL_TYPE"
            placeholder="请选择"
            allowClear></v-select>
        </a-form-model-item>
        <a-form-model-item label="网点标签名称" :label-col="{span:6}" :wrapper-col="{span:16}" prop="labelName">
          <a-input placeholder="请输入网点标签名称(30个字符以内)" v-model="formData.labelName" allowClear :maxLength="30"/>
        </a-form-model-item>
        <a-form-model-item label="备注" :label-col="{span:6}" :wrapper-col="{span:16}" prop="remarks">
          <a-textarea
            id="addLabelSetting-remarks"
            :maxLength="500"
            v-model="formData.remarks"
            style="min-height: 50px;"
            placeholder="请输入备注(最多500个字符)"
            autoSize />
        </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 { VSelect } from '@/components'
import { lableDetails, saveLable } from '@/api/labelSetting.js'
export default {
  name: 'AddLabelSetting',
  components: { VSelect },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    id: {
      type: [Number, String],
      default: ''
    }
  },
  data () {
    return {
      formData: { labelName: '', remarks: '' },
      isShow: this.visible, // 弹框状态
      titleText: '新增',
      rules: {
        labelType: [{ required: true, message: '请选择', trigger: 'blur' }],
        labelName: [{ required: true, message: '请输入网点标签名称(30个字符以内)', trigger: 'blur' }]
      },
      loading: false
    }
  },
  methods: {
    // 数据详情
    getPageInfo () {
      const _this = this
      _this.loading = true
      lableDetails({
        id: _this.id
      }).then(res => {
        if (res.status == 200) {
          _this.loading = false
          _this.formData = Object.assign({}, this.formData, res.data)
        }
      })
    },
    // 保存
    handleSubmit () {
      this.$refs.ruleForm.validate(valid => {
        const _this = this
        if (valid) {
          const params = JSON.parse(JSON.stringify(this.formData))
          if (params.labelType == 'org' || params.labelType == 'biz') {
            params.labelBizType = 'STATION'
          }
          saveLable(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.remarks = ''
    }
  },
  // 监听弹窗
  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>
