<template>
  <div class="cmp">
    <header class="cmp-bar">
      <strong>Jellies 引入方式对比</strong>
      <label v-for="m in modes" :key="m.id" class="cmp-toggle">
        <input type="checkbox" v-model="m.on" />
        <span class="cmp-dot" :style="{ background: m.color }" />
        {{ m.label }}
      </label>
      <label class="cmp-toggle cmp-sync">
        <input type="checkbox" v-model="syncScroll" />
        同步滚动
      </label>
      <span class="cmp-hint">逐个组件并排对比不同引入方式下的样式 / 交互</span>
    </header>

    <div class="cmp-cols">
      <section v-for="m in shown" :key="m.id" class="cmp-col">
        <div class="cmp-head">
          <span class="cmp-dot" :style="{ background: m.color }" />
          {{ m.label }}<code>{{ m.src }}</code>
        </div>
        <iframe :ref="'frame_' + m.id" :src="m.src" class="cmp-frame" @load="attachSync(m.id)" />
      </section>
      <p v-if="!shown.length" class="cmp-empty">勾选上方至少一种引入方式</p>
    </div>
  </div>
</template>

<script>
// `/` 是对比台：把三种引入方式的同一份展示页（Gallery）并排放进 iframe，滚动同步，
// 方便人逐个组件核对「全局 vs 按需」的样式与交互是否一致。每个 iframe 是独立文档，
// 样式互不污染——这是唯一能真正隔离「全局 element.scss」与「按需 per-component css」的方式。
export default {
  name: 'App',
  data() {
    return {
      syncScroll: true,
      modes: [
        { id: 'global', label: '全局引入 (Vue.use)', src: 'global.html', color: '#409eff', on: true },
        { id: 'ondemand', label: '按需引入 (SFC)', src: 'ondemand.html', color: '#67c23a', on: true },
        { id: 'jsk', label: '按需引入 (Jisuanke3 式)', src: 'jsk.html', color: '#e6a23c', on: false }
      ]
    };
  },
  computed: {
    shown() {
      return this.modes.filter(m => m.on);
    }
  },
  methods: {
    frameWin(id) {
      const ref = this.$refs['frame_' + id];
      const el = Array.isArray(ref) ? ref[0] : ref;
      return el && el.contentWindow;
    },
    attachSync(id) {
      const win = this.frameWin(id);
      if (!win) return;
      win.addEventListener(
        'scroll',
        () => {
          if (!this.syncScroll || this._syncing) return;
          this._syncing = true;
          const { scrollX: x, scrollY: y } = win;
          this.shown.forEach(m => {
            if (m.id === id) return;
            const other = this.frameWin(m.id);
            if (other) other.scrollTo(x, y);
          });
          requestAnimationFrame(() => {
            this._syncing = false;
          });
        },
        { passive: true }
      );
    }
  }
};
</script>

<style>
html,
body,
#app {
  height: 100%;
  margin: 0;
}
.cmp {
  display: flex;
  flex-direction: column;
  height: 100vh;
  font-family: -apple-system, "Segoe UI", "Microsoft YaHei", sans-serif;
}
.cmp-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 18px;
  flex: none;
  padding: 10px 16px;
  background: #1f2d3d;
  color: #fff;
}
.cmp-bar strong {
  font-size: 14px;
}
.cmp-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  cursor: pointer;
  user-select: none;
}
.cmp-sync {
  color: #b6c6d6;
}
.cmp-hint {
  margin-left: auto;
  font-size: 12px;
  color: #8aa0b6;
}
.cmp-cols {
  flex: 1;
  display: flex;
  min-height: 0;
}
.cmp-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  border-right: 1px solid #dfe4ed;
}
.cmp-col:last-child {
  border-right: none;
}
.cmp-head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 600;
  background: #f5f7fa;
  border-bottom: 1px solid #dfe4ed;
}
.cmp-head code {
  font-weight: 400;
  font-size: 12px;
  color: #909399;
}
.cmp-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex: none;
}
.cmp-frame {
  flex: 1;
  width: 100%;
  border: none;
}
.cmp-empty {
  margin: auto;
  color: #909399;
}
</style>
