<template>
  <div class="apass_table">
    <el-table
      :data="data"
      @sort-change="sortChange"
      @row-click="rowClick"
      :row-class-name="rowClassName"
    >
      <el-table-column
        v-if="paddingLeft > 10"
        :width="paddingLeft - 10"
      ></el-table-column>
      <el-table-column
        v-for="(item, index) in header"
        :label="item.label"
        :align="item.align || 'left'"
        :width="item.width"
        :key="'head_' + index"
        :prop="item.prop"
        :sortable="item.sortable ? 'custom' : false"
      >
        <template slot-scope="scope">
          <div v-if="item.type === 'buttons'" class="row_action">
            <template v-for="(v, i) in item.actionList">
              <span
                v-if="v.disabledRule && v.disabledRule(scope.row)"
                class="btn disabled"
                :class="{ hide: v.disableHide }"
                :key="'btn_' + index + '_' + i"
                v-text="v.getLabel ? v.getLabel(scope.row) : v.label"
              >
              </span>
              <a
                v-else
                class="btn"
                :class="v.class || ''"
                :key="'btn_' + index + '_' + i"
                @click.stop="v.callback && v.callback(scope.row)"
                v-text="v.getLabel ? v.getLabel(scope.row) : v.label"
              >
              </a>
              <span
                v-if="i < item.actionList.length - 1"
                class="interval_line"
                :key="'line_' + index + '_' + i"
              >
                |
              </span>
            </template>
            <template v-if="item.moreActionList">
              <span
                class="interval_line"
                v-if="item.actionList && item.actionList.length > 0"
              >
                |
              </span>
              <a
                class="btn"
                @mouseenter="mouseenter($event, item.moreActionList, scope.row)"
                @mouseleave="mouseleave"
              >
                更多
              </a>
            </template>
          </div>
          <div v-else-if="item.type === 'button'" class="row_action">
            <a
              class="btn"
              v-text="scope.row[item.prop]"
              @click.stop="item.callback && item.callback(scope.row)"
            ></a>
          </div>
          <div v-else-if="item.type === 'icon'">
            <img
              src="../assets/imgs/ic_true.png"
              alt=""
              v-if="scope.row[item.prop] == 1"
              style="width:100%;height:100%;"
            />
            <img
              src="../assets/imgs/ic_yiwancheng.png"
              alt=""
              v-if="scope.row[item.prop] == 2"
              style="width:100%;height:100%;"
            />
            <img
              src="../assets/imgs/ic_restart.png"
              alt=""
              v-if="scope.row[item.prop] == 3"
              style="width:100%;height:100%;"
            />
            <img
              src="../assets/imgs/ic_failed.png"
              alt=""
              v-if="scope.row[item.prop] == 4"
              style="width:100%;height:100%;"
            />
          </div>
          <div v-else-if="item.type === 'tag'" class="table_tag">
            <template v-for="(item, index) in scope.row[item.prop]">
              <el-tag
                v-if="index <= 1 || tag_flag_arr[scope.$index] == 1"
                :key="'tag_' + index"
              >
                {{ item }}
              </el-tag>
            </template>
            <div
              class="tagclo btn_down"
              v-if="
                tag_flag_arr[scope.$index] == 0 &&
                  scope.row[item.prop].length > 2
              "
              @click.stop="changeTag(scope.$index, 1)"
            ></div>
            <div
              class="tagclo btn_up"
              v-if="
                tag_flag_arr[scope.$index] == 1 &&
                  scope.row[item.prop].length > 2
              "
              @click.stop="changeTag(scope.$index, 0)"
            ></div>
          </div>
          <div v-else-if="item.type === 'chart'" class="charts">
            <sparkline :indicatorStyles="spIndicatorStyles1">
              <sparklineCurve
                :refLineStyles="spRefLineStyles3"
                :refLineType="false"
                :data="scope.row[item.prop]"
                :limit="scope.row[item.prop].length"
                :styles="item.prop == 'cpu' ? spCurveStyles2 : spCurveStyles3"
              />
            </sparkline>
            <span class="use" v-if="item.prop == 'cpu' && scope.row.cpu_use"
              >{{ scope.row["cpu_use"] }}.00mm</span
            >
            <span
              class="use"
              :style="
                scope.row[item.prop].length
                  ? {}
                  : { right: '25px', bottom: '8px' }
              "
              v-if="item.prop == 'cpu' && !scope.row.cpu_use"
              >0mm</span
            >
            <span
              class="use"
              v-if="item.prop == 'mermoy' && scope.row.memory_use"
              >{{ scope.row["memory_use"] }}Mi</span
            >
            <span
              class="use"
              :style="
                scope.row[item.prop].length
                  ? {}
                  : { right: '25px', bottom: '8px' }
              "
              v-if="item.prop == 'mermoy' && !scope.row.memory_use"
              >0Mi</span
            >
          </div>
          <div v-else-if="item.type === 'image'" class="img_content">
            <img
              :src="item.getImage && item.getImage(scope.row)"
              :width="item.size"
            />
          </div>
          <div v-else-if="item.type === 'image-tooltip'" class="img_content">
            <el-tooltip
              effect="dark"
              :content="
                item.getTooltip ? item.getTooltip(scope.row) : item.tooltip
              "
              placement="top"
            >
              <img
                :src="item.getImage && item.getImage(scope.row)"
                :width="item.size"
              />
            </el-tooltip>
          </div>
          <div
            v-else-if="
              item.type === 'tooltip' &&
                item.getLength &&
                item.getLength(scope.row) > 1
            "
          >
            <el-tooltip
              placement="right-start"
              popper-class="apass_table_tooltip"
            >
              <div
                slot="content"
                v-html="item.getContent && item.getContent(scope.row)"
              ></div>
              <span
                v-text="(item.getText && item.getText(scope.row)) + '..'"
                style="text-decoration: underline;color: #515fe7;"
              ></span>
            </el-tooltip>
          </div>
          <span
            v-else-if="item.type === 'hot-index'"
            class="hot_index"
            :class="'index_' + scope.row.hotIndex"
            v-text="'TOP' + scope.row.hotIndex"
          ></span>
          <span class="sort_table" v-else-if="item.sortable">
            <span>{{ getPercent(scope.row[item.prop]) }}</span>
            <span>
              <img
                v-if="scope.row[item.prop] >= 0"
                :src="require('../assets/imgs/icon_up.png')"
              />
              <img v-else :src="require('../assets/imgs/icon_down.png')" />
            </span>
          </span>
          <span
            v-else-if="item.type === 'selected-icon'"
            class="selected_icon"
            :class="{
              selected: scope.row[item.prop],
            }"
          >
            <span></span>
          </span>
          <span
            v-else-if="item.type === 'html'"
            class="table_html"
            v-html="
              item.getHtml ? item.getHtml(scope.row) : scope.row[item.prop]
            "
          ></span>
          <span
            v-else
            v-text="
              item.getText ? item.getText(scope.row) : scope.row[item.prop]
            "
          ></span>
        </template>
      </el-table-column>
    </el-table>

    <ul
      ref="moreActionList"
      class="more_action_list"
      :style="moreActionStyle"
      @mouseenter="enterMoreActionList"
      @mouseleave="leaveMoreActionList"
      v-show="showMoreActionList"
    >
      <li
        v-for="(item, index) in moreActionList"
        :key="'more_' + index"
        @click="item.callback"
        v-text="item.label"
      ></li>
    </ul>
  </div>
</template>

<script>
export default {
  props: {
    header: {
      type: Array,
      default: () => [],
    },
    data: {
      type: Array,
      default: () => [],
    },
    paddingLeft: {
      type: [Number, String],
      default: () => 50,
    },
    height: {
      type: Number,
      default: null,
    },
    rowClassName: {
      type: Function,
      default: null,
    },
  },
  data() {
    return {
      tag_flag_arr: [],
      spCurveStyles2: {
        stroke: "#515fe7",
        fill: "#515fe7",
        // fill: '#d2d6f8'
      },
      spCurveStyles3: {
        stroke: "#37c299",
        fill: "#37c299",
        // fill: '#c8ebe4'
      },
      // 指示器样式
      spIndicatorStyles1: false,
      spRefLineStyles3: {
        stroke: "#d14",
        strokeOpacity: 0,
        strokeDasharray: "2, 2",
      },
      moreActionList: [],
      showMoreActionList: false,
      moreActionStyle: {
        top: 0,
        left: 0,
      },
    };
  },
  mounted() {
    this.tag_flag_arr = Array.from(
      { length: this.data.length },
      (item, index) => (item = 0)
    );
  },
  methods: {
    changeTag(index, val) {
      this.$set(this.tag_flag_arr, index, val);
    },
    sortChange(value) {
      this.$emit("sort-change", value);
    },
    rowClick(value) {
      this.$emit("row-click", value);
    },
    getPercent(num) {
      return Math.round(num * 100) + "%";
    },
    mouseenter($event, moreActionList, row) {
      let _self = this;

      _self.moreActionList = [];
      _self.showMoreActionList = true;
      _self.moreActionList = moreActionList.map((item) => ({
        id: row.id,
        label: item.label,
        callback() {
          _self.showMoreActionList = false;
          _self.moreActionList = [];

          item.callback && item.callback(row);
        },
      }));

      _self.$nextTick(() => {
        let targetInfo = $event.target.getBoundingClientRect();
        let containerInfo = _self.$refs.moreActionList.getBoundingClientRect();

        _self.moreActionStyle = {
          top: targetInfo.y + targetInfo.height + 15 + "px",
          left:
            targetInfo.x - (containerInfo.width - targetInfo.width) / 2 + "px",
        };
      });
    },
    mouseleave() {
      this.showMoreActionList = false;
    },
    enterMoreActionList() {
      this.showMoreActionList = true;
    },
    leaveMoreActionList() {
      this.showMoreActionList = false;
    },
  },
};
</script>

<style>
.table_tag .el-tag {
  background-color: #58617a;
  color: #fff;
  display: inline-block;
  height: 22px;
  padding: 0 5px;
  line-height: 22px;
  font-size: 12px;
  border-radius: 4px;
  margin-right: 3px;
  margin-bottom: 3px;
}
.tagclo {
  display: inline-block;
  width: 22px;
  height: 22px;
  vertical-align: middle;
  text-align: center;
  line-height: 22px;
  cursor: pointer;
  background-size: contain;
  margin-top: -3px;
}
.btn_down {
  background-image: url("../assets/imgs/btn_expand.png");
}
.btn_up {
  background-image: url("../assets/imgs/btn_fold.png");
}
.charts {
  position: relative;
}
.charts .use {
  position: absolute;
  bottom: 0;
  right: -10px;
  font-size: 12px;
  color: rgba(26, 34, 54, 1);
}
.apass_table_tooltip {
  font-size: 12px;
  line-height: 20px;
}
.hot_index {
  font-family: "Arial";
  font-style: italic;
  font-weight: 800;
  font-size: 16px;
  color: #b9bab5;
}
.hot_index.index_1 {
  color: #d9ac64;
}
.hot_index.index_2 {
  color: #c3c4c0;
}
.hot_index.index_3 {
  color: #ba6e40;
}
.sort_table {
  display: flex;
  justify-content: center;
  align-items: center;
}
.sort_table > span {
  flex-shrink: 0;
}
.sort_table > span:nth-child(1) {
  flex-grow: 1;
  text-align: right;
}
.sort_table > span:nth-child(2) {
  width: 30%;
  margin-left: 5px;
  text-align: left;
}
</style>

<style scoped>
.img_content {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.selected_icon {
  display: inline-block;
  vertical-align: middle;
  width: 16px;
  height: 16px;
  border: 1px solid #e3e5ef;
  padding: 2px;
  box-sizing: border-box;
  background-color: #fff;
  border-radius: 50%;
}
.selected_icon > span {
  display: none;
  width: 100%;
  height: 100%;
  background-color: #e56600;
  border-radius: 50%;
}
.selected_icon.selected > span {
  display: block;
}
.more_action_list {
  position: fixed;
}
.more_action_list > li {
  padding: 5px 20px;
  background-color: #0f2683;
  font-size: 12px;
  line-height: 20px;
  color: #fff;
  cursor: pointer;
  position: relative;
}
.more_action_list > li:first-child {
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}
.more_action_list > li:first-child::before {
  content: "";
  position: absolute;
  top: -14px;
  right: calc(50% - 14px);
  width: 28px;
  height: 14px;
}
.more_action_list > li:first-child::after {
  content: "";
  position: absolute;
  top: -14px;
  right: calc(50% - 7px);
  border-top: 0 solid transparent;
  border-right: 7px solid transparent;
  border-bottom: 14px solid #0f2683;
  border-left: 7px solid transparent;
}
.more_action_list > li:last-child {
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
}
.more_action_list > li:hover {
  background-color: #3f4f9c;
}
.more_action_list > li:first-child:hover::after {
  border-bottom: 14px solid #3f4f9c;
}
</style>
