
<!-- 创建知识图谱 -->
<template>
  <el-form label-position="left" ref="form" label-width="120px" :model="form" :size="defaultFormItemSize" :rules="rules">
    <el-form-item label="类型:" prop="kGManageDto.kgType">
      <el-select v-model="form.kGManageDto.kgType" placeholder="请选择类型">
        <el-option v-for="item in [{ label: 'neo4j', value: 'neo4j' }]" :key="item.value" :label="item.label" :value="item.value">
        </el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="名称:" prop="kGManageDto.kgName">
      <el-input v-model="form.kGManageDto.kgName" class="inputWidth" :size="defaultFormItemSize"></el-input>
    </el-form-item>
    <el-form-item label="描述:" prop="kGManageDto.kgDescribe">
      <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4}" v-model="form.kGManageDto.kgDescribe" class="inputWidth" :size="defaultFormItemSize"></el-input>
    </el-form-item>
    <el-form-item label="链接地址:" prop="kGManageDto.kgUrl">
      <el-input v-model="form.kGManageDto.kgUrl" class="inputWidth" :size="defaultFormItemSize"></el-input>
    </el-form-item>
    <el-form-item label="浏览地址:" prop="kGManageDto.kgBowerUrl">
      <el-input v-model="form.kGManageDto.kgBowerUrl" class="inputWidth" :size="defaultFormItemSize"></el-input>
    </el-form-item>
    <el-form-item label="用户名:" prop="kGManageDto.kgUserName">
      <el-input v-model="form.kGManageDto.kgUserName" class="inputWidth" :size="defaultFormItemSize"></el-input>
    </el-form-item>
    <el-form-item label="密码:" prop="kGManageDto.kgPassword">
      <el-input v-model="form.kGManageDto.kgPassword" show-password class="inputWidth" :size="defaultFormItemSize"></el-input>
    </el-form-item>
    <el-row type="flex" justify="end" class="dialog-btn-layer mt20">
      <el-button :size="defaultFormItemSize" :plain="true" @click="onCancel(false)">取消</el-button>
      <el-button type="primary" :size="defaultFormItemSize" @click="onSubmit">确定</el-button>
    </el-row>
  </el-form>
</template>

<script>
import { KnowledgeGraph } from '@/api/gptController.js'
export default {
  data() {
    return {
      modelList: [],
      dataList: [],
      form: {
        kGManageDto: {
          kgBowerUrl: '',
          kgDescribe: '',
          kgName: '',
          kgPassword: '',
          kgType: '',
          kgUrl: '',
          kgUserName: ''
        }
      },
      rules: {
        'kGManageDto.kgName': [{ required: true, message: '请输入名称', trigger: 'blur' }],
        'kGManageDto.kgUrl': [{ required: true, message: '请输地址', trigger: 'blur' }]
      }
    }
  },
  props: ['isEdit', 'item'],
  components: {},

  computed: {},

  mounted() {
    this.form.kGManageDto = { ...this.form.kGManageDto, ...this.item }
  },

  methods: {
    onCancel(isSuccess) {
      if (this.observer != null) {
        this.observer.cancel(isSuccess)
      }
    },
    onSubmit() {
      return new Promise((resolve, reject) => {
        this.$refs['form'].validate((valid) => {
          if (valid) {
            let params = {}
            params = { ...this.form }
            if (this.isEdit) {
              KnowledgeGraph.update(this, params)
                .then((res) => {
                  resolve(res)
                  this.$message.success('编辑成功')
                  this.onCancel(true)
                })
                .catch((e) => {
                  reject(e)
                })
            } else {
              KnowledgeGraph.add(this, params)
                .then((res) => {
                  resolve(res)
                  this.$message.success('添加成功')
                  this.onCancel(true)
                })
                .catch((e) => {
                  reject(e)
                })
            }
          } else {
            // reject();
          }
        })
      })
    }
  }
}
</script>
<style scoped>
.inputWidth {
  width: 600px;
}

.title {
  font-size: 20px;
  margin-bottom: 16px;
}

.introduce {
  font-size: 12px;
  color: #909399;
  margin-bottom: 10px;
  display: block;
}

.isReadonly input {
  border: none;
}
</style>
