<template>
  <div>
    <el-form label-suffix=":" :model="data" ref="formRef">
        <el-form-item>
          <span style="width: 360px;">{{$t('venueTicket')}}：</span>
        </el-form-item>
        <div style="display: flex;">
          <el-form-item prop="low" :rules="[
          { required: true, message: $t('fieldRequired'), trigger: 'blur' },
          { validator: checkNumber, trigger: 'blur' }
        ]">
          <div class="row">
            <span style="color: red;">*</span><span style="width: 230px;">{{$t('minimumAdmission')}}：</span>
            <el-input v-model="data.low" :placeholder="$t('pleaseEnter')"></el-input>
          </div>
        </el-form-item>
          <el-form-item prop="high" :rules="[
            { required: true, message: $t('fieldRequired'), trigger: 'blur' },
            { validator: checkNumber, trigger: 'blur' }
          ]">
            <div class="row">
              <span style="color: red;">*</span><span style="width: 200px;">{{$t('maximumTicket')}}：</span>
              <el-input v-model="data.high" :placeholder="$t('pleaseEnter')"></el-input>
            </div>
          </el-form-item>
        </div>
        <el-form-item>
          <span style="width: 360px;">{{$t('roomSize')}}：</span>
        </el-form-item>
        <div style="display: flex;">
          <el-form-item prop="smallBlind" :rules="[
          { required: true, message: $t('fieldRequired'), trigger: 'blur' },
          { validator: checkNumber, trigger: 'blur' }
        ]">
          <div class="row">
            <span style="color: red;">*</span><span style="width: 165px;">{{ $t('paracopsia') }}:</span>
            <el-input v-model="data.smallBlind" :placeholder="$t('pleaseEnter')"></el-input>
          </div>
          </el-form-item>
          <el-form-item prop="bigBlind" :rules="[
          { required: true, message: $t('fieldRequired'), trigger: 'blur' },
          { validator: checkNumber, trigger: 'blur' }
        ]">
          <div class="row">
            <span style="color: red;">*</span><span style="width: 150px;">{{ $t('macroblind') }}:</span>
            <el-input v-model="data.bigBlind" :placeholder="$t('pleaseEnter')"></el-input>
          </div>
        </el-form-item>
        </div>
      </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 :model="data" ref="formRef2">
          <el-form-item>
           <span style="width: 360px;">{{$t('numberRooms')}}：</span>
        </el-form-item>
        <el-form-item prop="roomNumber" :rules="[
          { required: true, message: $t('fieldRequired'), trigger: 'blur' },
          { type:'number',min:0.1,message: $t('greaterThanZero'), trigger: 'blur' }
        ]">
          <div class="row">
            <span style="color: red;">*</span><span style="width: 160px;">{{$t('quantity')}}：</span>
            <el-input v-model.number="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 formRef = ref(null)
const formRef2 = ref(null)
const props = defineProps({
  formData: {
    type: Object,
    required: true,
    default: () => ({
      low: '',
      high: '',
      smallBlind: '',
      bigBlind: '',
      roomNumber:''
    })
  }
})
const data = reactive({ ...props.formData })
const emit = defineEmits()
const checkNumber = (rule, value, callback) => {
      if (!value) {
        callback(new Error(i18n.global.t('fieldRequired')));
      } else {
        const numberValue = parseFloat(value);
        if (isNaN(numberValue)) {
          callback(new Error(i18n.global.t('mustNumber')));
        } else if (numberValue <= 0) {
          callback(new Error(i18n.global.t('greaterThanZero')));
        } else if (!/^\d+(\.\d{1,2})?$/.test(value)) {
          callback(new Error(i18n.global.t('two')));
        } else {
          callback();
        }
      }
    };
watch(
  () => props.formData,
  (newVal) => {
    Object.assign(data, newVal)
  },
  { deep: true } 
)
const updateGame = async ()=>{
  formRef.value.validate(async (valid, invalidFields) => {
    if (valid) {
  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 ()=>{
  formRef2.value.validate(async (valid, invalidFields) => {
    if (valid) {
  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>