<template>
  <div class="layout-row-intab right-detail-toolbar" v-loading="dataLoading">
    <div class="pane-up-wrap">
      <el-toolbar>
        <el-button v-loading="saveSubmitLoading" @click="saveMetadataClickHandler" priv="Platform.Metadata.Save"><i class="fa fa-floppy-o"></i>保存</el-button>
      </el-toolbar>
      <div class="detail-panel info-form-wrap metadata-info-form" >
        <h4 class="detail-panel-title">基本信息</h4>
        <el-form :model="currentMetadata" ref="form">
          <el-row  type="flex" class="row-bg" justify="center" :gutter="20">
            <el-col :span="12">
              <el-form-item prop="name" >
                <el-input v-model="currentMetadata.name">
                  <template slot="prepend">元数据模型</template>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item prop="code" >
                <el-input v-model="currentMetadata.code">
                  <template slot="prepend">代码</template>
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row  type="flex" class="row-bg" justify="center" :gutter="20">
            <el-col :span="12">
              <el-form-item label="">
                <el-input v-model="currentMetadata.memo" placeholder="">
                  <template slot="prepend">备注</template>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="">
                <el-select v-model="currentMetadata.ownerType" placeholder="请选择类型" :disabled="true" style="width:100%">
                  <el-option v-for="type in metadataTypes" :key="type.ID" :label="type.name" :value="type.ID"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row  type="flex" class="row-bg" justify="center" :gutter="20">
            <el-col :span="12">
              <el-form-item label="">
                <el-input v-model="currentMetadata.ownerID" :disabled="true">
                  <template slot="prepend">所属ID</template>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="">
                <el-input v-model="currentMetadata.targetTable" :disabled="true">
                  <template slot="prepend">物理表名</template>
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </div>
    <div class="pane-down-wrap">
      <el-toolbar>
        <el-button @click.stop="addGroupClickHandler" type="text" priv="Platform.Metadata.Save" >
          <i class='fa fa-plus'></i>添加字段分组
        </el-button>
      </el-toolbar>
      <el-table :data="currentMetadata.modelSchema" style="width:100%"  tooltip-effect="dark" @selection-change="onGroupSelectionChange">
        <el-table-column type="index" label="序号" width="100" align="center"></el-table-column>
        <el-table-column label="名称">
          <template slot-scope="scope">
            <el-button type="text" class="table-title-button" :title="scope.row.name" priv="Platform.Metadata.Save" @click.stop="editGroupClickHandler(scope.row)">{{scope.row.name}}
            </el-button>
          </template>
        </el-table-column>
        <el-table-column prop="code" label="代码"></el-table-column>
        <el-table-column label="操作" align="right">
          <template slot-scope="scope">
            <el-button @click.stop="editGroupClickHandler(scope.row)" type="text" priv="Platform.Metadata.Save"  title="修改字段分组">
              <i class="fa fa-edit f16"></i>
            </el-button>
            <el-button @click.stop="deleteGroupClickHandler(scope.row)" type="text" priv="Platform.Metadata.Save"  title="删除字段分组">
              <i class='fa fa-remove f18'></i>
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script>
import util from '@src/common/util.js'
export default {
  props: {
    modelId: {
      type: String,
      requried: true
    },
    tabName: {
      type: String,
      requrird: true
    }
  },
  data() {
    return {
      tmpColumnGroup: { name: '', code: '' },
      saveSubmitLoading: false,
      dataLoading: false,
      currentMetadata: {}, //  当前元数据变量
      selectedRows: [], //  分组选中行
      addOrEdit: {
        //  添加或修改弹框
        tmpColumnGroup: {},
        isShowModal: false,
        title: ''
      },
      metadataTypes: []
    }
  },
  mounted() {
    this.loadMetadataTypes()
    this.loadMetadata()
    // this.loadColumnGroup()
  },
  methods: {
    // 加载元数据类型
    async loadMetadataTypes() {
      let res = await axios.get('/ui/metamodels/types')
      this.metadataTypes = res.data.data
    },
    async loadMetadata() {
      this.dataLoading = true
      let res
      try {
        res = await axios.get(`/ui/metamodels/${this.modelId}`)
      } catch (e) {
        this.dataLoading = false
        return
      }
      this.dataLoading = false
      this.currentMetadata = res.data.data
    },
    // 保存元数据信息
    async saveMetadataClickHandler() {
      this.saveSubmitLoading = true
      try {
        await util.validateForm(this.$refs['form'])
        let res = await axios.put(`/ui/metamodels/${this.modelId}`, this.currentMetadata)
        this.saveSubmitLoading = false
        util.showResponseMessage(res.data)
      } catch (e) {
        util.showErrorMessageBox(e)
        this.saveSubmitLoading = false
      }
    },
    // 添加元数据字段分组
    addGroupClickHandler() {
      this.$router.push({path: `${this.$route.path}/new`})
    },
    // 编辑元数据字段分组
    editGroupClickHandler(row) {
      if (!row.code) {
        util.showErrorMessageBox('数据异常，请重新尝试！')
        return
      }
      this.$router.push({path: `${this.$route.path}/${row.code}`})
    },
    // 删除元数据字段分组
    async deleteGroupClickHandler(row) {
      let codes = row && row.code ? [row.code] : util.getSelectedIDs(this.selectedRows)
      if (!codes || !codes.length) {
        return
      }
      try {
        await this.$confirm('确定删除吗，删除后无法恢复。是否继续删除？', '删除确认', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
        let res = await axios.delete(`/ui/metamodels/${this.modelId}/groups/${codes.join()}`)
        util.showResponseMessage(res.data)
        if (res.data.status === 1) {
          this.currentMetadata.modelSchema = this.currentMetadata.modelSchema.filter(val => !codes.join().includes(val.code))
          // TODO: 检查测试上一行的逻辑
          this.selectedRows = []
        }
      } catch (e) {

      }
    },

    onGroupSelectionChange(selection) {
      this.selectedRows = selection
    }
  }
}
</script>
<style scoped>
.layout-row-intab {
  flex-direction: column;
}
.pane-up-wrap .info-form-wrap {
  padding: 15px;
}
.detail-panel-title {
  color: black;
  font-weight: bold;
  padding: 15px;
}
.el-form .is-required,
.el-form .is-required {
  display: block;
}
</style>
<style>
.metadata-info-form .el-form-item .el-input {
  /* width: 50%;
  margin-right: 5px; */
}
.metadata-info-form .el-form-item .el-textarea {
  width: 50%;
  margin-right: 5px;
}
.metadata-info-form .el-form-item .el-select {
  width: 75%;
  margin-right: 5px;
}
</style>
