<script setup>
import { onMounted, ref } from 'vue'
import XPageView from '@vue2-client/base-client/components/layout/XPageView'

const xPageViewRef = ref(null)

onMounted(() => {
  xPageViewRef.value.init({
    configValue: {
      type: 'page',
      onMounted: function (curr) {
          console.warn(curr.data)
          // 设置Tab配置数据
          curr.data.tabData = {
            index: 0,
            items: [
              // 第一组配置
              {
                tabConfigs: [
                  { title: '表单列表', type: 'XFormTable', props: { serviceName: 'af-system', queryParamsName: 'crud_dictionary_manage' } },
                  { title: '新增表单', type: 'XAddNativeForm', props: { serviceName: 'af-system', configName: 'crud_dictionary_manage_add_form' } }
                ]
              },
              // 第二组配置
              {
                tabConfigs: [
                  { title: '数据列表', type: 'XFormTable', props: { serviceName: 'af-system', queryParamsName: 'crud_dictionary_manage' } },
                  { title: '编辑表单', type: 'XAddNativeForm', props: { serviceName: 'af-system', configName: 'crud_dictionary_manage_add_form' } },
                  { title: '查看记录', type: 'XFormTable', props: { serviceName: 'af-system', queryParamsName: 'crud_dictionary_manage' } }
                ]
              }
            ]
          }
          console.log('页面初始化完成，全局数据上下文已创建')
      },
      gutter: [16, 16],
      children: [
        {
          id: 'controlRow',
          type: 'row',
          gutter: 16,
          template: 'card',
          children: [
            {
              id: 'buttonContainer',
              span: '24',
              type: 'row',
              gutter: 8,
              children: [
                {
                  id: 'reloadButton',
                  span: '6',
                  type: 'a-button',
                  props: {
                    type: 'primary',
                    value: '切换Tab配置'
                  },
                  children: [
                    {
                      type: 'text',
                      text: '切换Tab配置'
                    }
                  ],
                  event: {
                    click: function (e, context) {
                      // 切换Tab配置
                      const tabData = context.data.tabData
                      tabData.index = tabData.index === 0 ? 1 : 0

                      // 获取当前配置和Tab组件
                      const currentConfig = tabData.items[tabData.index]
                      const tabComponent = context.comps.pageTab

                      if (tabComponent) {
                        // 更新Tab组件配置
                        tabComponent.$props.data = currentConfig.tabConfigs
                        console.log('Tab配置已更新，当前配置索引:', tabData.index)

                        // 更新状态文本
                        const statusText = context.comps.statusText
                        if (statusText && statusText.$el) {
                          statusText.message = `点击按钮切换不同的Tab配置，当前是第${tabData.index + 1}组配置`
                        }
                      }
                    }
                  }
                },
                {
                  id: 'statusText',
                  span: '18',
                  type: 'a-alert',
                  props: {
                    message: '点击按钮切换不同的Tab配置，当前是第1组配置',
                    type: 'success'
                  }
                }
              ]
            }
          ]
        },
        {
          id: 'row2',
          type: 'row',
          gutter: 16,
          template: 'none',
          children: [
            {
              id: 'pageTab',
              span: '24',
              type: 'XTab',
              props: {
                showTabBar: true,
                data: [
                  {
                    title: '表单列表',
                    type: 'XFormTable',
                    props: {
                      serviceName: 'af-system',
                      queryParamsName: 'crud_dictionary_manage'
                    }
                  },
                  {
                    title: '新增表单',
                    type: 'XAddNativeForm',
                    props: {
                      serviceName: 'af-system',
                      configName: 'crud_dictionary_manage_add_form'
                    }
                  }
                ],
                onChange: function (oldKey, newKey, oldTab, newTab) {
                  console.log('Tab changed:', oldKey, newKey)
                }
              }
            }
          ]
        }
      ]
    },
    serviceName: 'af-his'
  })
})
</script>

<template>
  <div>
    <x-page-view ref="xPageViewRef"></x-page-view>
  </div>
</template>
