<template>
  <div class="custom-table">
    <div class="regend-box">
      <div class="listwrap">
        <span class="value">
          <el-progress :percentage="100" :color="'#00B54F'" :show-text="false" />
        </span>
        <span class="lable">错误率 <= 20%</span>
      </div>
      <div class="listwrap">
        <span class="value">
          <el-progress :percentage="100" :color="'#f0e495'" :show-text="false" />
        </span>
        <span class="lable">20% < 错误率 <= 40%</span>
      </div>
      <div class="listwrap">
        <span class="value">
          <el-progress :percentage="100" :color="'#F1A657'" :show-text="false" />
        </span>
        <span class="lable">40% < 错误率 <= 60%</span>
      </div>
      <div class="listwrap">
        <span class="value">
          <el-progress :percentage="100" :color="'#EA463D'" :show-text="false" />
        </span>
        <span class="lable">60% < 错误率 <= 80%</span>
      </div>
      <div class="listwrap">
        <span class="value">
          <el-progress :percentage="100" :color="'#8d0b05'" :show-text="false" />
        </span>
        <span class="lable">错误率 > 80%</span>
      </div>
    </div>
    <el-table ref="table" :data="topoTableData" :border="true" style="width: 100%" :cell-style="cellClassNameFn" :header-align="'center'" :highlight-current-row="false" @cell-click="handelCurrentAppClick">
      <el-table-column label="上游应用" align="center">
        <template slot-scope="scope">
          <div v-if="scope.row.upstream.length > 0" class="left-box">
            <div v-for="item,index in scope.row.upstream" :key="item.app_alias" class="column-div left-column" @click="handelClick(item)">
              <el-tooltip placement="top">
                <div slot="content">
                  <div style="margin-bottom:5px">
                    <span style="display:inline-block; width: 60px; text-align:right">链路总数：</span>
                    <span>{{ item.trace_num }}个</span>
                  </div>
                  <div style="margin-bottom:5px">
                    <span style="display:inline-block;width: 60px; text-align:right">平均延迟：</span>
                    <span>{{ item.trace_duration_average && Number(item.trace_duration_average).toFixed(2) }} ms</span>
                  </div>
                  <div style="margin-bottom:5px">
                    <span style="display:inline-block;width: 60px; text-align:right">异常事件：</span>
                    <span>{{ item.exception_num || 0 }} 个</span>
                  </div>
                  <div style="margin-bottom:5px">
                    <span style="display:inline-block;width: 60px; text-align:right">错误数：</span>
                    <span>{{ item.trace_error_num }} 个</span>
                  </div>
                  <div>
                    <span style="display:inline-block;width: 60px; text-align:right">错误率：</span>
                    <span>{{ item.trace_error_rate == 0 ? '0%' : item.trace_error_rate && (item.trace_error_rate * 100).toFixed(2) + '%' }}</span>
                  </div>
                </div>
                <span :class="{ 'highlighted-cell': isHighlighted(scope.$index, index), 'normal-cell':!isHighlighted(scope.$index, index)}" class="custom-name " :style="{'background-color': setNodeFillCorlor(item.trace_error_rate)}" @mouseover="highlightCell(scope.$index, index)" @mouseout="clearHighlight">
                  <img src="@/assets/apply/appImg.svg" class="middle-svg">
                  <span class="maxWidth">{{ item.app_name }}</span>
                </span>
              </el-tooltip>
            </div>
          </div>
          <div v-else class="custom-des">暂无数据</div>
        </template>
      </el-table-column>
      <el-table-column prop="app_name" label="当前应用" align="center">
        <template slot-scope="scope">
          <el-tooltip placement="top">
            <div slot="content">
              <div style="margin-bottom:5px">
                <span style="display:inline-block; width: 60px; text-align:right">链路总数：</span>
                <span>{{ scope.row.trace_num }}个</span>
              </div>
              <div style="margin-bottom:5px">
                <span style="display:inline-block;width: 60px; text-align:right">平均延迟：</span>
                <span>{{ scope.row.trace_duration_average && Number(scope.row.trace_duration_average).toFixed(2) }} ms</span>
              </div>
              <div style="margin-bottom:5px">
                <span style="display:inline-block;width: 60px; text-align:right">异常事件：</span>
                <span>{{ scope.row.exception_num || 0 }} 个</span>
              </div>
              <div style="margin-bottom:5px">
                <span style="display:inline-block;width: 60px; text-align:right">错误数：</span>
                <span>{{ scope.row.trace_error_num }} 个</span>
              </div>
              <div>
                <span style="display:inline-block;width: 60px; text-align:right">错误率：</span>
                <span>{{ scope.row.trace_error_rate == 0 ? '0%' : scope.row.trace_error_rate && (scope.row.trace_error_rate * 100).toFixed(2) + '%' }}</span>
              </div>
            </div>
            <div class="middle-column" :style="{'background-color': setNodeFillCorlor(scope.row.trace_error_rate)}">
              <img src="@/assets/apply/appImg.svg" class="middle-svg">
              <span class="maxWidth">{{ scope.row.app_name }}</span>
            </div>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column label="下游应用" align="center">
        <template slot-scope="scope">
          <div v-if="scope.row.downstream.length > 0" class="right-box">
            <div v-for="item,index in scope.row.downstream" :key="item.app_alias" class="column-div right-column" @click="handelClick(item)">
              <el-tooltip placement="top">
                <div slot="content">
                  <div style="margin-bottom:5px">
                    <span style="display:inline-block; width: 60px; text-align:right">链路总数：</span>
                    <span>{{ item.trace_num }}个</span>
                  </div>
                  <div style="margin-bottom:5px">
                    <span style="display:inline-block;width: 60px; text-align:right">平均延迟：</span>
                    <span>{{ item.trace_duration_average && Number(item.trace_duration_average).toFixed(2) }} ms</span>
                  </div>
                  <div style="margin-bottom:5px">
                    <span style="display:inline-block;width: 60px; text-align:right">异常事件：</span>
                    <span>{{ item.exception_num || 0 }} 个</span>
                  </div>
                  <div style="margin-bottom:5px">
                    <span style="display:inline-block;width: 60px; text-align:right">错误数：</span>
                    <span>{{ item.trace_error_num }} 个</span>
                  </div>
                  <div>
                    <span style="display:inline-block;width: 60px; text-align:right">错误率：</span>
                    <span>{{ item.trace_error_rate == 0 ? '0%' : item.trace_error_rate && (item.trace_error_rate * 100).toFixed(2) + '%' }}</span>
                  </div>
                </div>
                <span :class="{ 'highlighted-cell': isRightHighlighted(scope.$index, index), 'normal-cell':!isRightHighlighted(scope.$index, index)}" class="custom-name" :style="{'background-color': setNodeFillCorlor(item.trace_error_rate)}" @mouseover="rightHighlightCell(scope.$index, index)" @mouseout="clearRightHighlight">
                  <img src="@/assets/apply/appImg.svg" class="middle-svg">
                  <span class="maxWidth">{{ item.app_name }}</span>
                </span>
              </el-tooltip>
            </div>
          </div>
          <div v-else class="custom-des">暂无数据</div>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
import EventBus from '@/utils/bus'
export default {
  name: 'TopologyListMode',
  props: {
    topoTableData: {
      type: Array,
      default: () => {
        return []
      }
    }
  },

  data() {
    return {
      hoveredCell: null,
      tableHeight: 230,
      highlightedRow: -1,
      highlightedColumn: -1,
      rightHighlightedRow: -1,
      rightHighlightedColumn: -1
    }
  },

  mounted() {
    const dom = document.querySelector('.el-tabs__content')
    this.$nextTick(() => {
      this.tableHeight = dom.offsetHeight - 50
    })
  },
  methods: {
    cellClassNameFn({ row, column, rowIndex, columnIndex }) {
      const height = this.tableHeight - 40
      const upstreamLen = row.upstream && row.upstream.length
      const downstreamLen = row.downstream && row.downstream.length
      let leftHeight = height
      let rightHeight = height
      let leftFlag = false
      let rightFlag = false
      const num = parseInt(height / 40)
      if (upstreamLen <= num && downstreamLen <= num) {
        leftFlag = true
        rightFlag = true
      } else if (upstreamLen <= num && downstreamLen > num) {
        leftFlag = true
        rightFlag = false
        leftHeight = downstreamLen * 40
      } else if (upstreamLen > num && downstreamLen <= num) {
        leftFlag = false
        rightFlag = true
        rightHeight = upstreamLen * 40
      } else if (upstreamLen > num && downstreamLen > num) {
        if (upstreamLen > downstreamLen) {
          leftFlag = false
          rightFlag = true
          rightHeight = upstreamLen * 40
        } else {
          leftFlag = true
          rightFlag = false
          leftHeight = downstreamLen * 40
        }
      }

      if (columnIndex === 1) { // 中间列的索引为1
        // const dom = document.querySelector('.middle-column')
        // let tempheight = null
        // if (leftFlag) {
        //   tempheight = leftHeight
        // } else if (rightFlag === true) {
        //   tempheight = rightHeight
        // }
        // if (dom) {
        //   dom.style.height = tempheight + 'px'
        // }
        // return `height: ${height}px`
      } else if (columnIndex == 0) {
        if (row.upstream && upstreamLen > 0) {
          const cellHeight = parseInt(leftHeight / upstreamLen)
          const domArr = document.querySelectorAll('.left-column')
          if (leftFlag) {
            domArr.forEach((item) => {
              item.style.height = cellHeight + 'px'
              item.style.lineHeight = cellHeight + 'px'
            })
          }
        }
      } else if (columnIndex == 2) {
        if (row.downstream && downstreamLen > 0) {
          const cellHeight = parseInt(rightHeight / downstreamLen)
          const domArr = document.querySelectorAll('.right-column')
          if (rightFlag) {
            domArr.forEach((item) => {
              item.style.height = cellHeight + 'px'
              item.style.lineHeight = cellHeight + 'px'
            })
          }
        }
        return `height: ${height}px`
      }
    },
    handelCurrentAppClick(row, column, cell, event) {
      let side = ''
      if (column.label === '当前应用') {
        side = 'root'
        EventBus.$emit('currentAppClick', side, null, 'topoCon')
      }
    },
    handelClick(item) {
      EventBus.$emit('currentAppClick', 'leftright', item)
    },
    // 左侧
    highlightCell(rowIndex, columnIndex) {
      this.highlightedRow = rowIndex
      this.highlightedColumn = columnIndex
    },
    isHighlighted(rowIndex, columnIndex) {
      return rowIndex === this.highlightedRow && columnIndex === this.highlightedColumn
    },
    clearHighlight() {
      this.highlightedRow = -1
      this.highlightedColumn = -1
    },
    // 右侧
    rightHighlightCell(rowIndex, columnIndex) {
      this.rightHighlightedRow = rowIndex
      this.rightHighlightedColumn = columnIndex
    },
    isRightHighlighted(rowIndex, columnIndex) {
      return rowIndex === this.rightHighlightedRow && columnIndex === this.rightHighlightedColumn
    },
    clearRightHighlight() {
      this.rightHighlightedRow = -1
      this.rightHighlightedColumn = -1
    },
    setNodeFillCorlor(trace_error_rate) {
      if (trace_error_rate != null && trace_error_rate != undefined) {
        const errRate = trace_error_rate * 100
        if (errRate <= 20) {
          return '#00B54F'
        } else if (errRate > 20 && errRate <= 40) {
          return '#f0e495'
        } else if (errRate > 40 && errRate <= 60) {
          return '#F1A657'
        } else if (errRate > 60 && errRate <= 80) {
          return '#EA463D'
        } else if (errRate > 80) {
          return '#8d0b05'
        }
      }
      return '#00B54F'
    }
  }
}

</script>
<style scoped lang='scss'>
.custom-des{
  color:#999;
}
.column-div{
  border: 1px solid #eee;
  text-align: center;
  cursor: pointer;
}

::v-deep .el-table--border .el-table__cell:first-child .cell{
  padding-left: 0 !important;
}
::v-deep .el-table--medium .el-table__cell{
  padding: 0;
  cursor: pointer;
}
.custom-table{
  padding: 20px;
  padding-top:5px;
  box-sizing: border-box;
  overflow: hidden;
  position: relative;
}
.right-column,
.left-column{
  height: 40px;
  line-height: 40px;
  font-size: 14px;
}
.middle-column{
  cursor: pointer;
  color: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  position: absolute;
  top: 0;

  bottom: 0;
  width: 100%;
  overflow-y: scroll;
}
::v-deep .el-table .cell{
  padding-left: 0;
  padding-right: 0;
}
.highlighted-cell {
  background-color: #e9f0fa !important; /* 设置高亮颜色 */
  // background-color: #41a2fc !important;
}
.errorHightlign-cell{
  background-color: #F44C4C !important; /* 设置高亮颜色 */
}

.custom-name{
  width: 100%;
  display: inline-block;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgb(247, 250, 255);
}
.maxWidth{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width:75%;
}
.error-background{
  background-color: #f3afaf;
}
/* 完全移除Element UI表格行的悬停效果 */
::v-deep .el-table tbody tr:hover>td {
  background-color: white !important;
}
.middle-svg{
  width: 20px;
  height: 20px;
  margin-right: 10px;
}

.left-box,
.right-box{
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 100%;
  overflow-y: scroll;
}
.regend-box{
  display: flex;
  margin-bottom:10px;
}
.listwrap{
  color:#666;
  margin-right: 15px;
  span{
    display: inline-block;
    padding:4px;
  }
  .value{
    width:50px;
    box-sizing: border-box;
  }
}
</style>
