<template>
  <a-modal
    title="修改关系类名"
    :visible="show"
    :maskClosable="false"
    @ok="handleOk"
    size="middle"
    @cancel="handleClose"
  >
    <a-form :form="form">
      <a-form-item label="名称">
        <a-input
          v-decorator="formRules.relationClass"
          placeholder="请输入关系类名"
        />
      </a-form-item>
       <a-form-item label="背景颜色">
              <a-color-picker @fromChild="getColor" :color="this.params.backgroundColor" v-decorator="formRules.backGroundColor" />    
       </a-form-item>
    </a-form>
  </a-modal>
</template>

<script>
import AColorPicker  from '@/components/knowledge/colorPicker';
import { editRelationClass } from "@/api/graph/relationClass"

export default {
  name: "edit-relation-class-name-modal",
   components:{
      AColorPicker
   },
  props: ["params"],
  data() {
    return {
     
      show: true,
      form: this.$form.createForm(this),
      formRules: {
        // 所有验证规则
        relationClass: [
          // 用作标识，我们统一写成和表单提交字段一样
          "relationClass", // 表单提交的字段
          {
            rules: [
              { required: true, message: "此选项必填", whitespace: true },
            ],
            initialValue: this.params.relClsName,
          },
        ],
        backGroundColor: [       // 用作标识，我们统一写成和表单提交字段一样
         'backGroundColor',     // 表单提交的字段
         {
           initialValue: this.params.backGroundColor
         }
       ],
      },
    };
  },

  methods: {
    getColor (color) {
        this.color = color;
    },
    getFormData() {
      var result = this.$formValidateFields("form"); //form的字符串
      // 在这里对form返回数据进行处理
      return result;
    },
    callback(data) {
      if (data) {
        // ajax返回值处理后返回
        this.$close(true);
      } else {
        // 出错处理
      }
    },
    handleOk() {
      
      let result = this.getFormData(); // this是当前组件的this,  'form'此表单的名称，一定要是字符串
      this.getFormData().then(result => {
        const data = {
          relClsID: this.params.relClsID,
          relClsName: result.relationClass.trim(),
          backGroundColor:this.color,
        };
        editRelationClass(data).then((data) => {
          this.$close({ message: "成功" });
        });
      })
    },
    handleClose(e) {
      this.$close(false);
    },
  },
};
</script>

<style scoped></style>
