//初始座位數(shù)組
  initSeatArray: function(){
  let seatArray = Array(this.seatRow).fill(0).map(()=>Array(this.seatCol).fill(0));
  this.seatArray = seatArray;
  //均分父容器寬度作為座位的寬度
  this.seatSize = this.$refs.innerSeatWrapper
      ? parseInt(parseInt(window.getComputedStyle(this.$refs.innerSeatWrapper).width,10) / this.seatCol,10)
      :0;
  //初始化不是座位的地方
  this.initNonSeatPlace();
  },
  
  //初始化不是座位的地方
  initNonSeatPlace: function(){
  for(let i=0;i<9;i++){
   this.seatArray[i][0]=-1;
  }
  for(let i=0;i<8;i++){
   this.seatArray[i][this.seatArray[0].length-1]=-1;
   this.seatArray[i][this.seatArray[0].length-2]=-1;
  }
  for(let i=0;i<9;i++){
   this.seatArray[i][this.seatArray[0].length-3]=-1;
  }
  for(let i=0;i<this.seatArray[0].length;i++){
   this.seatArray[2][i]=-1;
  }
  }

<div class="inner-seat-wrapper" ref="innerSeatWrapper" >
  <div v-for="row in seatRow">
  <!--這里的v-if很重要，如果沒有則會(huì)導(dǎo)致報(bào)錯(cuò)，因?yàn)閟eatArray初始狀態(tài)為空-->
  <div v-for="col in seatCol"
    v-if="seatArray.length>0"
    class="seat"
    :style="{width:seatSize+'px',height:seatSize+'px'}">
   <div class="inner-seat"
    @click="handleChooseSeat(row-1,col-1)"
    v-if="seatArray[row-1][col-1]!==-1"
    :class="seatArray[row-1][col-1]===2?'bought-seat':(seatArray[row-1][col-1]===1?'selected-seat':'unselected-seat')">
   </div>
  </div>
  </div>
</div>

//處理座位選擇邏輯
 handleChooseSeat: function(row,col){
 let seatValue = this.seatArray[row][col];
 let newArray = this.seatArray;
  //如果是已購座位，直接返回
  if(seatValue===2) return
  //如果是已選座位點(diǎn)擊后變未選
  if(seatValue === 1){
   newArray[row][col]=0
  }else if(seatValue === 0){
   newArray[row][col]=1
  }
  //必須整體更新二維數(shù)組，Vue無法檢測(cè)到數(shù)組某一項(xiàng)更新,必須slice復(fù)制一個(gè)數(shù)組才行
  this.seatArray = newArray.slice();
 },

//推薦選座,參數(shù)是推薦座位數(shù)目
 smartChoose: function(num){
  //找到影院座位水平垂直中間位置的后一排
  let rowStart = parseInt((this.seatRow-1)/2,10)+1;
  //先從中間排往后排搜索
  let backResult = this.searchSeatByDirection(rowStart,this.seatRow-1,num);
  if(backResult.length>0){
   this.chooseSeat(backResult);
   return
  }
  //再從中間排往前排搜索
  let forwardResult = this.searchSeatByDirection(rowStart-1,0,num);
  if(forwardResult.length>0) {
   this.chooseSeat(forwardResult);
   return
  }
  //提示用戶無合法位置可選
  alert('無合法位置可選!')
 },

//向前后某個(gè)方向進(jìn)行搜索的函數(shù),參數(shù)是起始行，終止行,推薦座位個(gè)數(shù)
 searchSeatByDirection: function(fromRow,toRow,num){
 /*
  * 推薦座位規(guī)則
  * (1)初始狀態(tài)從座位行數(shù)的一半處的后一排的中間開始向左右分別搜索，取離中間最近的，如果滿足條件，
  * 記錄下該結(jié)果離座位中軸線的距離，后排搜索完成后取距離最小的那個(gè)結(jié)果作為最終結(jié)果，優(yōu)先向后排進(jìn)行搜索，
  * 后排都沒有才往前排搜，前排邏輯同上
  * (2)只考慮并排且連續(xù)的座位，不能不在一排或者一排中間有分隔
  * */

 /*
  * 保存當(dāng)前方向搜索結(jié)果的數(shù)組,元素是對(duì)象,result是結(jié)果數(shù)組，offset代表與中軸線的偏移距離
  * {
  * result:Array([x,y])
  * offset:Number
  * }
  */
 let currentDirectionSearchResult = [];
 //確定行數(shù)的大小關(guān)系，從小到大進(jìn)行遍歷
 let largeRow = fromRow>toRow?fromRow:toRow,
  smallRow = fromRow>toRow?toRow:fromRow;
 //逐行搜索
 for(let i=smallRow;i<=largeRow;i++){
  //每一排的搜索,找出該排里中軸線最近的一組座位
  let tempRowResult = [],
   minDistanceToMidLine=Infinity;
  for(let j=0;j<=this.seatCol - num;j++){
  //如果有合法位置
  if(this.checkRowSeatContinusAndEmpty(i,j,j+num-1)){
   //計(jì)算該組位置距離中軸線的距離:該組位置的中間位置到中軸線的距離
   let resultMidPos = parseInt((j+num/2),10);
   let distance = Math.abs(parseInt(this.seatCol/2) - resultMidPos);
   //如果距離較短則更新
   if(distance<minDistanceToMidLine){
   minDistanceToMidLine = distance;
   //該行的最終結(jié)果
   tempRowResult = this.generateRowResult(i,j,j+num-1)
   }
  }
  }
  //保存該行的最終結(jié)果
  currentDirectionSearchResult.push({
  result:tempRowResult,
  offset:minDistanceToMidLine
  })
 }

 //處理后排的搜索結(jié)果:找到距離中軸線最短的一個(gè)
 //注意這里的邏輯需要區(qū)分前后排，對(duì)于后排是從前往后，前排則是從后往前找
 let isBackDir = fromRow < toRow;
 let finalReuslt = [],minDistanceToMid = Infinity;
 if(isBackDir){
  //后排情況,從前往后
  currentDirectionSearchResult.forEach((item)=>{
  if(item.offset < minDistanceToMid){
   finalReuslt = item.result;
   minDistanceToMid = item.offset;
  }
  });
 }else{
  //前排情況，從后往前找
  currentDirectionSearchResult.reverse().forEach((item)=>{
  if(item.offset < minDistanceToMid){
   finalReuslt = item.result;
   minDistanceToMid = item.offset;
  }
  })
 }
 //直接返回結(jié)果
 return finalReuslt
 },