<template>
  <div class="layout-row-intab right-detail-toolbar">
    <div>
      <el-toolbar>
        <el-button icon="fa-floppy-o" @click="saveExtendModel" priv="ContentCore.ExtendModelMenu.Save" v-loading="saveLoading" :disabled="!modelId">
          <i class="fa fa-floppy-o"></i>保存
        </el-button>
        <el-button @click="preview">
          <i class="fa fa-search"></i>预览
        </el-button>
      </el-toolbar>
      <div class="panel-fieldset">
        <el-row>
          <span class="f16 bold">基本信息</span>
        </el-row>
        <div class="padding-top-bottom">
          <el-form :model="tmpExtendModel" :rules="rules" ref="form">
            <el-row type="flex" justify="center" :gutter="20">
              <el-col :span="12">
                <el-form-item label="" prop="name">
                  <el-input v-model="tmpExtendModel.name" :disabled="!modelId">
                    <template slot="prepend">扩展模型名称</template>
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item  label="" prop="code" :verify="['NotNull','Length<38','Regex=^[a-zA-Z0-9_\.\-\/]+$']">
                  <el-input v-model="tmpExtendModel.code" :disabled="!modelId">
                    <template slot="prepend">代码</template>
                  </el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row type="flex" justify="center" :gutter="20">
              <el-col :span="12">
                <el-form-item prop="memo">
                  <el-input v-model="tmpExtendModel.memo" :disabled="!modelId" placeholder="请输入备注">
                    <template slot="prepend">备注</template>
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="">
                  <el-input :disabled="true" value="  类型" class="input-with-select tac">
                    <el-select slot="append" :disabled="true" v-model="tmpExtendModel.ownerType" style="width:320px" placeholder="请选择类型" >
                      <el-option v-for="type in types" :key="type.ID" :label="type.name" :value="type.ID">
                      </el-option>
                    </el-select>
                  </el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row type="flex" justify="center" :gutter="20">
              <el-col :span="12">
                <el-form-item>
                  <el-input v-model="tmpExtendModel.ownerID" :disabled="true">
                    <template slot="prepend">所属ID</template>
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item>
                  <el-input v-model="tmpExtendModel.targetTable" :disabled="true">
                    <template slot="prepend">物理表名</template>
                  </el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
      </div>
      <!-- 字段分组页 -->
      <el-toolbar>
        <el-button :disabled="!modelId" priv="ContentCore.ExtendModelMenu.Save" @click="addFieldGroup">
          <i class="fa fa-plus"></i>添加字段分组</el-button>
      </el-toolbar>
      <div class="panel-fieldset">
        <div class="padding-top-bottom" v-loading="dataLoading">
          <el-table :data="tmpExtendModel.modelSchema">
            <el-table-column label="名称">
              <template slot-scope="scope">
                <el-button priv="ContentCore.ExtendModelMenu.Save" type="text" class="table-title-button" :title="scope.row.name" @click.stop="editFieldGroup(scope.row)">{{scope.row.name}}
                </el-button>
              </template>
            </el-table-column>
            <el-table-column prop="code" label="代码"></el-table-column>
            <el-table-column label="操作" width="100" align="right">
              <template slot-scope="scope">
                <el-button @click.stop="editFieldGroup(scope.row)" type="text" priv="ContentCore.ExtendModelMenu.Save" title="修改字段分组">
                  <i class="fa fa-edit f16" aria-hidden="true"></i></el-button>
                <el-button @click.stop="deleteFieldGroup(scope.row)" type="text" priv="ContentCore.ExtendModelMenu.Save" title="删除字段分组">
                  <i class="fa fa-times f16" aria-hidden="true"></i></el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import util from '@src/common/util.js'
export default {
  props: {
    modelId: {
      type: String,
      required: true
    },
    tabName: {
      type: String,
      required: 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 {
      dataLoading: false,
      saveLoading: false,
      tmpExtendModel: {}, // form表单临时变量
      types: [],
      rules: {
        // 表单验证规则
        name: [
          { required: true, message: '请输入名称', trigger: 'blur' },
          { validator: nameLengthEXCheck, trigger: 'blur' }
        ],
        memo: [
          { validator: memoLengthEXCheck, trigger: 'blur' }
        ]
      }
    }
  },

  created() {
    this.loadExtendModelTypes()
    this.loadExtendModel()
  },

  methods: {
    preview() {
      if (this.tmpExtendModel.code) {
        window.open(`extendModelPreview.html?code=${this.tmpExtendModel.code}`)
      }
    },
    async loadExtendModel() {
      let resp = await axios.get(`/ui/contentextends/${this.modelId}`)
      if (resp.data.status !== 1) {
        util.showResponseMessage(resp.data)
        return
      }
      this.tmpExtendModel = Object.assign({}, resp.data.data)
    },
    async loadExtendModelTypes() {
      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
    },
    addFieldGroup() {
      this.$router.push({path: `/settings/extendModel/${this.modelId}/columnGroup/new`})
    },

    editFieldGroup(row) {
      this.$router.push({path: `/settings/extendModel/${this.modelId}/columnGroup/${row.code}`})
    },

    async deleteFieldGroup(row) {
      let id = row.code
      if (!id) {
        return
      }
      try {
        await this.$confirm('确定删除吗，删除后无法恢复。是否继续删除？', '删除确认', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
        let resp = await axios.delete(`/ui/contentextends/${this.modelId}/groups/${id}`)
        util.showResponseMessage(resp.data)
        if (resp.data.status === 1) {
          this.loadExtendModel()
        }
      } catch (e) {

      }
    },

    async saveExtendModel() {
      if (!this.modelId) {
        return
      }
      try {
        this.saveLoading = true
        await util.validateForm(this.$refs['form'])
        let resp = await axios.put(`/ui/contentextends/${this.modelId}`, this.tmpExtendModel)
        this.saveLoading = false
        util.showResponseMessage(resp.data)
        if (resp.data.status === 1) {
          this.$emit('callback')
        }
      } catch (e) {
        this.saveLoading = false
        util.showErrorMessageBox(e)
      }
    }
  }
}
</script>
<style scoped>
  .layout-row-intab{
    flex-direction: column;
  }
  .pane-up-wrap .info-form-wrap {
    padding: 15px;
  }
  .bold{
    font-weight: bold;
  }
</style>
<style>
  .el-table__header,.el-table__body{
    width: 100%!important;
  }
</style>
