/**
 * @Author: Sun Rising 
 * @Date: 2019-11-21 12:35:22 
 * @Last Modified by: Sun Rising
 * @Last Modified time: 2019-11-21 13:47:57
 * @Description: 二次修改
 */
<template>
  <el-tooltip class="item" effect="light" :content="tipContent" placement="top" v-if="showToopTip">
    <div class="ws-class-table-col" :style="{flex: span}">
      <slot v-if="isRan" v-bind="slotBind"></slot>
    </div>
  </el-tooltip>
  <div ref="theBox" class="ws-class-table-col" v-else :style="{flex: span}">
    <slot v-if="isRan" v-bind="slotBind"></slot>
  </div>
</template>

<script>
function uuid() {
  return (Math.random() * 10000000).toString().replace(".", "");
}

export default {
  name: "WsClassTableCol",
  props: {
    span: {
      type: Number,
      default: 1
    },
    prop: {
      type: String,
      default: null
    },
    label: {
      type: String,
      default: null
    }
  },
  inject: ["table"],
  data() {
    return {
      slotBind: {},
      // tip显示内容
      tipContent: "",
      showToopTip: false,
      //渲染插槽
      isRan: false
    };
  },
  mounted() {
    this.slotBind = {
      groupIndex: this.getGroupIndex(),
      rowIndex: this.getRowIndex(),
      colIndex: this.getColIndex(),
      data: this.table.data[this.getGroupIndex()].children[this.getRowIndex()]
    };
    this.table.registerCol(this);
    this.isRan = true;
    this.initTip();
  },
  beforeDestroy() {
    this.table.unRegisterCol(this);
  },
  updated() {
    this.initTip();
  },
  methods: {
    // 判断插槽中是否插入标签 如果未插入则认为使用该标签进行反显
    // 不推荐这么做 为了不影响对外API只能读取插槽内容来读取显示的文本
    // 缺点 开发时当插槽内容改变时，tip内容不会改变 需刷新页面
    initTip() {
      if (this.$el && this.$el.children && this.$el.children.length === 0) {
        this.tipContent = this.$el.innerText;
        this.autoTip();
      } else {
        this.showToopTip = false;
      }
    },
    // tip自动开关
    autoTip() {
      let dom = this.$refs["theBox"];
      if (dom) {
        let clientWidth = dom.clientWidth;
        let scrollWidth = dom.scrollWidth;
        if (scrollWidth > clientWidth) {
          this.showToopTip = true;
        } else {
          this.showToopTip = false;
        }
      }
    },
    getGroupIndex() {
      var contentNodes = this.table.$refs.content;
      var contentNode = this.getContentEl();
      return contentNodes.indexOf(contentNode);
    },
    getRowIndex() {
      var listNodes = this.$el.parentNode.parentNode.children;
      var listNode = this.getListEl();
      for (var i = 0; i < listNodes.length; i++) {
        if (listNodes[i] == listNode) {
          return i;
        }
      }
      return -1;
    },
    getColIndex() {
      var colNodes = this.$el.parentNode.children;
      var colNode = this.$el;
      for (var i = 0; i < colNodes.length; i++) {
        if (colNodes[i] == colNode) {
          return i;
        }
      }
      return -1;
    },

    getContentEl() {
      return this.$el.parentNode.parentNode;
    },
    getListEl() {
      return this.$el.parentNode;
    }
  }
};
</script>

<style lang="scss" scoped>
@import "../../WsTheme/var.scss";

.ws-class-table-col {
  padding-left: 10px;
  padding-right: 10px;
  font-size: 12px;
  color: $color-primary-shade;
  text-overflow: ellipsis !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  display: block !important;
  &:not(:last-of-type) {
    border-right: 1px solid $color-light-shade;
  }
}
</style>