<template>
  <component
    is="a-modal"
    v-model:visible="visible"
    :width="tool.getDevice() === 'mobile' ? '100%' : '60%'"
    title="查看详情"
    :footer="false"
  >
    <!-- 详情 start -->
    <a-form>
      <a-form-item label="分组名">
        {{ formData?.name }}
      </a-form-item>
      <a-form-item label="游戏列表">
        <div class="flex flex-wrap">
          <a-tag
            class="mr-2 mb-2"
            v-for="game in formData?.game_list_str"
            :key="game"
            color="blue"
            >{{ game }}</a-tag
          >
        </div>
      </a-form-item>
      <a-form-item label="排序">
        {{ formData?.sort }}
      </a-form-item>
    </a-form>
    <!-- 详情 end -->
  </component>
</template>

<script setup>
import { ref, reactive } from "vue";
import tool from "@/utils/tool";
import api from "../../api/center/gameGroup";

const emit = defineEmits(["success"]);

// 引用定义
const rowData = ref();
const formData = ref();
const visible = ref(false);
const loading = ref(false);

// 打开弹框
const open = async (record) => {
  rowData.value = record;
  formData.value = {};
  visible.value = true;
  await initPage();
};

// 初始化页面数据
const initPage = async () => {
  loading.value = true;
  const resp = await api.read(rowData.value?.id);
  if (resp.code === 200) {
    formData.value = resp.data;
  }
  loading.value = false;
};

defineExpose({ open });
</script>
