<template>
    <div class="module">
        <ModuleCard2 title="特殊信息类人员">
            <div class="module-card2-container">
                <div class="person-count1-container">
                    <PersonCount1 :value="totalCount" :key="keyCount"/>
                </div>
                <div class="person-count2-container">
                    <PersonCount2 class="count1" title="社区矫正" :value="sqjzCount" :key="keyCount" @click="onCount1Click(sqjzCount)"/>
                    <PersonCount2 class="count2" title="刑满释放" :value="xmsfCount" :bg-type="2" :key="keyCount" @click="onCount2Click(xmsfCount)"/>
                </div>
            </div>
        </ModuleCard2>
    </div>
</template>

<script setup>
import { ref, reactive, inject } from 'vue';
import ModuleCard2 from './card/ModuleCard2.vue';
import PersonCount1 from '../components/card/PersonCount1.vue';
import PersonCount2 from '../components/card/PersonCount2.vue';

const axios = inject('axios');
const keyCount = ref(0);

const totalCount = ref(0);
const sqjzCount = ref(0);
const xmsfCount = ref(0);
axios.get(`app/query/sqlrelease/qab48a3b`).then(res => {
    let data = res.data;
    totalCount.value = data[0].value + data[1].value;
    sqjzCount.value = data[0].value;
    xmsfCount.value = data[1].value;
    keyCount.value++;
}).catch(err => {
    console.error(err);
})

const onCount1Click = (count) => {
    console.log(count)
}

const onCount2Click = (count) => {
    console.log(count)
}

</script>

<style lang="stylus" scoped>
.module
   .module-card2-container
        display flex
        height 100%
        align-items center
        .person-count1-container
            width 160px
            display flex
            justify-content: center
        .person-count2-container
            width 200px
            height 60px
            position relative
            .count1
                cursor pointer
                position absolute
                top 0
                left 0
            .count2
                cursor pointer
                position absolute
                top 0
                left 110px
</style>