<template>
    <div id="cards">
        <div class="card-item" v-for="card in cardsMore" :key="card.title">
            <div class="card-header">
                <div class="card-header-left">{{ card.title }}</div>
                <!-- <div class="card-header-right">{{ '0' + (i + 1) }}</div> -->
            </div>
            <dv-charts class="ring-charts" :option="card.ring" />
            <div class="card-footer">
                <div class="card-footer-item">
                    <div class="footer-title">{{ card.leftName }}</div>
                    <div class="footer-detail">
                        <dv-digital-flop :config="card.total" style="width:70%;height:35px;" />人
                    </div>
                </div>
                <div class="card-footer-item">
                    <div class="footer-title">{{ card.rightName }}</div>
                    <div class="footer-detail">
                        <dv-digital-flop :config="card.num" style="width:70%;height:35px;" />人
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
  
<script setup name='cards' lang="ts">
import { watch, nextTick, ref, Ref } from 'vue'

const props = defineProps({
    cardsData: {
        type: Object,
        default: {}
    }
})

interface dataInfo {
    reportId: string,
    reportName: string,
    overview: any,
    unit: string,
}

interface arrInfo {
    title: string,
    unit: string,
    total: number,
    leftName: string,
    rightName: string,
    leftNum: number,
    rightNum: number,
}

interface cardType {
    title: string,
    leftName: string,
    rightName: string,
    total: object,
    num: object,
    ring: object,
}

let ctData: Ref<arrInfo> = ref({}) as any
let drData: Ref<arrInfo> = ref({}) as any
let cgzData: Ref<arrInfo> = ref({}) as any
let ccData: Ref<arrInfo> = ref({}) as any
let csData: Ref<arrInfo> = ref({}) as any

const cardsInfo: Ref<Array<arrInfo>> = ref([])
const cardsMore: Ref<Array<cardType>> = ref([])

watch(() => props.cardsData, () => {
    ctData.value = {} as any
    drData.value = {} as any
    cgzData.value = {} as any
    ccData.value = {} as any
    csData.value = {} as any

    cardsMore.value = []
    cardsInfo.value = []

    nextTick(() => {
        props.cardsData.forEach((e: dataInfo) => {
            if (e.reportId.endsWith('ct')) {
                if (e.reportId.endsWith('mzct')) {
                    ctData.value.title = 'CT人数'
                    ctData.value.leftName = e.reportName
                    ctData.value.leftNum = Number(e.overview)
                } else if (e.reportId.endsWith('cyct')) {
                    ctData.value.unit = e.unit
                    ctData.value.rightName = e.reportName
                    ctData.value.rightNum = Number(e.overview)
                }
            } else if (e.reportId.endsWith('dr')) {
                if (e.reportId.endsWith('mzdr')) {
                    drData.value.title = 'DR人数'
                    drData.value.leftName = e.reportName
                    drData.value.leftNum = Number(e.overview)
                } else if (e.reportId.endsWith('cydr')) {
                    drData.value.unit = e.unit
                    drData.value.rightName = e.reportName
                    drData.value.rightNum = Number(e.overview)
                }
            } else if (e.reportId.endsWith('cgz')) {
                if (e.reportId.endsWith('mzcgz')) {
                    cgzData.value.title = '磁共振人数'
                    cgzData.value.leftName = e.reportName
                    cgzData.value.leftNum = Number(e.overview)
                } else if (e.reportId.endsWith('cycgz')) {
                    cgzData.value.unit = e.unit
                    cgzData.value.rightName = e.reportName
                    cgzData.value.rightNum = Number(e.overview)
                }
            } else if (e.reportId.endsWith('cc')) {
                if (e.reportId.endsWith('mzcc')) {
                    ccData.value.title = '彩超人数'
                    ccData.value.leftName = e.reportName
                    ccData.value.leftNum = Number(e.overview)
                } else if (e.reportId.endsWith('cycc')) {
                    ccData.value.unit = e.unit
                    ccData.value.rightName = e.reportName
                    ccData.value.rightNum = Number(e.overview)
                }
            } else if (e.reportId.endsWith('cs')) {
                if (e.reportId.endsWith('mzcs')) {
                    csData.value.title = '超声检查人数'
                    csData.value.leftName = e.reportName
                    csData.value.leftNum = Number(e.overview)
                } else if (e.reportId.endsWith('cycs')) {
                    csData.value.unit = e.unit
                    csData.value.rightName = e.reportName
                    csData.value.rightNum = Number(e.overview)
                }
            }

        })

        ctData.value.total = Number.isNaN(ctData.value.leftNum + ctData.value.rightNum) ? 0 : ctData.value.leftNum + ctData.value.rightNum
        drData.value.total = Number.isNaN(drData.value.leftNum + drData.value.rightNum) ? 0 : drData.value.leftNum + drData.value.rightNum
        cgzData.value.total = Number.isNaN(cgzData.value.leftNum + cgzData.value.rightNum) ? 0 : cgzData.value.leftNum + cgzData.value.rightNum
        ccData.value.total = Number.isNaN(ccData.value.leftNum + ccData.value.rightNum) ? 0 : ccData.value.leftNum + ccData.value.rightNum
        csData.value.total = Number.isNaN(csData.value.leftNum + csData.value.rightNum) ? 0 : csData.value.leftNum + csData.value.rightNum
        cardsInfo.value.push(ctData.value)
        cardsInfo.value.push(drData.value)
        cardsInfo.value.push(cgzData.value)
        cardsInfo.value.push(ccData.value)
        cardsInfo.value.push(csData.value)

        cardsInfo.value.forEach((f: arrInfo) => {
            let d = {
                title: f.title,
                leftName: f.leftName,
                rightName: f.rightName,
                total: {
                    number: [f.leftNum],
                    content: '{nt}',
                    textAlign: 'right',
                    style: {
                        fill: '#ea6027',
                        fontWeight: 'bold'
                    }
                },
                num: {
                    number: [f.rightNum],
                    content: '{nt}',
                    textAlign: 'right',
                    style: {
                        fill: '#26fcd8',
                        fontWeight: 'bold'
                    }
                },
                ring: {
                    series: [
                        {
                            type: 'gauge',
                            startAngle: -Math.PI / 2,
                            endAngle: Math.PI * 1.5,
                            arcLineWidth: 13,
                            radius: '80%',
                            data: [
                                { name: '总人数', value: f.total }
                            ],
                            axisLabel: {
                                show: false
                            },
                            axisTick: {
                                show: false
                            },
                            pointer: {
                                show: false
                            },
                            backgroundArc: {
                                style: {
                                    stroke: '#224590'
                                }
                            },
                            details: {
                                show: true,
                                formatter: '总人数{value}',
                                style: {
                                    fill: '#1ed3e5',
                                    fontSize: 20
                                }
                            }
                        }
                    ],
                    color: ['#03d3ec']
                }
            }

            cardsMore.value.push(d)
        })
    })
}, { deep: true, immediate: true })
</script>
  
<style lang="scss">
#cards {
    display: flex;
    justify-content: space-between;
    height: 43%;

    .card-item {
        background-color: rgba(6, 30, 93, 0.5);
        border-top: 2px solid rgba(1, 153, 209, .5);
        width: 19%;
        display: flex;
        flex-direction: column;
    }

    .card-header {
        display: flex;
        height: 20%;
        align-items: center;
        justify-content: space-between;

        .card-header-left {
            font-size: 18px;
            font-weight: bold;
            padding-left: 20px;
        }

        .card-header-right {
            padding-right: 20px;
            font-size: 40px;
            color: #03d3ec;
        }
    }

    .ring-charts {
        height: 55%;
    }

    .card-footer {
        height: 25%;
        display: flex;
        align-items: center;
        justify-content: space-around;
    }

    .card-footer-item {
        padding: 5px 10px 0px 10px;
        box-sizing: border-box;
        width: 45%;
        background-color: rgba(6, 30, 93, 0.7);
        border-radius: 3px;

        .footer-title {
            font-size: 15px;
            text-align: center;
            margin-bottom: 5px;
        }

        .footer-detail {
            font-size: 20px;
            color: #1294fb;
            display: flex;
            font-size: 18px;
            align-items: center;

            .dv-digital-flop {
                margin-right: 5px;
            }
        }
    }
}
</style>