<template>
  <div>
    <el-form label-suffix=":">
        <el-form-item>
          <!-- <el-radio-group v-model="radio1">
            <el-radio :value="1">
            <template #default>
              <div class="deafault">
                <el-tooltip
                  class="box-item"
                  effect="dark"
                  content="Top Center prompts info"
                  placement="top"
                >
                <el-icon><InfoFilled /></el-icon>
                </el-tooltip>
                <span>{{$t('defaultValue')}}</span>
              </div>
            </template>
          </el-radio>
          <el-radio :label="$t('custom')" :value="2"></el-radio>
          </el-radio-group> -->
          <span style="width: 360px;">{{$t('venueTicket')}}：</span>
        </el-form-item>
        <el-form-item>
          <div class="row">
            <span style="width: 230px;">{{$t('minimumAdmission')}}：</span>
            <el-input v-model="data.low" :placeholder="$t('pleaseEnter')"></el-input>
          </div>
          <div class="row">
            <span style="width: 200px;">{{$t('maximumTicket')}}：</span>
            <el-input v-model="data.high" :placeholder="$t('pleaseEnter')"></el-input>
          </div>
        </el-form-item>
        <el-form-item>
          <span style="width: 360px;">{{$t('roomSize')}}：</span>
        </el-form-item>
        <el-form-item>
          <div class="row">
            <span style="width: 165px;">{{ $t('paracopsia') }}:</span>
            <el-input v-model="data.smallBlind" :placeholder="$t('pleaseEnter')"></el-input>
          </div>
          <div class="row">
            <span style="width: 150px;">{{ $t('macroblind') }}:</span>
            <el-input v-model="data.bigBlind" :placeholder="$t('pleaseEnter')"></el-input>
          </div>
        </el-form-item>
      </el-form>
      <div style="display: flex;justify-content: end;">
        <el-button type="primary" @click="updateGame">{{$t('save')}}</el-button>
      </div>
      <el-tabs>
        <el-tab-pane :label="$t('sessionRooms')">
        <el-form>
          <el-form-item>
            <span style="width: 360px;">{{$t('numberRooms')}}：</span>
          <!-- <el-radio-group v-model="radio1">
            <el-radio :value="1">
            <template #default>
              <div class="deafault">
                <el-tooltip
                  class="box-item"
                  effect="dark"
                  content="Top Center prompts info"
                  placement="top"
                >
                <el-icon><InfoFilled /></el-icon>
                </el-tooltip>
                <span>{{$t('defaultValue')}}</span>
              </div>
            </template>
          </el-radio>
          <el-radio :label="$t('custom')" :value="2"></el-radio>
          </el-radio-group> -->
        </el-form-item>
        <el-form-item>
          <div class="row">
            <span style="width: 160px;">{{$t('quantity')}}：</span>
            <el-input v-model="data.roomNumber" :placeholder="$t('pleaseEnter')"></el-input>
          </div>
        </el-form-item>
        </el-form>
        <div style="display: flex;justify-content: end;">
        <el-button type="primary" @click="updateRoom">{{$t('save')}}</el-button>
      </div>
      </el-tab-pane>
      </el-tabs>
  </div>
</template>

<script lang='ts' setup>
import request from '@/utils/request'
import i18n from '@/utils/i18n'
import { ElMessage } from 'element-plus'
import {ref ,defineProps, reactive, watch,defineEmits} from 'vue'
const props = defineProps({
  formData: {
    type: Object,
    required: true,
    default: () => ({
      low: '',
      high: '',
      smallBlind: '',
      bigBlind: ''
    })
  }
})
const data = reactive({ ...props.formData })
const emit = defineEmits()
watch(
  () => props.formData,
  (newVal) => {
    Object.assign(data, newVal)
  },
  { deep: true } 
)
const updateGame = async ()=>{
  const res = await request('post', 'admin/poker/updatePokerGame', Object.assign(data, {gameId:data.id}))
  if (res.code === 200) {
    ElMessage.success(i18n.global.t('successfulOperation'))
    emit('getPageData')
  }
  
}
const updateRoom = async ()=>{
  const res = await request('post', 'admin/poker/updatePokerGameRoomNumber', {gameId:data.id, number:data.roomNumber})
  if (res.code === 200) {
    ElMessage.success(i18n.global.t('successfulOperation'))
    emit('getPageData')
  }
  
}
</script>

<style lang="scss" scoped >
  .deafault{
  display: flex;
  align-items: center;
}
.row{
  display: flex;
  margin-right: 16px;
}
</style>