<template>
  <div class="layout-no-cols">
    <el-toolbar>
      <el-button @click="goBack" type="primary" size="medium" round class="shadow-primary"><i class="fa fa-chevron-left"></i> 返回上页</el-button>
      <span class="button-separator"></span>
      <el-button type="button" class="el-button el-button--default save" :priv="modelId==='new' ? 'ContentCore.ExtendModelMenu.Add':'ContentCore.ExtendModelMenu.Save'" :loading="confirmLoading" @click="confirm"><span><i class="fa fa-save"></i>保存</span></el-button>
    </el-toolbar>
    <div>
      <div class="detail-panel">
        <h4 style="margin-bottom:20px;font-weight: bold;">{{modelId=='new'?'新建扩展模型':'类似创建扩展模型'}}</h4>
        <el-form :model="tmpExtendModel" :rules="rules" ref="form" label-width="110px" label-suffix="：">
          <el-form-item label="扩展模型名称" prop="name">
            <el-input v-model="tmpExtendModel.name" style="width:300px" @change="setAlias()"></el-input>
            <span class="text-hint">富有意义的可读的名称</span>
          </el-form-item>
          <el-form-item label="代码" prop="code">
            <el-input v-model="tmpExtendModel.code" style="width:300px"></el-input>
            <span class="text-hint">程序逻辑中将使用此代码存取元数据</span>
          </el-form-item>
          <el-form-item label="类型" prop="ownerType">
            <el-select v-model="tmpExtendModel.ownerType" placeholder="请选择类型" style="width:auto">
              <el-option v-for="type in types" :key="type.ID" :label="type.name" :value="type.ID">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="备注" prop="memo">
            <el-input v-model="tmpExtendModel.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,
      requried: true
    }
  },
  data() {
    let memoLengthEXCheck = (rule, value, callback) => {
      let lengthEx = util.getLengthEx(value, true)
      if (lengthEx > 400) {
        callback(new Error('备注必须小于等于133个汉字或者400个字母'))
      } else {
        callback()
      }
    }
    let nameLengthEXCheck = (rule, value, callback) => {
      let lengthEx = util.getLengthEx(value, true)
      if (lengthEx > 180) {
        callback(new Error('备注必须小于等于60个汉字或者180个字母'))
      } else {
        callback()
      }
    }
    return {
      data: {},
      types: [],
      confirmLoading: false,
      tmpExtendModel: {name: '', code: '', ownerType: '', memo: ''}, //  form表单数据
      rules: {
        // 表单验证规则
        name: [
          { required: true, message: '请输入名称', trigger: 'blur' },
          { validator: nameLengthEXCheck, trigger: 'blur' }
        ],
        ownerType: [
          {
            trigger: 'change',
            required: true,
            validator: (rule, value, callback) => {
              if (value) {
                callback()
              } else {
                callback(new Error('请选择类型'))
              }
            }
          }
        ],
        code: [
          { required: true, message: '请输入代码', trigger: 'blur' },
          {
            pattern: /^[\w.-_$]{0,38}$/,
            message: '请输入字母、数字、下划线、点且长度不超过38个字符',
            trigger: 'blur,change'
          }
        ],
        memo: [
          { validator: memoLengthEXCheck, trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    this.initData()
    this.loadTypes()
  },
  methods: {
    setAlias() {
      if (this.tmpExtendModel.code.trim()) {
        return
      }
      this.tmpExtendModel.code = window.util.getSpell(
        this.tmpExtendModel.name,
        true
      )
    },
    async initData() {
      if (this.modelId === 'new') {
        // 类似创建
        this.tmpExtendModel = { name: '', code: '', ownerType: '', memo: '' }
      } else {
        let res = await axios.get(`/ui/contentextends/${this.modelId}`)
        if (res.data.status !== 1) {
          util.showResponseMessage(res.data)
        } else {
          this.tmpExtendModel = res.data.data
        }
      }
    },
    async confirm() {
      this.confirmLoading = true
      try {
        await util.validateForm(this.$refs['form'])
        if (this.modelId !== 'new') {
          this.tmpExtendModel.copyID = this.modelId
        }
        let res = await axios.post('/ui/contentextends', this.tmpExtendModel)
        this.confirmLoading = false
        util.showResponseMessage(res.data)
        if (res.data.status === 1) {
          this.goBack()
        }
      } catch (e) {
        this.confirmLoading = false
        util.showErrorMessageBox(e)
      }
    },

    async loadTypes() {
      let resp = await axios.get('/ui/metamodels/types', {param: {extend: 'Y'}})
      if (resp.data.status !== 1) {
        util.showResponseMessage(resp.data)
        return
      }
      this.types = resp.data.data
    },

    goBack() {
      this.$router.back()
    }
  }
}
</script>

<style>
</style>
