<div class="relative w-full h-full lg:(w-750px h-800px)">
    <route-view
</div>

// 定義行個數(shù)
const rowLen = 3
// 定義cnt寬高和item的寬高
const cntWidth = ref(0)
const cntHeight = ref(0)
const itemWidth = ref(0)
const itemHeight = ref(0)

// 定義數(shù)組
const lists = ref([])

lists.value = new Array(rowLen.value * rowLen.value).fill(1).map((item, index) => ({
    key: index, // 存儲原序號
    value: item, // 1 代表不是空位
    moveIndex: index
  }))

// 設(shè)置最后一個為-1
  lists.value[lists.value.length - 1]['value'] = 0
  
//獲取dom和渲染
onMounted(() => {
   // 獲取cnt寬高和item的寬高
  getCntWidth()
  // 讓第一次渲染不會有transform動畫
  lazyShow.value = false
})

<div v-show="!lazyShow" v-for="(item, index ) in lists" class="box rounded-md  overflow-hidden absolute"
      :class="[item.value ? 'origin' : 'opacity-0']" @click="boxClick(item)" :style="{
        transform: `translate(${(item.moveIndex % rowLen) * (1 / rowLen) * cntWidth}px, ${parseInt(item.moveIndex / rowLen) * (1 / rowLen) * cntHeight}px) `, width: itemWidth + 'px', height: itemHeight + 'px'
      }">
    <p class="absolute z-10 text-light-100 left-1/2 top-1/2" :class="hasImg ? 'opacity-60' : ''"
        :style="{ 'font-size': (180 / rowLen) + 'px' }">{{ item.key + 1 }}</p>
</div>

// 是否在一行
  const isInline = parseInt(index / rowLen.value) === parseInt(emptyIndex / rowLen.value)
 
 // 在一行是否相鄰
  Math.abs(emptyIndex - index) === 1
   
  // 不在一行是否是上下關(guān)系
  Math.abs(index - emptyIndex) === rowLen.value

// 是否在一行
  if (isInline) {
    // 一行則判斷是否左右相鄰
    console.log('相差：' + (index - emptyIndex))
    // 是否相鄰
    if (Math.abs(emptyIndex - index) === 1) {
      // 改變對應(yīng)moveIndex
      changeIndex()
    } else {
      console.log('不相鄰')
      return
    }
  } else {
    //  不是則判斷是否上下相鄰
    console.log('相差：' + (index - emptyIndex))
    // 是否上或者下
    if (Math.abs(index - emptyIndex) === rowLen.value) {
      // 改變對應(yīng)moveIndex
      changeIndex()
    } else {
      console.log('不相鄰')
      return
    }
  }
  
  // 聲明改變的數(shù)組moveIndex的方法
  const changeIndex = () => {
    // 步數(shù)改變
    emit('stepChange');
    // 改變對應(yīng)數(shù)組里的moveIndex 注意不是 index和 moveIndex
    ([lists.value[item.key].moveIndex, lists.value[emptyItem.key].moveIndex] = [emptyIndex, index]);
  }

// 是否都成功
  const getIsAllOk = () => {
    // 
    return lists.value.some(item => item.moveIndex !== item.key)
  }
  // // 判斷是否都成功了
  const flag = getIsAllOk()
  console.log(flag)
  if (!flag) {
    // alert('成功')
    gamePass()
  }

// 打亂數(shù)據(jù)
const mixData = () => {
  const arr = new Array(rowLen.value * rowLen.value).fill(0).map((item, index) => index)
  // console.log(arr)
  arr.sort(() => {
    return Math.random() > 0.5 ? -1 : 1
  })
  arr.forEach((item, index) => {
    lists.value[index].moveIndex = item
  })

  // 如果直接是成功的則重新來一次排序
  const flag = getIsAllOk()
  if (!flag) {
    // alert('成功')
    mixData()
  }
}

const params = route.query
// 定義行個數(shù)
rowLen.value = +params.num || 3;

// 重新獲取item寬高
cnt.value && getCntWidth()

<img v-if="hasImg" class="absolute" :src="Default" alt=""
        :style="{ width: cntWidth + 'px', maxWidth: cntWidth + 'px', height: cntHeight + 'px', left: -(item.key % rowLen) * (1 / rowLen) * cntWidth + 'px', top: -parseInt(item.key / rowLen) * (1 / rowLen) * cntHeight + 'px' }">
  
 // 是否渲染圖片
  hasImg.value = params.hasImg === '1' ? true : false;