<template>
  <div class="height100 metadatamgr">
    <div class="obpm-title">
      <div class="d-inline-block">
        <i class="el-icon-folder title-icon"></i>
        <div class="title-name d-inline-block ml-2">{{$t('meta.title')}}</div>
      </div>
      
    </div>
    <el-row :style="{ height: treeHeight + 'px' }" >
      <el-col :span="6" class="height100">
        <el-scrollbar class="height100 menuTree" :native="false">
          <el-tree
            ref="tree"
            node-key="id"
            :props='defaultProps'
            :load="loadNode"
            :expand-on-click-node="false"
            :default-expanded-keys="defaultExpandedKeys"
            lazy
            :check-strictly="true"
            @node-click="renderCon"
          ></el-tree>
        </el-scrollbar>
      </el-col>
      <el-col :span="18" class="height100 borderR" v-if="detailVisible == 1">
        <DataSource :editDataSourceId='editDataSourceId' :showExitBtn="false" :showIndManBtn="true" :tableHeight="tableHeight" ref="dataSource"/>
      </el-col>
      <el-col :span="18" class="height100 borderR" v-if="detailVisible == 2">
        <el-scrollbar class="height100" :native="false">
          <el-form :nodel='detail' label-width='80px' label-position='left' size='mini'>
            <el-row  :gutter="20">
              <el-col :span="8">
                <el-form-item :label="$t('label.index')" class="padding0Label">
                  <span>{{detail._table}}</span>
                </el-form-item>
              </el-col>
              <el-col :span="8" :offset="4">
                <el-form-item :label="$t('view.type')" class="padding0Label">
                  <span>{{$t('label.define_form')}}</span>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row  :gutter="20">
              <el-col :span="8">
                <el-form-item :label="$t('label.corresponding_form')" class="padding0Label">
                  <span>{{detail.form.name}}</span>
                </el-form-item>
              </el-col>
              <el-col :span="8" :offset="4">
                <el-form-item :label="$t('label.description')" class="padding0Label">
                  <span>{{detail.description}}</span>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row  :gutter="20" type="flex" justify="space-between">
              <el-col :span="6">
                <span>{{$t('label.field_info')}}</span>
              </el-col>
              <el-col :span="6">
                <el-button type="primary" plain @click='synFormTable' size='small'>{{$t('label.same_form')}}</el-button>
              </el-col>
            </el-row>
            <el-row>
              <el-table
                ref="multipleTable"
                :data="detail._columnMetadatas.datas"
                style="width: 100%"
                size='small'
                >
                <el-table-column
                  prop="column"
                  :label="$t('form.field_name')"
                  >
                </el-table-column>
                <el-table-column
                  prop="field"
                  :label="$t('label.corresponding')"
                  >
                </el-table-column>
                <el-table-column
                  prop="fieldType"
                  :label="$t('label.filed_type')"
                  >
                </el-table-column>
                <el-table-column
                  prop="type"
                  :label="$t('view.type')"
                  >
                </el-table-column>
                <el-table-column
                  prop="des"
                  :label="$t('label.description')"
                  >
                </el-table-column>
              </el-table>
            </el-row>
          </el-form>
        </el-scrollbar>

      </el-col>
    </el-row>
  </div>
</template>
<script>
import { getMetadataList,getTable,synFormTable} from "@/service/AdvancedToolAPI.js";
import DataSource from "@/components/AdvancedTool/DataSource.vue";
export default {
  name: "metadataMgr",
  data() {
    return {
      params:{
        datasourceId:'',
        subNodes:'',
        formId:'',
      },
      node:null,
      first:true,
      resolve:null,
      defaultExpandedKeys: [],
      defaultProps:{
        label:function(data){
          return data.attr.name;
        },
        isLeaf:function(data){
          if(data.attr){
            if(data.attr.subNodes=='isTables')
            return false;
            else return true;
          }
          return false
          
        },
      },
      treeHeight:0,
      detail:{},
      editDataSourceId: '',
      tableHeight: ((document.documentElement.clientHeight || document.body.clientHeight) - 60 - 32 - 41 - 40 - 50 - 50) + 'px',
      detailVisible: 0, // 0：什么都不显示  1：显示数据源   2：显示叶子中的内容 
    }
  },
  created(){
    
  },
  mounted() {
    let clientHeight = document.documentElement.clientHeight || document.body.clientHeight;
    //60 头部， 32 面包屑， 41 第一层页签， 40 第二层页签， 50 列表标题， 
    this.treeHeight = clientHeight - 60 - 32 - 41 - 40 - 50 - 20;
  },
  methods: {
    //同步表单字段
    async synFormTable(){
      let appId=sessionStorage.getItem("appId");
      const resp = await synFormTable(this.params,appId);
      if (resp.data.errcode==0) {
        this.$message.success(this.$t('msg.sync_ss'));
      } else {
        this.$message.success(this.$t('msg.sync_err'));
      }
    },
    //渲染详情
    async renderCon(row,node){
      if(node.level>1){
        this.params.formId=row.attr.formId;
        let appId=sessionStorage.getItem("appId");
        // 先判断是不是有叶子
        if(node.isLeaf){
          const resp = await getTable(this.params,appId);
          if (resp.data.errcode==0) {
            this.detailVisible=2;
            this.detail=resp.data.data;
          } 
        }else{
          this.editDataSourceId = row.id
          this.detailVisible = 1
          this.$nextTick(() => {
            this.$refs.dataSource.getDataSource()
          })
        }
      }
    },
    async loadNode (node, resolve) {
      let appId=sessionStorage.getItem("appId");
      if (node.level === 0) {
        if (this.first) {
          this.first = false;
          this.node = node;
          this.resolve = resolve;
        }
        this.node.childNodes = [];
        this.defaultExpandedKeys = [];
        let root = [{
          checked: false,
          id: appId,
          attr:{
            'name':this.$t('tabs.datasource'),
            'subNodes':'isTables'
          },
          parentId: "",
          hasChild: false,
        }]
        this.defaultExpandedKeys.push(appId)
        resolve(root);
      }
      if(node.level==1){
        
        const resp = await getMetadataList(this.params,appId);
        if (resp.data.data) {
          resolve(resp.data.data);
        } else {
          resolve([])
        }
      }
      if (node.level > 1) {
        this.params.datasourceId = node.data.attr.id;
        this.params.subNodes=node.data.attr.subNodes;
        const resp = await getMetadataList(this.params,appId);
        if (resp.data.data) {
          resolve(resp.data.data);
        } else {
          resolve([])
        }
      }
    },

  },
  watch: {
  },
  components:{
    DataSource
  }
}
</script>