<template>
  <div class="routerWapper">
    <!-- {{labelId}} -->
    <div>
      <a-row>
        <a-col :span='1'>
          <div class="detailOperations">
            <a-button @click="backPage"> 返回 </a-button>
          </div>
        </a-col>
        <a-col :span='1' :offset='1'>
          <a-button type='primary' @click="save()">保存</a-button>
        </a-col>
        <a-col :span='19'></a-col>
      </a-row>
    </div>
    <div>
      <a-divider type='horizontal' />
        <a-form :form='labelForm'>
          <a-form-item label='标签名' :label-col="{span:2}" :wrapper-col="{span:14}">
            <a-input v-decorator="['labelName',{validateTrigger:'blur', initialValue: '', rules: [{required: true, message: '请填写标签名！'}]}]"></a-input>
          </a-form-item>
        </a-form>
    </div>
  </div>
    
</template>

<script>
export default {
  data() {
    return {
      labelForm: this.$form.createForm(this),
      labelList: {},
      finish: false,
    }
  },
  props: [
    'triggerType',
    'labelId'
  ],
  mounted() {
    this.getLabelInfo()
  },
  watch: {
    triggerType: {
      handler: function(newV, oldV) {
        this.resetFormFields()
        this.getLabelInfo()
      },
      immediate: true
    },
    labelId: {
      handler: function(newV, oldV) {
        this.resetFormFields()
        this.getLabelInfo()
      },
      immediate: true
    }
  },
  methods: {
    getLabelInfo() {
      if(!!this.labelId) {
        this.$ajax.get({
          url: this.$api.GET_LABEL_DETAIL.replace('{id}', this.labelId),
        }).then(res => {
          if (res.code == 200) {
            this.labelList = res.data.content
            this.labelForm.setFieldsValue({
              labelName: res.data.content.labelName
            })
          }
        })
      }
    },
    resetFormFields() {
      this.labelForm.resetFields()
    },
    backPage(){ // 返回按钮
      this.finish = true
      this.$emit('finish', this.finish)
    },
    save() {
      this.labelForm.validateFields((err1, values) => {
        if(!err1) {
          this.labelList.labelName = this.labelForm.getFieldValue('labelName')
          this.$ajax.put({
            url: this.$api.PUT_LABEL_INFO.replace('{id}', this.labelId),
            params: Object.assign(this.labelList, {id: this.labelId})
          }).then(res => {
            if (res.code == 200) {
              this.$message.success('修改成功!')
              this.resetFormFields()
              this.finish = true
              this.$emit('finish', this.finish)
            } else {
              this.$message.success('修改失败!')
            }
          })
        }
      })
    },

  },
}
</script>