<template>
    <div id="data-view">
        <dv-full-screen-container>
            <top-header :param="params" />
            <div class="main-content">
                <digital-flop :digitalFlop="digitalFlopData" />
                <div class="block-left-right-content">
                    <dv-border-box8 class="left-chart-container">
                        <ranking-board :rankingMzjc="rankingMzjc" />
                    </dv-border-box8>
                    <div class="block-top-bottom-content">
                        <div class="block-top-content">
                            <rose-chart :roseZyjc="roseZyjc" />
                            <!-- <water-level-chart :waterChart="waterChartData" /> -->
                            <scroll-board :scrollMzCT="scrollMzCT" />
                            <scroll-board-else :scrollCyCT="scrollCyCT" />
                        </div>
                        <cards :cardsData="cardsData" />
                    </div>
                </div>
            </div>
        </dv-full-screen-container>
    </div>
</template>
  
<script setup name='fullScreenSecondPage' lang="ts">
import topHeader from '../secondPage/topHeader.vue'
import digitalFlop from '../secondPage/digitalFlop.vue'
import rankingBoard from '../secondPage/rankingBoard.vue'
import roseChart from '../secondPage/roseChart.vue'
// import waterLevelChart from '../secondPage/waterLevelChart.vue'
import scrollBoard from '../secondPage/scrollBoard.vue'
import scrollBoardElse from '../secondPage/scrollBoardElse.vue'
import cards from '../secondPage/cards.vue'
import '../common/common.css'
import { selectFullScreenData } from '../../../api/tj-report/full-screen.js'
import { reactive, onMounted, Ref, ref, nextTick } from 'vue'

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

const params = ref({})
params.value = props.fullScreenFirst

const queryTerm = reactive({
    startTime: '',
    endTime: '',
    type: '',
    reportType: '',
});

interface dataInfo {
    reportId: string,
    reportName: string,
    overview: any,
    unit: string,
    dataList: Array<object>,
}

let returnData: Ref<Array<dataInfo>> = ref([])

onMounted(() => {
    queryTerm.startTime = props.fullScreenFirst.startTime
    queryTerm.endTime = props.fullScreenFirst.endTime
    queryTerm.type = props.fullScreenFirst.type

    nextTick(() => {
        query()
    })

})

const digitalFlopData: Ref<Array<dataInfo>> = ref([])
const dataInfoData: Ref<Array<dataInfo>> = ref([])
const cardsData: Ref<Array<dataInfo>> = ref([])
const scrollMzCT: Ref<dataInfo> = ref({}) as any
const scrollCyCT: Ref<dataInfo> = ref({}) as any
const rankingMzjc: Ref<dataInfo> = ref({}) as any
const roseZyjc: Ref<dataInfo> = ref({}) as any
const query = async () => {
    dataInfoData.value = []
    digitalFlopData.value = []
    await selectFullScreenData(queryTerm)
        .then((res) => {
            returnData.value = res.data
            returnData.value.forEach(e => {
                if (e.reportId === 'zy_zyrs') {
                    dataInfoData.value[0] = e
                } else if (e.reportId.startsWith('yj_')) {
                    if (e.reportId.endsWith('mzct')) {
                        scrollMzCT.value = e
                    } else if (e.reportId.endsWith('cyct')) {
                        scrollCyCT.value = e
                    } else if (e.reportId === 'yj_cyjc') {
                        roseZyjc.value = e
                    } else if (e.reportId === 'yj_mzjc') {
                        rankingMzjc.value = e
                    }
                    cardsData.value.push(e)
                } else {
                    digitalFlopData.value.push(e)
                }
            })
        }).catch(() => {

        })
}

let wd = window.setInterval(() => {
    clearInterval(wd)
    query()
}, 60000)

</script>
  
<style lang="scss" scoped>
#data-view {
    width: 100%;
    height: 100%;
    background-color: #030409;
    color: #fff;

    #dv-full-screen-container {
        background-image: url('../img/bg.png');
        background-size: 100% 100%;
        box-shadow: 0 0 3px blue;
        display: flex;
        flex-direction: column;
    }

    .main-content {
        flex: 1;
        display: flex;
        flex-direction: column;
    }

    .block-left-right-content {
        flex: 1;
        display: flex;
        margin-top: 20px;
    }

    .left-chart-container {
        width: 20%;
        height: 800px;
        padding: 10px;
        display: flex;
        box-sizing: border-box;

        :deep(.border-box-content) {
            flex-direction: column;
        }
    }

    .block-top-bottom-content {
        flex: 1;
        display: flex;
        flex-direction: column;
        box-sizing: border-box;
        padding-left: 20px;
    }

    .block-top-content {
        height: 55%;
        display: flex;
        flex-grow: 0;
        box-sizing: border-box;
        padding-bottom: 20px;
    }
}
</style>