<router lang="yaml">
  name: metadataQuery
  </router>

<script lang="ts" setup name="metadataQuery">
import { ref } from 'vue'
import { ElMessage, ElMessageBox } from "element-plus";
import Tree from '@/components/Tree/index.vue'
import Table from '@/components/Table/index.vue'
import { changeNum } from '@/utils/common'
import { useRouter ,useRoute} from "vue-router";
import {
  getMetaTreeData,
  getMetaDatabaseCollect,
  getMetaDataBase,
  getMetaDataSheet,
} from '@/api/modules/dataMetaService';
import { TableColumnWidth } from '@/utils/enum';

const { proxy } = getCurrentInstance() as any;

const router = useRouter();
const route = useRoute()
let dataSourceGuid = route.query.dataSourceGuid
let datasourceName = route.query.datasourceName 
const currNodeInfo: any = ref({})
const expandedKey: any = ref([])
const currentNodeKey = ref('')
const treeData: any = ref([])
const databaseCount = ref(0) //数据库总数
const treeInfo = ref({
  id: "data-pickup-tree",
  filter: true,
  queryValue: "",
  queryPlaceholder: "输入库/表名称搜索",
  props: {
    label: "name",
    value: "guid",
  },
  nodeKey: 'guid',
  expandedKey: [],
  currentNodeKey: '',
  expandOnNodeClick: false,
  data: [],
  loading: false
});

const cardMap = ref({
  source: {
    id: 'database-table',
    count: [
     {
        label: '总表数',
        field: 'tableCount',
        value: 0,
        type: 'chnum',
        unit: '个',
        icon: new URL('@/assets/images/icon2.png', import.meta.url).href
      }, {
        label: '存储量(约)',
        field: 'storageCapacities',
        value: 0.00,
        type: 'chnum',
        fixedNum: 2,
        unit: 'GB',
        icon: new URL('@/assets/images/icon3.png', import.meta.url).href
      }, {
        label: '总字段数',
        field: 'columns',
        value: 0,
        type: 'chnum',
        unit: '个',
        icon: new URL('@/assets/images/icon4.png', import.meta.url).href
      }, {
        label: '总行数(约)',
        field: 'tableRows',
        value: 0,
        type: 'chnum',
        unit: '行',
        icon: new URL('@/assets/images/icon5.png', import.meta.url).href
      },
      {
        label: '数据总量',
        field: 'dataCount',
        value: 0,
        type: 'chnum',
        unit: '万个',
        icon: new URL('@/assets/images/dataCount.png', import.meta.url).href
      }
    ],
    fields: [
      { label: "序号", type: "index", width: TableColumnWidth.INDEX, align: "center", fixed: "left" },
      { label: "数据库名称", field: "databaseNameZh", width: 160 },
      { label: "数据库名", field: "databaseName", width: 160 },
      // { label: "存储索引", field: "operator", width: 120 },
      { label: "总表数", field: "tableCount", type: 'chnum', width: 100, align: 'right' },
      { label: "存储量(约)(MB)", field: "storageCapacities", type: 'chnum', fixedNum: 2, width: 140, align: 'right' },
      { label: "总字段数", field: "columns", type: 'chnum', width: 100, align: 'right' },
      { label: "总行数(约)", field: "tableRows", type: 'chnum', width: 100, align: 'right' },
      { label: "数据采集时间", field: "collectTime", width: TableColumnWidth.DATETIME },
    ]
  },
  database: {
    id: 'datasheet-table',
    count: [
      {
        label: '总表数',
        field: 'tableCount',
        value: 0,
        type: 'chnum',
        unit: '个',
        icon: new URL('@/assets/images/icon2.png', import.meta.url).href
      }, {
        label: '存储量(约)',
        field: 'storageCapacities',
        value: 0.00,
        type: 'chnum',
        fixedNum: 2,
        unit: 'GB',
        icon: new URL('@/assets/images/icon3.png', import.meta.url).href
      }, {
        label: '总字段数',
        field: 'columns',
        value: 0,
        type: 'chnum',
        unit: '个',
        icon: new URL('@/assets/images/icon4.png', import.meta.url).href
      }, {
        label: '总行数(约)',
        field: 'tableRows',
        value: 0,
        type: 'chnum',
        unit: '行',
        icon: new URL('@/assets/images/icon5.png', import.meta.url).href
      },
      {
        label: '数据总量',
        field: 'dataCount',
        value: 0,
        type: 'chnum',
        unit: '万个',
        icon: new URL('@/assets/images/dataCount.png', import.meta.url).href
      }
    ],
    fields: [
      { label: "序号", type: "index", width: TableColumnWidth.INDEX, align: "center", fixed: "left" },
      { label: "表中文名称", field: "tableChName", width: 140 },
      { label: "表英文名称", field: "tableName", width: TableColumnWidth.TABLENAME },
      { label: "存储量(约)(MB)", field: "storageCapacities", type: 'chnum', fixedNum: 2, width: 140, align: 'right' },
      { label: "总字段数", field: "columns", type: 'chnum', width: 120, align: 'right' },
      { label: "总行数(约)", field: "tableRows", type: 'chnum', width: 120, align: 'right' },
      { label: "索引数", field: "indexes", type: 'chnum', width: 120, align: 'right' },
      { label: "是否分区表", field: "isPartition", type: 'filter', width: 120 },
      { label: "表创建时间", field: "createTime", width: TableColumnWidth.DATETIME },
      { label: "数据采集时间", field: "collectTime", width: TableColumnWidth.DATETIME },
    ]
  },
})

const cardLoading = ref(false)
const cardList: any = ref([])
const treeActive = ref('source')

const currentTitle = ref("数据库总览")
const currTableData: any = ref<Object>({});
const page = ref({
  limit: 50,
  curr: 1,
  sizes: [
    { label: "10", value: 10 },
    { label: "50", value: 50 },
    { label: "100", value: 100 },
    { label: "150", value: 150 },
    { label: "200", value: 200 },
  ],
});
const selectRowData = ref([])
const tableFields: any = ref([])
const tableData: any = ref([])
const tableInfo: any = ref({
  id: 'data-table',
  fields: cardMap.value[treeActive.value].fields,
  data: [],
  page: {
    type: "normal",
    rows: 0,
    ...page.value,
  },
  actionInfo: {
    label: "操作",
    type: "btn",
    width: 60,
    fixed: 'right',
    btns: [
      { label: "详情", value: "detail" },
    ],
  },
  loading: false
})

const getTreeData = () => {
  treeInfo.value.loading = true
  let params = {}
  getMetaTreeData(params).then((res: any) => {
    treeInfo.value.loading = false
    if (res.code == proxy.$passCode) {
      const data = res.data || [];
      const treeList = Object.keys(data).length ? [data] : [];
      treeData.value = treeList;
      if (treeList.length) {
        expandedKey.value = expandedKey.value.length == 0 ? [treeList[0].guid] : expandedKey.value
        currentNodeKey.value = currentNodeKey.value == '' ? treeList[0].guid : currentNodeKey.value
        currNodeInfo.value = treeList[0];
      }
      treeInfo.value.data = treeData.value
      nextTick(() => {
        treeInfo.value.currentNodeKey = currentNodeKey.value
        treeInfo.value.expandedKey = expandedKey.value
      })
      getFirstPageData()
      getDatabaseCount({ databaseGuid: currentNodeKey.value  === "0" ? "" : currentNodeKey.value })
    } else {
      ElMessage.error(res.msg);
    }
  }).catch(() => {
    treeInfo.value.loading = false
  })
}

const getDatabaseCount = (params) => {
  cardLoading.value = true
  getMetaDatabaseCollect(params).then((res: any) => {
    if (res.code == proxy.$passCode) {
      const data = res.data || {}
      databaseCount.value = data.databaseCount
      cardMap.value[treeActive.value].count.map(item => {
        item.value = data[item.field]
      })
      cardList.value = cardMap.value[treeActive.value].count
    } else {
      ElMessage.error(res.msg);
    }
    cardLoading.value = false
  }).catch(() => {
    cardLoading.value = false
  })
}

const getFirstPageData = () => {
  page.value.curr = 1
  toSearch({})
}

const toSearch = (val: any, clear: boolean = false) => {
  let params: any = Object.keys(val).length ? { ...val } : {}
  params.pageIndex = page.value.curr;
  params.pageSize = page.value.limit;
  if (treeActive.value == 'database') {
    params.databaseGuid = currNodeInfo.value.guid
  }
  getTableData(params);
};

const getTableData = (params) => {
  let method: any = null
  tableInfo.value.loading = true
  if (treeActive.value == 'source') {
    method = getMetaDataBase(params)
  } else {
    method = getMetaDataSheet(params)
  }
  method.then((res: any) => {
    if (res.code == proxy.$passCode) {
      const data = res.data || {}
      tableData.value = data.records || []
      tableFields.value = cardMap.value[treeActive.value].fields
      tableInfo.value.id = cardMap.value[treeActive.value].id
      tableInfo.value.fields = tableFields.value
      tableInfo.value.data = tableData.value
      tableInfo.value.page.limit = data.pageSize
      tableInfo.value.page.curr = data.pageIndex
      tableInfo.value.page.rows = data.totalRows
    } else {
      ElMessage({
        type: 'error',
        message: res.msg,
      })
    }
    tableInfo.value.loading = false
  }).catch(xhr => {
    tableInfo.value.loading = false
  })
};

const tableSelectionChange = (val) => {
  selectRowData.value = val.map((item) => item.guid);
};

const tablePageChange = (info) => {
  page.value.curr = Number(info.curr);
  page.value.limit = Number(info.limit);
  toSearch({});
};

const tableBtnClick = (scope, btn) => {
  const type = btn.value;
  const row = scope.row;
  currTableData.value = row;
  if (type == "detail") {
    
    if (treeActive.value == 'source') {
      let params: any = {}
      currentTitle.value = row.databaseNameZh
      params.databaseGuid = row.databaseGuid 
      currNodeInfo.value.guid = row.databaseGuid 
      getDatabaseCount(params)
      treeActive.value = 'database'
      getFirstPageData();
      currentNodeKey.value = row.databaseGuid;
      expandedKey.value = [row.databaseGuid]
      nextTick(() => {
        treeInfo.value.currentNodeKey = currentNodeKey.value;
        treeInfo.value.expandedKey = expandedKey.value;
      })
    } else {
      treeInfo.value.currentNodeKey = row.guid;
      router.push({
        path: '/data-meta/metadata-query/meta-sheet',
        query: {
          id: row.guid,
          name: row.tableChName || row.tableName
        }
      })
    }
  }
};

const filterValue = (row,num=1) => {
  let val: any = null
  if (row.type == 'chnum') {
    val = changeNum(row.value ? row.value/num : 0, row.fixedNum ?? 0)
  }
  return val
}

const nodeClick = (data) => {
  if (data.type == 1 || data.type == 2) {
    currNodeInfo.value = data;
    currentTitle.value = data.name
    treeActive.value = data.type == 1 ? 'source' : 'database'
    let params: any = {}
    if (treeActive.value == 'source') {
      params.dataSourceGuid = data.guid === "0" ? "" : data.guid
    } else {
      params.databaseGuid = data.guid
    }
    getDatabaseCount(params)
    getFirstPageData()
  } else {
    router.push({
      path: '/data-meta/metadata-query/meta-sheet',
      query: {
        id: data.guid,
        name: data.name
      }
    })
  }
}
const getQueryTreeData = ()=>{
  treeInfo.value.loading = true
  let params = {}
  getMetaTreeData(params).then((res: any) => {
    treeInfo.value.loading = false
    if (res.code == proxy.$passCode) {
      const data = res.data || [];
      const treeList = Object.keys(data).length ? [data] : [];
      treeData.value = treeList;
      treeInfo.value.data = treeData.value
      if (treeList.length) {
        expandedKey.value = [dataSourceGuid]
        currentNodeKey.value = dataSourceGuid as string
        currNodeInfo.value = {type:2,guid:dataSourceGuid,name:datasourceName}
      }
      nextTick(() => {
        treeInfo.value.currentNodeKey = currentNodeKey.value
        treeInfo.value.expandedKey = expandedKey.value
      })
      nodeClick({type:2,guid:dataSourceGuid,name:datasourceName}) 
      dataSourceGuid = ""
  } 
  }).catch(()=>{
    treeInfo.value.loading = false
  })
}
onBeforeMount(() => {
  cardList.value = cardMap.value[treeActive.value].count;
  if(dataSourceGuid){
    getQueryTreeData()
  } else {
    getTreeData()
  }
  
})

</script>

<template>
  <div class="container_wrap full flex">
    <div class="aside_wrap">
      <div class="aside_title" >数据库目录列表</div>
      <Tree :treeInfo="treeInfo" @nodeClick="nodeClick" />
    </div>
    <div class="pane-trigger-con"></div>
    <div class="main_wrap">
      <div class="table_tool_wrap">
        <div class="aside_title" style="padding: 0;">
          <template v-if="currentTitle !=='数据库总览'">
            <span>数据库：</span>{{ currentTitle }}
          </template>
          <template v-else>
           {{ currentTitle }} <span >({{ databaseCount }})</span>
          </template>
        </div>
        <div class="card_panel">
          <div class="img_tags_card" v-for="item in cardList" :key="item.label">
            <img :src="item.icon" alt="">
            <div class="tags_item">
              <p class="tag_text">{{ item.label }}</p>
              <template v-if="item.field==='dataCount'">
                <el-tooltip
                    placement="top-start"
                    trigger="hover"
                    effect="light"
                    :show-after="400"
                    :content="filterValue(item)+'个'"
                  >
                      <p class="tag_num"><span>{{ filterValue(item,10000)}}</span><span class="unit">{{ ' ' + item.unit }}</span></p>
                  </el-tooltip>
               
              </template>
              <template v-else>
                <p class="tag_num"><span>{{ filterValue(item) }}</span><span class="unit">{{ ' ' + item.unit }}</span></p>
              </template>

            </div>
          </div>
        </div>
      </div>
      <div class="table_panel_wrap full">
        <Table :tableInfo="tableInfo" @tableBtnClick="tableBtnClick" @tableSelectionChange="tableSelectionChange"
          @tablePageChange="tablePageChange" />
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.container_wrap {
  .aside_wrap {
    width: 200px;
  }

  .main_wrap .table_tool_wrap {
    height: auto;

    .card_panel {
      height: 48px;
     // padding: 24px 0;
     margin-bottom: 20px;
     padding-top:10px ;
      display: flex;
      // justify-content: space-between;
      align-items: center;

      .img_tags_card {
        width: 208px;
        display: flex;
        align-items: center;

        img {
          width: 48px;
          height: 48px;
        }

        .tags_item {
          height: 50px;
          margin-left: 12px;
          display: flex;
          flex-direction: column;
          justify-content: space-between;

          p {
            font-size: 14px;
            color: var(--el-text-color-regular);
            margin: 0;
            line-height: 21px;

            &.tag_num {
              color: var(--el-color-regular);
              font-size: 16px;
              font-weight: 600;
              line-height: 24px;

              .unit {
                font-size: 14px;
              }
            }
          }
        }
      }
    }
  }

  .table_panel_wrap.full {
    height: calc(100% - 104px);
  }

}

.tree_panel {
  height: calc(100% - 36px);
  padding-top: 0;

  :deep(.el-tree) {
    margin: 0;
    overflow: hidden auto;
  }
}
.aside_title {
  padding: 0 8px;
  font-size: 14px;
  color: var(--el-color-regular);
  height: 36px;
  line-height: 36px;
  font-weight: 600;
}
</style>