teachcloud-print-web/card/elements/card-head/CardHeadBodyAutoResize.vue

<template>
  <div :class="classes">
    <div class="rect-col" :style="{ width: rightColWidth + '%' }">
      <div
        class="rect-col-item"
        ref="stdnoContainer"
        :style="{ height: heights.stdno + 'px' }"
      >
        <slot name="stdno"></slot>
      </div>
      <div
        :class="['rect-col-item', { 'rect-col-item-none': !$slots.dynamic }]"
        ref="dynamicContainer"
        :style="{ height: heights.dynamic + 'px' }"
      >
        <slot name="dynamic"></slot>
      </div>
    </div>
    <div class="rect-col" :style="{ width: leftColWidth + '%' }">
      <div
        class="rect-col-item"
        ref="stdinfoContainer"
        :style="{ height: heights.stdinfo + 'px' }"
      >
        <slot name="stdinfo"></slot>
      </div>
      <div
        class="rect-col-item"
        ref="noticeContainer"
        :style="{ height: heights.notice + 'px' }"
      >
        <slot name="notice"></slot>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "card-head-body-auto-resize",
  props: {
    data: {
      type: Object,
    },
  },
  data() {
    return {
      orgHeights: {
        stdinfo: 40,
        notice: 40,
        stdno: 40,
        dynamic: 40,
      },
      heights: {
        stdinfo: 40,
        notice: 40,
        stdno: 40,
        dynamic: 40,
      },
      leftColWidth: 50,
      rightColWidth: 50,
      maxRigthColWidth: 60,
    };
  },
  computed: {
    classes() {
      return ["card-head-body-auto-resize", "col-item-auto-height"];
    },
  },
  mounted() {
    this.initStyles();
  },
  methods: {
    initStyles() {
      const containers = ["stdinfo", "notice", "stdno", "dynamic"];
      containers.forEach((container) => {
        const dom =
          this.$refs[`${container}Container`] &&
          this.$refs[`${container}Container`].firstChild;
        this.orgHeights[container] = dom ? dom.offsetHeight : 0;
      });
      Object.keys(this.orgHeights).map((key) => {
        this.heights[key] = this.orgHeights[key] + 2;
      });
      this.resizeRect();
    },
    resizeRect() {
      // width size
      const fillNumber = this.data.fillNumber || 13;
      if (fillNumber <= 10) {
        this.rightColWidth = 50;
      } else {
        let rightColWidth = 50 + 4 * (fillNumber - 10);
        this.rightColWidth = Math.min(this.maxRigthColWidth, rightColWidth);
      }
      this.leftColWidth = 100 - this.rightColWidth;

      // height size
      let col1 = this.orgHeights.stdinfo + this.orgHeights.notice;
      let col2 = this.orgHeights.stdno + this.orgHeights.dynamic;
      if (this.$slots.dynamic) {
        if (col1 > col2) {
          this.heights.stdno = col1 - col2 + this.orgHeights.stdno + 2;
          this.heights.dynamic = this.orgHeights.dynamic + 2;
        } else {
          const splitHeight = (col2 - col1) / 2;
          this.heights.stdinfo = splitHeight + this.orgHeights.stdinfo + 2;
          this.heights.notice = splitHeight + this.orgHeights.notice + 2;
        }
      } else {
        col1 += 14;
        col2 -= 2;
        if (col1 > col2) {
          this.heights.stdno = col1;
        } else {
          const splitHeight = (col2 - col1) / 2;
          this.heights.stdinfo = splitHeight + this.orgHeights.stdinfo + 2;
          this.heights.notice = splitHeight + this.orgHeights.notice + 2;
        }
      }
    },
  },
};
</script>