<template>
  <Group style="height: 100%;">
    <el-tabs>
      <el-tab-pane :label="$t('primaryField')">
        <Ruleform @getPageData="getPageData" :formData="pageData[0]" />
      </el-tab-pane>
      <el-tab-pane :label="$t('intermediateField1')">
        <Ruleform @getPageData="getPageData" :formData="pageData[1]" />
      </el-tab-pane>
      <el-tab-pane :label="$t('intermediateField2')">
        <Ruleform @getPageData="getPageData" :formData="pageData[2]" />
      </el-tab-pane>
      <el-tab-pane :label="$t('customRoom')">
        <el-form :model="formData">
          <el-form-item>
            <span style="width: 360px;">{{$t('customizeRoom')}}：</span>
          </el-form-item>
          <el-form-item>
            <div class="row">
              <span style="width: 280px;">{{$t('customizeRoomRates')}}：</span>
              <el-input v-model="formData.roomNumber" :placeholder="$t('pleaseEnter')" />
            </div>
          </el-form-item>
        </el-form>
      </el-tab-pane>
    </el-tabs>
  </Group>
</template>

<script setup name="user">
import { ref, reactive, onMounted } from 'vue';
import Group from '@/components/group.vue';
import Ruleform from '@/components/ruleform.vue';
import request from '@/utils/request';

const pageData = ref([{}, {}, {}]);
const formData = reactive({
  roomNumber: ''
});

const getPageData = async () => {
  try {
    const res = await request('get', '/admin/poker/getPokerGameInfoList');
    if (res.code === 200) {
      pageData.value = res.data;
    } 
  } catch (error) {
    console.error('error:', error);
  }
};

onMounted(() => {
  getPageData();
});
</script>

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