<template>
  <div class="app-container">
    <div class="editor-grid">
      <div class="editor-section">
        <div style="display: flex;flex-wrap: wrap;">
          <div style="line-height:40px; line-height: 40px;">步骤1</div>
          <AutoSaveTextarea v-model="content1" data-key="note1" data-name="步骤1" data-type="input" placeholder=""
            :server-config="serverConfig" @content-restored="handleContentRestored" dataWidth="200px" />
          <div style="line-height:40px; line-height: 40px;">选择</div>
          <AutoSaveTextarea v-model="content2" data-key="note2" data-name="涡旋仪" data-type="select"
            :data-select="dataSelect" placeholder="点击选择" :server-config="serverConfig"
            @content-restored="handleContentRestored" dataWidth="200px" />
          <div style="line-height:40px; line-height: 40px;">涡旋仪，温度理论值</div>
          <AutoSaveTextarea v-model="content3" data-key="note3" data-name="温度理论值" data-type="input" placeholder=""
            :server-config="serverConfig" @content-restored="handleContentRestored" dataWidth="100px" />
          <div style="line-height:40px; line-height: 40px;">℃，实际值：</div>
          <AutoSaveTextarea v-model="content4" data-key="note4" data-name="温度实际值" data-type="input" placeholder=""
            :server-config="serverConfig" @content-restored="handleContentRestored" dataWidth="100px" />
          <div style="line-height:40px; line-height: 40px;">℃，涡旋混匀理论值：</div>
          <AutoSaveTextarea v-model="content5" data-key="note5" data-name="涡旋混匀理论值" data-type="input" placeholder=""
            :server-config="serverConfig" @content-restored="handleContentRestored" dataWidth="100px" />
          <AutoSaveTextarea v-model="content6" data-key="note6" data-name="涡旋混匀理论值单位" data-type="input" placeholder=""
            :server-config="serverConfig" @content-restored="handleContentRestored" dataWidth="100px" />
          <div style="line-height:40px; line-height: 40px;">实际值：</div>
          <AutoSaveTextarea v-model="content7" data-key="note7" data-name="涡旋混匀实际值" data-type="input" placeholder=""
            :server-config="serverConfig" @content-restored="handleContentRestored" dataWidth="100px" />
          <AutoSaveTextarea v-model="content8" data-key="note8" data-name="涡旋混匀实际值单位" data-type="input" placeholder=""
            :server-config="serverConfig" @content-restored="handleContentRestored" dataWidth="100px" />
          <AutoSaveTextarea v-model="content2" data-key="note9" data-name="总结" data-type="textarea"
            :data-select="dataSelect" placeholder="请输入总结" :server-config="serverConfig"
            @content-restored="handleContentRestored" dataWidth="100%" :textarea-row="5"/>
        </div>
      </div>
    </div>
    <h3 style="color: red;">通过多层存储，确保在各种异常情况下（网络中断、浏览器崩溃、存储限制等）用户内容都能得到妥善保存。</h3>
    <h2>分层存储（数据流向：用户输入 → 本地持久化 → 云端）</h2>
    <p> 1.服务器存储：云端同步，跨设备访问</p>
    
    <p> 2.LocalStorage：本地存储， 持久化，跨会话保存（关闭标签页/窗口 → 数据保留；刷新页面 → 数据保留）</p>
    <h2>实时保存</h2>
    <p>3.输入结束，失去焦点后触发多存储并行保存</p>
    <p>4.页面关闭前强制同步保存</p>
    <p>5.状态监控：实时跟踪各存储状态</p>
    <h2>云端同步</h2>
    <p>1.失败操作加入离线队列</p>
    <p>2.网络恢复时自动重试</p>
    <p>3.失败重试策略（可配置重试等待延迟，以及重试次数，避免太多请求，造成服务器压力过大）</p>
    <!-- 网络状态提示 -->
    <!-- <div class="network-status" :class="networkClass">
      <i :class="networkIcon"></i>
      网络状态：{{ networkText }}
    </div> -->
  </div>
</template>

<script>
import AutoSaveTextarea from './components/AutoSaveTextarea.vue';

export default {
  name: 'App',

  components: {
    AutoSaveTextarea
  },

  data() {
    return {
      content1: '漩涡混匀',
      content2: '',
      content3: '30',
      content4: '',
      content5: '10',
      content6: 'min',
      content7: '',
      content8: '',
      dataSelect: [{ value:  '迈瑞', label: '迈瑞' },{ value:  '大疆', label: '大疆' }],
      serverConfig: {
        endpoint: '/dev-api/system/business/test/testLblh',
        syncEndpoint: '/dev-api/system/business/test/testLblh2',
        historyEndpoint: '/api/text-history',
        retryCount: 3,
        retryDelay: 1000
      },
      isOnline: navigator.onLine,
      editors: [] // 存储编辑器实例
    };
  },

  computed: {
    networkClass() {
      return this.isOnline ? 'online' : 'offline';
    },
    networkIcon() {
      return this.isOnline ? 'el-icon-success' : 'el-icon-warning';
    },
    networkText() {
      return this.isOnline ? '在线' : '离线';
    }
  },

  mounted() {
    // 监听网络状态
    window.addEventListener('online', this.updateNetworkStatus);
    window.addEventListener('offline', this.updateNetworkStatus);

    // 监听自定义事件来收集编辑器实例
    this.$root.$on('editor-registered', this.registerEditor);
  },

  beforeDestroy() {
    window.removeEventListener('online', this.updateNetworkStatus);
    window.removeEventListener('offline', this.updateNetworkStatus);
    this.$root.$off('editor-registered', this.registerEditor);
  },

  methods: {
    handleContentRestored(content) {
      console.log('内容已恢复:', content);
      this.$message.success('内容恢复成功');
    },

    updateNetworkStatus() {
      this.isOnline = navigator.onLine;
    },

    registerEditor(editor) {
      this.editors.push(editor);
    },

  }
};
</script>

<style scoped>
.app-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

h1 {
  text-align: center;
  margin-bottom: 40px;
  color: #303133;
}

.editor-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
  gap: 30px;
  margin-bottom: 40px;
}

.editor-section {
  background: white;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

.editor-section h2 {
  margin: 0 0 20px 0;
  font-size: 18px;
  color: #409eff;
  border-bottom: 2px solid #409eff;
  padding-bottom: 10px;
}

.network-status {
  position: fixed;
  top: 20px;
  right: 20px;
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  z-index: 1000;
}

.network-status.online {
  background: #f0f9eb;
  color: #67c23a;
  border: 1px solid #e1f3d8;
}

.network-status.offline {
  background: #fef0f0;
  color: #f56c6c;
  border: 1px solid #fde2e2;
}

.batch-actions {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 30px;
  padding-top: 30px;
  border-top: 1px solid #ebeef5;
}

.btn {
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all 0.3s ease;
}

.btn-primary {
  background: #409eff;
  color: white;
}

.btn-primary:hover {
  background: #66b1ff;
}

.btn-secondary {
  background: #f5f7fa;
  color: #606266;
  border: 1px solid #dcdfe6;
}

.btn-secondary:hover {
  background: #e4e7ed;
}

@media (max-width: 768px) {
  .editor-grid {
    grid-template-columns: 1fr;
  }

  .editor-section {
    padding: 15px;
  }

  .batch-actions {
    flex-direction: column;
  }

  .btn {
    width: 100%;
    justify-content: center;
  }
}
</style>