<template>
    <div class="main-content12">
        <!-- 参数 在子组件页面一样用 props接收 、ref绑定的组件示例 -->
         <!-- 默认页面展示 的初始组件 Franchise-->
        <component :is="componentsName ? componentsName : 'Franchise'" ref="dynamicComponent"
         :someProp="payinfo"  @customEvent="handleComponentEvent"/>
        <GuipButton @click="submitSave" size="superBig">->点这里测试、获取参数、调用方法</GuipButton>
    </div>

</template>
<script>
import store from '@/store';
import { mapState } from 'vuex';
import GuipSwitch from '@/components/GuipSwitch.vue';
import GuipButton from '@/components/GuipButton.vue';
import HoverButton from '@/components/HoverButton.vue'
import Franchise from '@/views/Franchise.vue'
import Franchise1 from '@/views/Franchise.vue'
import Register from '@/views/Register.vue'
export default {
    // 收款方式设置
    name: '',
    props: [''],
    components: {
        GuipSwitch,
        GuipButton,
        HoverButton,
        Franchise,
        Franchise1,
        Register,

    },
    data() {
        return {
            // AUTH
            token: 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpYXQiOjE3NTI2NDY1NDUsIm5iZiI6MTc1MjY0NjU0NSwiZXhwIjoxNzU1MjM4NTQ1LCJ1c2VyIjoic3VidXNlciIsImxvZ2luX3R5cGUiOjAsImFpZCI6IjEifQ.G-Is-x9qPMiV_urOlDPQVRjfAIozySxL5EK2k82d46k',
            payinfo: [
                {
                    type: 'a',
                    name: '传递的参数'
                }
            ],
            payType: -1,
            payStatus: -1,
            paySvg: '',
            confirmText: '保存',
        }
    },
    computed: {
        ...mapState(['pageTitle', 'componentsName']), // 从Vuex映射showSidebar状态到组件的计算属性中
    },
    created() {
        store.commit('SET_CUSTOMIZE', true);
        store.commit('SET_SLIDER_MENU', 'demoPageData');
    },
    mounted() {
        store.commit('SET_PAGETITLE', '支付授权');
    },
    methods: {
        handleComponentEvent(payload) {
            console.log('收到子组件事件:', payload);
        },
        submitSave() {
            // 逻辑示例
            // 获取动态组件实例
            const componentInstance = this.$refs.dynamicComponent;
            console.log('当前组件实例:', componentInstance);

            // 调用组件方法（如果存在）
            if (componentInstance) {
                console.log('获取到啦');
                // 调用方法或者获取参数
                componentInstance.showDomainModal && componentInstance.showDomainModal()
            }
        },
    }
}
</script>
<style lang="scss" scoped>
a {
    text-decoration: none;
    color: #006AFF;
}

.gray {
    color: #626573 !important;
}

.mt-18 {
    margin-top: 18px;
}

.ml-23 {
    margin-left: 23px;
}

.justify-content-space-between {
    justify-content: space-between;
}

.beforeNotice {

    h4 {
        margin: 0;
        gap: 8px;
        justify-content: space-between;
    }

    margin-bottom: 18px;
    text-align: left;
    box-sizing: border-box;
    padding: 20px 14px;
    border-radius: 4px;
    /* middle/middle_grey_0 */
    background: #FAFAFA;

    div {
        margin-top: 2px;
        padding-left: 23px;

        p {
            color: #8A9099;
        }

    }

    p {
        color: #1E2226;

        i {
            font-style: normal;
        }

        &:last-child {
            display: flex;
            align-items: stretch;

            b {
                font-weight: normal;
                color: #8A9099;
                display: inline-flex;

                img {
                    margin-left: 4px;
                }
            }
        }
    }

    a {
        text-decoration: none;
        color: #006AFF;
        margin-right: 10px;

        img {
            margin-left: 5px;
            margin-right: 5px;
        }
    }
}


.siteMessage {
    border-radius: 4px;
    transition: all .5s;
    border: 1px solid transparent;
}

.siteMessage h3 {
    font-size: 14px;
    font-weight: bold;
    line-height: normal;
    letter-spacing: 0.08em;
    color: #1E2226;
}

.site-setting-wrap {
    width: 100%;
}
</style>