<template>
  <div class="layout-no-flex">
    <el-toolbar>
      <el-button type="primary" @click="$router.back()" size="medium" round class="shadow-primary"><i class="fa fa-chevron-left"></i> 返回上页</el-button>
      <span class="button-separator"></span>
      <el-button type="button" priv="Platform.Metadata.Save" class="el-button el-button--default save" @click="confirmClickHandler"><span><i class="fa fa-save"></i>保存</span></el-button>
    </el-toolbar>
    <div>
      <div class="detail-panel detail-form">
        <h3>{{modelId=='new'?'新建元数据模型':'类似创建元数据模型'}}</h3>
        <el-form :model="tmpMetadata" label-suffix="：" ref="form" label-width="150px" v-loading="dataLoading" class="metadata-add-form">
          <el-form-item label="元数据模型名称" prop="name"  :verify="['NotNull']">
            <el-input v-model="tmpMetadata.name" @change="setAlias"></el-input>
            <span class="text-hint">富有意义的可读的名称</span>
          </el-form-item>
          <el-form-item label="代码" prop="code" :verify="['NotNull','Regex=^[\\w\\.]{0,38}$|请输入字母、数字、下划线、点且长度不超过38个字符']">
            <el-input v-model="tmpMetadata.code"></el-input>
            <span class="text-hint">程序逻辑中将使用此代码存取元数据</span>
          </el-form-item>
          <el-form-item label="类型" prop="ownerType" :verify="['NotNull']">
            <el-select v-model="tmpMetadata.ownerType" placeholder="请选择类型" style="width:auto">
              <el-option v-for="metadataType in metadataTypes" :key="metadataType.ID" :label="metadataType.name" :value="metadataType.ID">
              </el-option>
            </el-select>
            <span class="text-hint">系统元数据只支持机构(代码=branch)和用户(代码=user)</span>
          </el-form-item>
          <el-form-item label="备注">
            <el-input v-model="tmpMetadata.memo" type="textarea"  :rows="3" placeholder="请输入备注"></el-input>
            <span class="text-hint">关于此模型的其他说明信息</span>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>
<script>
import util from '@src/common/util.js'
export default {
  props: {
    modelId: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      metadataTypes: [],
      dataLoading: false,
      tmpMetadata: {
        name: '',
        code: '',
        ownerType: '',
        memo: ''
      } //  form表单数据
    }
  },
  mounted() {
    this.loadData()
    this.loadMetadataTypes()
  },
  methods: {
    setAlias() {
      if (this.tmpMetadata.code.trim()) {
        return
      }
      this.tmpMetadata.code = window.util.getSpell(
        this.tmpMetadata.name,
        true
      )
    },
    // 弹框打开前回调
    async loadData() {
      this.tmpMetadata = {
        name: '',
        code: '',
        ownerType: '',
        memo: '',
        ownerID: '0'
      }
      if (this.modelId !== 'new') {
        this.dataLoading = true
        let res
        try {
          res = await axios.get(`/ui/metamodels/${this.modelId}`)
        } catch (e) {
          this.dataLoading = false
          return
        }
        this.dataLoading = false
        this.tmpMetadata = res.data.data
      }
    },
    // 加载元数据类型
    async loadMetadataTypes() {
      let res = await axios.get('/ui/metamodels/types')
      this.metadataTypes = res.data.data
    },
    async confirmClickHandler() {
      try {
        await util.validateForm(this.$refs['form'])
        let res = await axios.post('/ui/metamodels', this.tmpMetadata)
        util.showResponseMessage(res.data)
        if (res.data.status === 1) {
          this.$router.back()
        }
      } catch (e) {
        util.showErrorMessageBox(e)
      }
    }
  }
}
</script>
<style>
.detail-form .is-required {
  display: block !important;
}
.metadata-add-form{
  margin-top: 20px;
}
.metadata-add-form .el-form-item .el-input {
  width: 330px;
  margin-right: 5px;
}
.metadata-add-form .el-form-item .el-textarea {
  width: 330px;
  margin-right: 5px;
}
.metadata-add-form .el-form-item .text-hint {
  color: gray;
  font-size: 12px;
  float: right;
  text-align: left;
  font-style: italic;
  width: 400px;
}
</style>
