// stores/cart.js（Pinia 狀態(tài)管理，兼顧響應(yīng)式與性能）
import { defineStore } from 'pinia'
import { reactive, computed, toRefs } from 'vue'

export const useCartStore = defineStore('cart', () => {
  // 1. 核心狀態(tài)：深層嵌套響應(yīng)式數(shù)據(jù)
  const cartState = reactive({
    list: [], // 購物車列表：[{ id, goods: { sku, price, name }, count, checked }]
    selectedIds: [] // 選中的商品ID（優(yōu)化：僅存ID，減少依賴）
  })

  // 2. 計算屬性：緩存依賴，避免重復(fù)計算
  // 選中的商品列表（緩存，僅當(dāng) selectedIds/list 變化時重新計算）
  const selectedGoods = computed(() => {
    return cartState.list.filter(item => cartState.selectedIds.includes(item.id))
  })

  // 總價（基于選中商品列表，緩存）
  const totalPrice = computed(() => {
    return selectedGoods.value.reduce((sum, item) => {
      return sum + item.goods.price * item.count
    }, 0).toFixed(2)
  })

  // 全選狀態(tài)（雙向推導(dǎo)）
  const isAllSelected = computed({
    get() {
      const validList = cartState.list.filter(item => !item.disabled)
      return validList.length > 0 && validList.every(item => cartState.selectedIds.includes(item.id))
    },
    set(val) {
      const validIds = cartState.list.filter(item => !item.disabled).map(item => item.id)
      cartState.selectedIds = val ? validIds : []
    }
  })

  // 3. 方法：統(tǒng)一修改狀態(tài)，保證響應(yīng)式正確性
  // 添加商品（處理深層對象響應(yīng)式）
  const addGoods = (goods) => {
    const existItem = cartState.list.find(item => item.id === goods.id)
    if (existItem) {
      // 直接修改響應(yīng)式對象屬性，Proxy 能捕獲
      existItem.count += 1
    } else {
      // 新增數(shù)組項，響應(yīng)式生效（Vue3 無需 $set）
      cartState.list.push({
        ...goods,
        count: 1,
        checked: true
      })
      cartState.selectedIds.push(goods.id)
    }
  }

  // 修改商品數(shù)量（處理索引修改的響應(yīng)式）
  const updateGoodsCount = (id, count) => {
    const item = cartState.list.find(item => item.id === id)
    if (item) {
      item.count = count // 直接修改嵌套屬性，響應(yīng)式生效
    }
  }

  // 切換商品選中狀態(tài)
  const toggleGoodsSelect = (id) => {
    const index = cartState.selectedIds.indexOf(id)
    if (index > -1) {
      cartState.selectedIds.splice(index, 1) // 數(shù)組方法，響應(yīng)式生效
    } else {
      cartState.selectedIds.push(id)
    }
  }

  // 4. 暴露狀態(tài)：toRefs 保證解構(gòu)后仍有響應(yīng)式
  return {
    ...toRefs(cartState),
    selectedGoods,
    totalPrice,
    isAllSelected,
    addGoods,
    updateGoodsCount,
    toggleGoodsSelect
  }
})

// 購物車組件使用示例（Cart.vue）
<template>
  <div class="cart">
    <div class="cart-header">
      <el-checkbox v-model="isAllSelected">全選</el-checkbox>
      <span>總價：￥{{ totalPrice }}</span>
    </div>
    <div class="cart-list">
      <div 
        v-for="item in list" 
        :key="item.id" 
        class="cart-item"
      >
        <el-checkbox 
          v-model="item.checked" 
          @change="toggleGoodsSelect(item.id)"
        ></el-checkbox>
        <div class="goods-name">{{ item.goods.name }}</div>
        <div class="goods-price">￥{{ item.goods.price }}</div>
        <el-input-number 
          v-model="item.count" 
          @change="updateGoodsCount(item.id, item.count)"
          min="1"
        ></el-input-number>
      </div>
    </div>
  </div>
</template>

<script setup>
import { useCartStore } from '@/stores/cart'
import { storeToRefs } from 'pinia'

// 核心：storeToRefs 保證解構(gòu)的狀態(tài)仍有響應(yīng)式
const cartStore = useCartStore()
const { list, totalPrice, isAllSelected } = storeToRefs(cartStore)
const { toggleGoodsSelect, updateGoodsCount } = cartStore

// 模擬初始化數(shù)據(jù)
cartStore.addGoods({
  id: 1,
  goods: { price: 99, name: 'Vue3 實戰(zhàn)教程', sku: [{ color: 'red', size: 'M' }] },
  disabled: false
})
</script>

// vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [
    vue({
      template: {
        compilerOptions: {
          // 開啟靜態(tài)提升
          hoistStatic: true,
          // 開啟靜態(tài)節(jié)點緩存（Vue3.2+ 默認(rèn)開啟）
          cacheHandlers: true,
          // 開啟 patchFlags（動態(tài)節(jié)點標(biāo)記）
          patchFlags: true
        }
      }
    })
  ]
})

<!-- Screen.vue：大屏主組件 -->
<template>
  <!-- 靜態(tài)模塊：SSR渲染，編譯時提升到外部，不重復(fù)創(chuàng)建VNode -->
  <div class="screen-layout">
    <div class="screen-title">數(shù)據(jù)中臺實時監(jiān)控大屏</div>
    
    <!-- 動態(tài)模塊1：實時監(jiān)控（高頻更新，v-memo 緩存） -->
    <RealTimePanel 
      :data="realTimeData" 
      v-memo="[realTimeData.timestamp]" 
    />
    
    <!-- 動態(tài)模塊2：圖表（CSR渲染，異步組件懶加載） -->
    <AsyncChart 
      :chart-data="chartData" 
      v-if="isClient" 
    />
    
    <!-- 靜態(tài)模塊：布局容器 -->
    <div class="screen-footer">? 2025 數(shù)據(jù)中臺</div>
  </div>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue'
// 異步組件：懶加載圖表，減少首屏體積
const AsyncChart = defineAsyncComponent(() => import('./AsyncChart.vue'))

// 區(qū)分客戶端/服務(wù)端環(huán)境（SSR混合渲染）
const isClient = ref(false)
onMounted(() => {
  isClient.value = true // 客戶端掛載后再渲染CSR模塊
})

// 實時數(shù)據(jù)（高頻更新：每秒1次）
const realTimeData = ref({
  timestamp: Date.now(),
  online: 0,
  order: 0
})

// 模擬高頻更新：僅更新timestamp和數(shù)據(jù)，v-memo僅當(dāng)timestamp變化時更新
setInterval(() => {
  realTimeData.value = {
    ...realTimeData.value,
    timestamp: Date.now(),
    online: Math.floor(Math.random() * 10000),
    order: Math.floor(Math.random() * 1000)
  }
}, 1000)

// 圖表數(shù)據(jù)（低頻更新）
const chartData = computed(() => {
  return {
    xAxis: ['1時', '2時', '3時'],
    yAxis: [Math.random() * 100, Math.random() * 100, Math.random() * 100]
  }
})
</script>

<!-- RealTimePanel.vue：實時監(jiān)控面板（v-memo 緩存） -->
<template>
  <!-- v-memo：僅當(dāng)依賴數(shù)組變化時，才重新渲染該組件 -->
  <div class="real-time-panel" v-memo="[props.data.timestamp]">
    <div class="panel-item">在線人數(shù)：{{ props.data.online }}</div>
    <div class="panel-item">實時訂單：{{ props.data.order }}</div>
  </div>
</template>

<script setup>
const props = defineProps({
  data: {
    type: Object,
    required: true
  }
})
</script>

// nuxt.config.ts
export default defineNuxtConfig({
  ssr: true, // 全局開啟SSR
  routeRules: {
    // 大屏頁面：靜態(tài)模塊SSR，動態(tài)模塊客戶端激活
    '/screen': {
      ssr: true,
      cache: {
        maxAge: 60 * 60 // 靜態(tài)內(nèi)容緩存1小時
      }
    }
  }
})

// renderer.js：適配Web/小程序的自定義渲染器
import { createRenderer } from '@vue/runtime-core'

// 端能力適配：區(qū)分Web/小程序
const env = typeof window !== 'undefined' ? 'web' : 'miniprogram'

// 節(jié)點映射：Web → 小程序
const nodeMap = {
  div: 'view',
  button: 'button',
  input: 'input',
  span: 'text'
}

// 事件映射：Web → 小程序
const eventMap = {
  onClick: 'tap',
  onChange: 'input'
}

// 自定義渲染器配置
const rendererOptions = {
  // 1. 創(chuàng)建元素
  createElement(tag) {
    if (env === 'miniprogram') {
      // 小程序：創(chuàng)建原生組件實例（模擬）
      return {
        type: nodeMap[tag] || tag,
        props: {},
        children: []
      }
    } else {
      // Web：創(chuàng)建真實DOM
      return document.createElement(tag)
    }
  },

  // 2. 插入元素
  insert(el, parent, anchor) {
    if (env === 'miniprogram') {
      // 小程序：模擬插入到父節(jié)點
      parent.children = parent.children || []
      const index = anchor ? parent.children.indexOf(anchor) : parent.children.length
      parent.children.splice(index, 0, el)
      // 小程序原生渲染邏輯（如調(diào)用小程序API）
      // wx.createSelectorQuery().select('#container').nodes(el)
    } else {
      // Web：插入到真實DOM
      parent.insertBefore(el, anchor || null)
    }
  },

  // 3. 設(shè)置屬性/事件
  patchProp(el, key, prevValue, nextValue) {
    if (env === 'miniprogram') {
      // 小程序：適配事件/屬性
      if (key.startsWith('on')) {
        const eventName = eventMap[key] || key.slice(2).toLowerCase()
        el.props[eventName] = nextValue
      } else {
        el.props[key] = nextValue
      }
    } else {
      // Web：設(shè)置DOM屬性/事件
      if (key.startsWith('on')) {
        const eventName = key.slice(2).toLowerCase()
        el.removeEventListener(eventName, prevValue)
        el.addEventListener(eventName, nextValue)
      } else {
        el[key] = nextValue
      }
    }
  },

  // 4. 創(chuàng)建文本節(jié)點
  createText(text) {
    return env === 'miniprogram' ? { type: 'text', text } : document.createTextNode(text)
  },

  // 5. 設(shè)置文本內(nèi)容
  setElementText(el, text) {
    if (env === 'miniprogram') {
      el.text = text
    } else {
      el.textContent = text
    }
  },

  // 其他必要接口（省略：remove、createComment 等）
  remove: (el) => {},
  createComment: (text) => {}
}

// 創(chuàng)建自定義渲染器
export const createCustomRenderer = (options = {}) => {
  return createRenderer({ ...rendererOptions, ...options })
}

// 導(dǎo)出適配不同端的渲染器實例
export const webRenderer = createCustomRenderer()
export const miniProgramRenderer = createCustomRenderer({ env: 'miniprogram' })

<!-- CrossPlatformButton.vue：跨端按鈕組件 -->
<template>
  <button 
    class="btn" 
    @onClick="handleClick"
    :style="{ color: textColor }"
  >
    {{ btnText }}
  </button>
</template>

<script setup>
import { ref } from 'vue'

const props = defineProps({
  btnText: {
    type: String,
    default: '跨端按鈕'
  }
})

const emit = defineEmits(['click'])
const textColor = ref('blue')

const handleClick = () => {
  textColor.value = textColor.value === 'blue' ? 'red' : 'blue'
  emit('click')
}
</script>

// web-render.js：Web端渲染
import { webRenderer } from './renderer'
import CrossPlatformButton from './CrossPlatformButton.vue'

// Web端掛載到DOM
webRenderer.createApp(CrossPlatformButton).mount('#app')

// miniprogram-render.js：小程序端渲染
import { miniProgramRenderer } from './renderer'
import CrossPlatformButton from './CrossPlatformButton.vue'

// 小程序端掛載（模擬小程序生命周期）
App({
  onLaunch() {
    miniProgramRenderer.createApp(CrossPlatformButton).mount('#mini-app-root')
  }
})