<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="ContentCore.ExtendModelMenu.Save" :loading="confirmLoading" @click="confirm"><span><i class="fa fa-save"></i>保存</span></el-button>
    </el-toolbar>
      <!-- 链接分组表单 -->
    <div class="">
      <div class="detail-panel extend-model-column-group-form">
        <el-form :model="tmpColumnGroup" ref="form" :rules="rules" label-suffix="：" label-width="80px" v-loading="dataLoading">
          <el-form-item label="名称" prop="name">
            <el-input v-model="tmpColumnGroup.name" @change="setAlias"></el-input>
          </el-form-item>
          <el-form-item label="代码" prop="code">
            <el-input v-model="tmpColumnGroup.code"></el-input>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>
<script>
import util from '@src/common/util.js'
export default {
  props: {
    modelId: [String, Number],
    code: String
  },

  data() {
    let nameLengthEXCheck = (rule, value, callback) => {
      let lengthEx = util.getLengthEx(value, true)
      if (lengthEx > 180) {
        callback(new Error('备注必须小于等于60个汉字或者180个字母'))
      } else {
        callback()
      }
    }
    return {
      confirmLoading: false,
      tmpColumnGroup: {name: '', code: ''}, // form临时数据存储
      dataLoading: false,
      rules: {
        // 表单验证规则
        name: [
          { required: true, message: '请输入名称', trigger: 'blur' },
          { validator: nameLengthEXCheck, trigger: 'blur' }
        ],
        code: [
          { required: true, message: '请输入代码', trigger: 'blur' },
          {
            pattern: /^[.-_$\w]{0,38}$/,
            message: '请输入字母、数字、下划线、点且长度不超过38个字符',
            trigger: 'blur,change'
          }
        ]
      }
    }
  },

  created() {
    this.initData()
  },

  methods: {
    setAlias() {
      if (this.tmpColumnGroup.code.trim()) {
        return
      }
      this.tmpColumnGroup.code = window.util.getSpell(
        this.tmpColumnGroup.name,
        true
      )
    },
    async confirm() {
      this.confirmLoading = true
      try {
        await util.validateForm(this.$refs['form'])
        let res = ''
        if (this.isEdit()) {
          res = await axios.put(`/ui/contentextends/${this.modelId}/groups/${this.code}`, this.tmpColumnGroup)
        } else {
          res = await axios.post(`/ui/contentextends/${this.modelId}/groups`, this.tmpColumnGroup)
        }
        this.confirmLoading = false
        util.showResponseMessage(res.data)
        if (res.data.status === 1) {
          this.goBack()
        }
      } catch (e) {
        this.confirmLoading = false
        util.showErrorMessageBox(e)
      }
    },

    initData() {
      if (this.isEdit()) {
        this.loadFieldGroup()
      } else {
        this.tmpColumnGroup = { name: '', code: '' }
      }
    },

    async loadFieldGroup() {
      this.dataLoading = true
      let resp = await axios.get(`/ui/contentextends/${this.modelId}/groups/${this.code}`)
      if (resp.data.status !== 1) {
        util.showResponseMessage(resp.data)
        return
      }
      this.tmpColumnGroup = resp.data.data
      this.dataLoading = false
    },

    isEdit() {
      return this.code && this.code !== 'new'
    },

    goBack() {
      this.$router.back()
    }
  }
}
</script>
<style>
  .extend-model-column-group-form .form-item {
    width: 80%;
  }
</style>
