<script setup lang="ts">
import RuleTemplate from '../../RuleTemplate.vue'
import { useGroup } from '../../../composables/useAllData'
import { getGroupMemberCount } from '@/api/flow'

const props = defineProps<{ node: any }>()

const { getGroup } = useGroup()

const config = computed(() => {
  return props.node.data.teacher || {}
})

const group = computed(() => getGroup(config.value.group_id))

const groupCount = ref()
function fetchInfo() {
  getGroupMemberCount({ group_id: config.value.group_id }).then(res => {
    groupCount.value = res.data.count
  })
}

onMounted(fetchInfo)

function paramsParse(data: any) {
  return { group_id: data.group_id }
}
</script>

<template>
  <RuleTemplate :node="node" step :paramsParse="paramsParse">
    <template #header-answer>
      <span class="is-answer">{{ group?.name }}</span>
    </template>
    <template #step1-append>
      <el-form-item label="当前群组用户人数">
        <span class="rule-num">{{ groupCount }}</span>
      </el-form-item>
    </template>
    <template #step-header-append>
      <p>当前群组用户人数：{{ groupCount }}</p>
    </template>
  </RuleTemplate>
</template>
