<template>
  <ai-detail class="dmAdd">
    <ai-title slot="title" :title="pageTitle" isShowBottomBorder isShowBack @back="back"/>
    <template #content>
      <el-form size="small" :model="form" label-width="120px" :rules="rules" ref="DataModelForm">
        <ai-card title="基本信息">
          <el-row type="flex">
            <div class="fill">
              <el-form-item label="模型名称" prop="name">
                <el-input v-model="form.name" clearable placeholder="用来标识模型的用途"/>
              </el-form-item>
            </div>
            <div class="fill">
              <el-form-item label="模型别名" prop="alias">
                <el-input v-model="form.alias" clearable placeholder="用来通过通用方法获取模型"/>
              </el-form-item>
            </div>
          </el-row>
        </ai-card>
        <ai-card title="设计模型" panel>
          <el-form-item prop="model" label-width="0">
            <div ref="DataModel" class="dataModel"/>
          </el-form-item>
        </ai-card>
      </el-form>
    </template>
    <template #footer>
      <el-button @click="back">返回</el-button>
      <el-button type="primary" @click="submit">提交</el-button>
    </template>
  </ai-detail>
</template>

<script>
import {mapActions} from "vuex";
import {LogicFlow} from "@logicflow/core"
import "@logicflow/core/dist/style/index.css"

export default {
  name: "dmAdd",
  data() {
    return {
      form: {},
      rules: {
        name: {required: true, message: "请输入模型名称"},
        alias: {required: true, message: "请输入模型别名"},
      },
      diagram: null
    }
  },
  computed: {
    pageTitle: v => v.isEdit ? "编辑数据模型" : "新增数据模型"
  },
  methods: {
    ...mapActions(['closePage']),
    back() {
      this.closePage()
      this.$router.push({})
    },
    getDetail() {
      const {id} = this.$route.query
      id && this.instance.post("", null, {params: {id}}).then(res => {
        if (res?.data) {
          this.form = res.data
        }
      })
    },
    submit() {
      this.$refs.DataModelForm.validate()
      .then(() => this.instance.post("", this.form))
      .then(res => {
        if (res?.code == 0) {
          this.$message.success("提交成功")
          this.back()
        }
      })
    },
    initLf() {
      this.diagram = new LogicFlow({
        container: this.$refs.DataModel,
        animation: true,
        grid: true
      })
      this.diagram.render()
    }
  },
  created() {
    this.getDetail()
  },
  mounted() {
    this.initLf()
  }
}
</script>

<style lang="scss" scoped>
.dmAdd {
  .dataModel {
    height: 400px;
  }
}
</style>
