/**
 * 流程台只读描述列表的响应式列数 mixin
 * 用于各阶段详情组件，根据窗口宽度自适应 el-descriptions 的 column：
 *  - >= 1920px：4 列（宽屏）
 *  - >= 1200px：3 列（中屏）
 *  - >= 768px ：2 列（窄屏）
 *  -  < 768px ：1 列（手机）
 */
export default {
  data() {
    return {
      windowWidth: 0
    };
  },
  computed: {
    descriptionColumn() {
      const w = this.windowWidth;
      if (w >= 1920) return 4;
      if (w >= 1200) return 3;
      if (w >= 768) return 2;
      return 1;
    }
  },
  mounted() {
    this.windowWidth = window.innerWidth;
    this.__handleWindowResize = () => {
      this.windowWidth = window.innerWidth;
    };
    window.addEventListener("resize", this.__handleWindowResize);
  },
  beforeDestroy() {
    if (this.__handleWindowResize) {
      window.removeEventListener("resize", this.__handleWindowResize);
    }
  }
};