<template>
  <div class="apass_table">
    <el-table
      :data="data"
      @sort-change="sortChange"
      @row-click="rowClick"
      :row-class-name="rowClassName"
      ref="multipleTable"
      :height="height"
      @select="select"
      @select-all="selectAll"
    >
      <el-table-column v-if="select_show" type="selection" width="60" align="center"></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="del_btn_a"
                :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 === '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>
          <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>
          </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="
                String(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>
          <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>
          <el-tooltip
            v-else-if="item.type === 'popover'"
            placement="top"
            popper-class="apass_table_tooltip"
            :content="String(scope.row[item.prop])"
          >
            <span>{{ spanSlice(scope.row[item.prop], item.num) }}</span>
          </el-tooltip>
          <div v-else-if="item.type === 'state'">
            <div
              class="switch_back"
              @click="changeState(scope.row)"
              :style="scope.row[item.prop] == 1 ? 'background-color: #8796cf;' : 'background-color: #999;'"
            >
              <div v-if="scope.row[item.prop] != 1" class="dolt"></div>
              <span>{{ scope.row[item.prop] == 1 ? "有效" : "无效" }}</span>
              <div v-if="scope.row[item.prop] == 1" class="dolt"></div>
            </div>
          </div>
          <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: () => [],
    },
    height: {
      type: String,
      default: null,
    },
    rowClassName: {
      type: Function,
      default: null,
    },
    select_show: {
      type: Boolean,
      default: true,
    },
  },
  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,
      },
    };
  },
  watch: {
    data: {
      handler(val) {
        console.log(val);
        this.toggleSelection(val);
      },
      immediate: true,
    },
  },
  mounted() {
    this.tag_flag_arr = Array.from(
      { length: this.data.length },
      (item, index) => (item = 0)
    );
  },
  methods: {
    toggleSelection(rows) {
      let self = this;
      console.log(self.$refs.multipleTable);
      rows.forEach((row) => {
        if (row.sort == 1) {
          console.log(row);
          self.$nextTick(function () {
            self.$refs.multipleTable.toggleRowSelection(row, true);
          });
        }
      });
    },
    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
        .filter((item) => {
          if (item.showRule) {
            return item.showRule(row);
          } else {
            return true;
          }
        })
        .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;
    },
    //全选
    selectAll(rows) {
      let select = [];
      if (rows && rows.length) {
        select = rows;
      } else {
        this.$refs.multipleTable.clearSelection();
      }
      this.$emit("selectnum", { select, rows });
    },
    select(select, rows) {
      this.$emit("selectnum", { select, rows });
    },
    spanSlice(span, num) {
      if (span) {
        if (span.length > num) {
          return span.slice(0, num) + "..";
        } else {
          return span;
        }
      } else {
        return "";
      }
    },
    changeState(row) {
      console.log(row);
      this.$emit("resetData");
    },
    cleanSel() {
      this.$refs.multipleTable.clearSelection();
      this.$emit("selectnum", { select: [], rows: [] });
    },
  },
};
</script>

<style>
.apass_table .el-table th > .cell {
  color: #1a2236;
}
.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;
}
.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: -20px;
  right: calc(50% - 20px);
  width: 40px;
  height: 20px;
  /* background-color: red; */
}
.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;
}
.btn {
  color: #2b4695;
  font-weight: 600;
}
.interval_line {
  margin: 0 10px;
}
.switch_back {
  width: 60px;
  height: 22px;
  margin: 0 10px;
  padding: 2px;
  border-radius: 15px;
  color: #fff;
  display: flex;
  justify-content: space-between;
  cursor: pointer;
}
.switch_back span {
  line-height: 20px;
  padding: 0 4px;
}
.dolt {
  width: 18px;
  height: 18px;
  border-radius: 10px;
  background-color: #fff;
}
.del_btn_a {
  font-weight: bold;
  color: #830f53;
  cursor: pointer;
}
</style>
