<template>
  <div class="wrap">
    <div class="info">
      用户: {{game.userInfo.username}}, 余额: {{game.userInfo.balance}}
      <div class="ctx_btn">
        <el-button @click="createRoom">创建房间</el-button>
        <el-button @click="leaveRoom">退出房间</el-button>
        <el-button @click="connect">连接</el-button>
      </div>
    </div>
    <div class="main">
      <div class="room">
        <el-tabs v-model="editableTabsValue" type="card">
          <el-tab-pane :key="item.name" v-for="(item, index) in editableTabs" :label="item.title" :name="item.name">
            <div class="content">
              <el-form :label-position="labelPosition" label-width="95px">
                <el-form-item v-for="room in game.normalRoomList" :label=formatRoomName(room)>
                  <el-radio-group @change="joinRoom">
                    <el-radio-button label="椅子1"></el-radio-button>
                    <el-radio-button label="椅子2"></el-radio-button>
                    <el-radio-button label="椅子3"></el-radio-button>
                    <el-radio-button label="椅子4"></el-radio-button>
                    <el-radio-button label="椅子5"></el-radio-button>
                  </el-radio-group>
                </el-form-item>
              </el-form>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
      <div class="game">
        <div class="card_list">
          <div class="card">12</div>
          <div class="card">2</div>
          <div class="card">3</div>
          <div class="card">4</div>
          <div class="card">5</div>
        </div>
        <div class="btn_list">
          <el-button type="primary" @click="ready">准备</el-button>
          <el-button type="success" @click="unready">取消准备</el-button>
          <el-button type="info" @click="chooseMaster">抢庄</el-button>
          <el-button type="warning" @click="chooseMul">选倍数</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

import game from '../game/game'

export default {
  data() {
    return {
      editableTabsValue: '2',
      editableTabs: [{
        title: '积分房',
        name: '1',
        content: 'Tab 1 content'
      }, {
        title: '收费房',
        name: '2',
        content: 'Tab 2 content'
      }],
      tabIndex: 2,
      labelPosition: 'right',
      game: {
        userInfo: {
          username: '',
          balance: 0,
        },
        freeRoomList: [],
        normalRoomList: [],
      }
    }
  },
  methods: {
    formatRoomName(roomItem) {
      return roomItem.Name + "(底注" + roomItem.BaseAmount + ")"
    },
    connect(){
      var event = (eventType, msg)=>{
        console.log("event:", msg)
        if(eventType == 4) {
          this.game.userInfo.balance = msg.Balance
          this.game.userInfo.username = msg.Name

          var roomList = []
          for(let i=0; i<msg.RoomList.length; i++) {
            let roomItem = msg.RoomList[i]
            if(roomItem.RoomType == 0) {
              continue
            }

            roomList.push(roomItem)
          }

          this.game.normalRoomList = roomList
        }
      }

      game.connect(event)

      console.log("connect...")
    },
    joinRoom(label) {
      var roomID = 1
      var chairID = getQueryVariable("chair") || "0"
      chairID = parseInt(chairID)

      // if(label == "椅子1") chairID = 0
      // if(label == "椅子2") chairID = 1
      // if(label == "椅子3") chairID = 2
      // if(label == "椅子4") chairID = 3
      // if(label == "椅子5") chairID = 4
      
      game.joinRoom(roomID, chairID)
      console.log("join room...", label)

      return false
    },
    leaveRoom() {
      game.leaveRoom()
      console.log("leave room...")
    },
    createRoom() {
      game.createRoom()
      console.log("create room...")
    },
    ready(){
      game.ready()
      console.log("ready...")
    },
    unready(){
      game.unready()
      console.log("unready...")
    },
    chooseMaster(){
      game.chooseMaster()
      console.log("chooseMaster...")
    },
    chooseMul(){
      game.chooseMul()
      console.log("chooseMul...")
    },
    openCard(){
      game.openCard()
      console.log("openCard...")
    }
  }
}
</script>
<style>
body {
  padding: 0px;
  margin: 0px;
}

.wrap {
  width: 1450px;
  margin: 15px auto;

  padding: 0px;
}

.main {
  clear: both;
}

.info {
  width: 100%;
  border: 1px solid #ccc;
  text-align: left;
  padding: 15px;
  margin-bottom: 15px;
}

.room {
  float: left;
  min-height: 400px;
  padding: 15px;
  width: 500px;
  border: 1px solid #ccc;
}

.el-form-item {
  width: 410px;
}

.game {
  width: 900px;
  padding: 15px;
  min-height: 400px;
  margin-left: 550px;
  border: 1px solid #ccc;
}

.game .btn_list {
  margin-top: 320px;
}

.card_list {
  width: 760px;
  margin: 15px auto;
}

.card {
  float: left;
  width: 120px;
  height: 120px;
  margin: 15px;
  margin-top: 110px;
  line-height: 300px;
  text-align: center;
  border: 1px solid #ccc;
}

.ctx_btn {
  float: right
}
</style>