<template>
    <div class="module">
        <ModuleCard1 title="宗教信仰统计">
            <ScrollPanel :data="scrollData" :key="keyCount" @click="onClick"/>
        </ModuleCard1>
    </div>
</template>

<script setup>
import { ref, reactive, inject, defineEmits } from 'vue';
import ModuleCard1 from './card/ModuleCard1.vue';
import ScrollPanel from '../components/scroll/ScrollPanel.vue';

const emits = defineEmits(['click']);

const axios = inject('axios');

const onClick = (params) => {
    emits('click', {
        type: 'religion',
        name: params.name
    })
}

const keyCount = ref(0)
const scrollData = reactive([])

axios.get(`app/query/sqlrelease/qaf6b78b`, {}).then(res => {
    let data = res.data;
    let total = 0;
    data.forEach((item, index) => {
        total += item.value;
    });
    data.forEach((item, index) => {
        scrollData.push({
            name: item.name,
            value: item.value,
            percent: (item.value / total * 100).toFixed(2)
        })
    })
    keyCount.value++;
}).catch(err => {
    console.error(err);
})

</script>

<style lang="stylus" scoped>

</style>