const appModule = {
    template: `
        <div class="home-app-module">
            <el-card shadow="never">
                <div class="card-title" slot="header">平台入口</div>
                <div style="display: flex;gap: 20px;overflow-x: auto">
                  <template v-for="item in entranceModules">
                    <div :key="item.id" class="v-item-handle" @click="enterEntranceModules(item)" 
                    :class="item.id===selectEntranceModuleId?'appModuleCard':''">
                      <el-image :src="CREATE_PREVIEW_URL(item.icon[0].id)" style="height: 50px;width: 50px;border-radius: 50%"></el-image>
                      <span class="v-item-handle-label">
                        {{ item.moduleName }}
                      </span>
                    </div>
                  </template>
                </div>
            </el-card>
        </div> 
    `,
    store,
    computed: {
        entranceModules() {
            return this.$store.state.moduleMenus
        },
        selectEntranceModuleId(){
            return this.$store.state.activeMenuModuleId || null
        }
    },
    methods: {
        async enterEntranceModules(item) {
            this.$store.commit('setActiveMenuModuleId', item.id)
        }
    }
}