<!--
    Copyright (c) 2020 Contributors to the Eclipse Foundation

    See the NOTICE file(s) distributed with this work for additional
    information regarding copyright ownership.

    This program and the accompanying materials are made available under the
    terms of the Eclipse Public License 2.0 which is available at
    http://www.eclipse.org/legal/epl-2.0

    SPDX-License-Identifier: EPL-2.0
 -->
<template xmlns:v-contextmenu="http://www.w3.org/1999/xhtml">
  <div style="height: 100%; position: relative">
    <v-contextmenu ref="contextmenu">
      <v-contextmenu-submenu :title="$t('jifa.heap.ref.object.label')">
        <v-contextmenu-item
                @click="$emit('outgoingRefsOfObj', contextMenuTargetObjectId, contextMenuTargetObjectLabel)">
          {{$t('jifa.heap.ref.object.outgoing')}}
        </v-contextmenu-item>
        <v-contextmenu-item
                @click="$emit('incomingRefsOfObj', contextMenuTargetObjectId, contextMenuTargetObjectLabel)">
          {{$t('jifa.heap.ref.object.incoming')}}
        </v-contextmenu-item>
      </v-contextmenu-submenu>
      <v-contextmenu-submenu :title="$t('jifa.heap.ref.type.label')">
        <v-contextmenu-item
                @click="$emit('outgoingRefsOfClass', contextMenuTargetObjectId, contextMenuTargetObjectLabel)">
          {{$t('jifa.heap.ref.type.outgoing')}}
        </v-contextmenu-item>
        <v-contextmenu-item
                @click="$emit('incomingRefsOfClass', contextMenuTargetObjectId, contextMenuTargetObjectLabel)">
          {{$t('jifa.heap.ref.type.incoming')}}
        </v-contextmenu-item>
      </v-contextmenu-submenu>
      <v-contextmenu-item divider></v-contextmenu-item>
      <v-contextmenu-item
              @click="$emit('pathToGCRootsOfObj', contextMenuTargetObjectId, contextMenuTargetObjectLabel)">
        {{$t('jifa.heap.pathToGCRoots')}}
      </v-contextmenu-item>
    </v-contextmenu>

    <div style="height: 45px; margin-top: 5px">
      <el-autocomplete
              v-model="oql"
              :fetch-suggestions="queryHistory"
              placeholder="Object Query Language ..."
              :trigger-on-focus="false"
              prefix-icon="el-icon-edit"
              @keyup.enter.native="search"
              clearable
              style="display: flex"
      >
        <template slot="append">
          <el-button :icon="searching ? 'el-icon-loading':'el-icon-search'" :disabled="searching" @click="search">
          </el-button>
        </template>
      </el-autocomplete>
    </div>

    <div align="left" style="height: 25px; margin-bottom: 5px">
      <a href="https://help.eclipse.org/oxygen/index.jsp?topic=%2Forg.eclipse.mat.ui.help%2Freference%2Foqlsyntax.html&cp=66_4_2"
         target="_blank" style="font-size: 12px; font-weight: bold; color: #909399">
        OQL Help
      </a>
    </div>

    <div v-loading="loading" style="position: absolute; top: 80px; left: 0; right: 0; bottom: 0;">
      <el-table v-if="isTreeResult"
                ref='treeResultTable' :data="treeTableData"
                :highlight-current-row="false"
                stripe
                :header-cell-style="headerCellStyle"
                :cell-style='cellStyle'
                row-key="rowKey"
                lazy
                :indent=8
                height="100%"
                :load="loadOutbounds">
        <el-table-column label="Class Name" width="800px" show-overflow-tooltip>
          <template slot-scope="scope">
            <span v-if="scope.row.isResult" @click="$emit('setSelectedObjectId', scope.row.objectId)"
                  style="cursor: pointer"
                  @contextmenu="contextMenuTargetObjectId = scope.row.objectId; contextMenuTargetObjectLabel = scope.row.label"
                  v-contextmenu:contextmenu>
              <img :src="scope.row.icon" style="margin-right: 5px"/>
              <strong>{{ scope.row.prefix }}</strong>
              {{ scope.row.label }}
              <span style="font-weight: bold; color: #909399">
                {{ scope.row.suffix }}
              </span>
            </span>

            <span v-if="scope.row.isOutboundsSummary">
              <img :src="ICONS.misc.sumIcon" v-if="scope.row.currentSize >= scope.row.totalSize"/>
              <img :src="ICONS.misc.sumPlusIcon"
                   @dblclick="fetchOutbounds(scope.row.parentRowKey, scope.row.objectId, scope.row.nextPage, scope.row.resolve)"
                   style="cursor: pointer"
                   v-else/>
              {{ scope.row.currentSize }} <strong> / </strong> {{ scope.row.totalSize }}
            </span>

            <span v-if="scope.row.isSummaryItem">
              <img :src="ICONS.misc.sumIcon" v-if="treeResult.length >= totalSize"/>
              <img :src="ICONS.misc.sumPlusIcon" @dblclick="fetchResult(scope.row.oql)" style="cursor: pointer" v-else/>
              {{ treeResult.length }} <strong> / </strong> {{totalSize}}
            </span>
          </template>
        </el-table-column>
        <el-table-column label="Shallow Heap" prop="shallowHeap">
        </el-table-column>
        <el-table-column label="Retained Heap" prop="retainedHeap">
        </el-table-column>
      </el-table>

      <el-table v-if="isTableResult"
                ref='tableResultTable' :data="tableTableData"
                :highlight-current-row="false"
                stripe
                :header-cell-style="headerCellStyle"
                :cell-style='cellStyle'
                row-key="rowKey"
                lazy
                :indent=8
                height="100%">

        <el-table-column v-for="(column, index) in tableResultColumns" :label="column" v-bind:key="column">
          <template slot-scope="scope">
          <span v-if="scope.row.isResult" @click="$emit('setSelectedObjectId', scope.row.objectId)"
                style="cursor: pointer"
                @contextmenu="contextMenuTargetObjectId = scope.row.objectId; contextMenuTargetObjectLabel = scope.row.values[index] ? scope.row.values[index] : 'null'"
                v-contextmenu:contextmenu>
            {{ scope.row.values[index] ? scope.row.values[index] : 'null' }}
          </span>

            <span v-if="scope.row.isSummaryItem && index === 0">
            <img :src="ICONS.misc.sumIcon" v-if="tableResult.length >= totalSize"/>
            <img :src="ICONS.misc.sumPlusIcon" @dblclick="fetchResult(scope.row.oql)" style="cursor: pointer" v-else/>
            {{ tableResult.length }} <strong> / </strong> {{totalSize}}
          </span>
          </template>
        </el-table-column>
      </el-table>


      <el-input v-if="isTextResult"
                v-model="textResult"
                type="textarea"
                readonly
                autosize>
      </el-input>
    </div>
  </div>
</template>

<script>
  import axios from 'axios'
  import {getOutboundIcon, ICONS} from "./IconHealper";
  import {heapDumpService} from "../../util";

  let rowKey = 1

  // oql result type
  const TREE = 1
  const TABLE = 2
  const TEXT = 3

  export default {
    props: ['file'],
    data() {
      return {
        ICONS,
        cellStyle: {padding: '4px', fontSize: '12px'},
        headerCellStyle: {padding: 0, 'font-size': '12px', 'font-weight': 'normal'},
        searching: false,
        loading: false,
        oql: '',
        nextPage: 1,
        pageSize: 25,
        totalSize: 0,
        resultType: 0,

        contextMenuTargetObjectId: null,
        contextMenuTargetObjectLabel: null,

        treeResult: [],
        treeTableData: [],

        tableResult: [],
        tableResultColumns: [],
        tableTableData: [],

        textResult: '',

        isTreeResult: false,
        isTableResult: false,
        isTextResult: false,

        historyOQLs: []
      }
    },
    methods: {
      adjustDataByResultType(type) {
        this.isTreeResult = type === TREE
        this.isTableResult = type === TABLE
        this.isTextResult = type === TEXT
      },
      fetchResult(oql) {
        if (!oql || oql.length === 0) {
          return
        }
        this.loading = true
        axios.get(heapDumpService(this.file, 'oql'), {
          params: {
            oql: oql,
            page: this.nextPage,
            pageSize: this.pageSize,
          }
        }).then(resp => {
          this.adjustDataByResultType(resp.data.type)
          if (this.isTreeResult) {
            this.putHistory(oql)
            this.totalSize = resp.data.pv.totalSize
            let data = resp.data.pv.data
            data.forEach(d => {
              this.treeResult.push({
                rowKey: rowKey++,
                icon: getOutboundIcon(d.gCRoot, d.objectType),
                prefix: d.prefix,
                label: d.label,
                suffix: d.suffix,
                shallowHeap: d.shallowSize,
                retainedHeap: d.retainedSize,
                hasChildren: d.hasOutbound,
                objectId: d.objectId,
                isResult: true
              })
            })
            this.treeTableData = this.treeResult.concat({
              rowKey: rowKey++,
              oql: oql,
              isSummaryItem: true
            })
            this.nextPage++
          } else if (this.isTableResult) {
            this.putHistory(oql)
            this.totalSize = resp.data.pv.totalSize
            this.tableResultColumns = resp.data.columns
            let data = resp.data.pv.data
            data.forEach(d => {
              this.tableResult.push({
                rowKey: rowKey++,
                objectId: d.objectId,
                values: d.values,
                hasChildren: false,
                isResult: true
              })
            })
            this.tableTableData = this.tableResult.concat({
              rowKey: rowKey++,
              oql: oql,
              isSummaryItem: true
            })
            this.nextPage++
          } else if (this.isTextResult) {
            this.textResult = resp.data.text
          }
          this.searching = false
          this.loading = false
        })
      },
      loadOutbounds(tree, treeNode, resolve) {
        this.fetchOutbounds(tree.rowKey, tree.objectId, 1, resolve)
      },
      fetchOutbounds(parentRowKey, objectId, page, resolve) {
        this.loading = true
        axios.get(heapDumpService(this.file, 'outbounds'), {
          params: {
            objectId: objectId,
            page: page,
            pageSize: this.pageSize,
          }
        }).then(resp => {
          let loadedLen = 0;
          let loaded = this.$refs['treeResultTable'].store.states.lazyTreeNodeMap[parentRowKey]
          let callResolve = false
          if (loaded) {
            loadedLen = loaded.length
            if (loadedLen > 0) {
              loaded.splice(--loadedLen, 1)
            }
          } else {
            loaded = []
            callResolve = true;
          }

          let res = resp.data.data
          res.forEach(d => {
            loaded.push({
              rowKey: rowKey++,
              icon: getOutboundIcon(d.gCRoot, d.objectType),
              prefix: d.prefix,
              label: d.label,
              suffix: d.suffix,
              shallowHeap: d.shallowSize,
              retainedHeap: d.retainedSize,
              hasChildren: d.hasOutbound,
              objectId: d.objectId,
              isResult: true
            })
          })

          loaded.push({
            rowKey: rowKey++,
            objectId: objectId,
            parentRowKey: parentRowKey,
            isOutboundsSummary: true,
            nextPage: page + 1,
            currentSize: loadedLen + res.length,
            totalSize: resp.data.totalSize,
            resolve: resolve,
          })

          if (callResolve) {
            resolve(loaded)
          }
          this.loading = false
        })
      },
      clear() {
        this.nextPage = 1
        this.totalSize = 0

        this.treeResult = []
        this.treeTableData = []

        this.tableResult = []
        this.tableResultColumns = []
        this.tableTableData = []
        this.textResult = ''
      },

      search() {
        if (this.oql) {
          this.searching = true
          this.clear()
          this.fetchResult(this.oql)
        }
      },

      putHistory(oql) {
        let target = oql.trim()
        for (let i = 0; i < this.historyOQLs.length; i++) {
          if (this.historyOQLs[i].value === target) {
            return
          }
        }

        this.historyOQLs.push({value: target})
        if (this.historyOQLs.length > 11) {
          this.historyOQLs.shift()
        }
      },

      queryHistory(queryString, cb) {
        let history = this.historyOQLs;
        let results = queryString ? history.filter(this.createFilter(queryString)) : history;
        cb(results);
      },

      createFilter(queryString) {
        return (history) => {
          return (history.value.toLowerCase().indexOf(queryString.toLowerCase().trim()) === 0);
        };
      },
    }
  }
</script>