<template>
    <div id="data-view">
        <dv-full-screen-container>
            <div class="main-header">
                <div class="mh-left">当前部门: {{ props.fullScreenFirst.dept }}</div>
                <div class="mh-middle"><span class="marquee_txt">{{ props.fullScreenFirst.title }}</span></div>
                <div class="mh-right">
                    <dv-border-box-2
                        style="width: 330px; height: 50px; line-height: 50px; text-align:center;margin-left:200px;">
                        <MyClock :show-logo="false" size="small" />
                    </dv-border-box-2>
                </div>
            </div>
            <dv-border-box-1 class="main-container">
                <div class="mc-top">
                    <Top-Left-Cmp :topLeftData="topLeftData" />
                    <Top-Middle-Cmp :dataInfo="dataInfo[7]" />
                    <Top-right-Cmp :topRightData="topRightData" />
                </div>
                <div class="mc-bottom">
                    <dv-border-box-6 class="bottom-left-container">
                        <dv-decoration-4 class="mcb-decoration-1" style="width:5px;height:45%;" />
                        <dv-decoration-4 class="mcb-decoration-2" style="width:5px;height:45%;" />
                        <Bottom-Left-Chart-1 :dataInfo="dataInfo[6]" />
                        <Bottom-Left-Chart-2 :dataInfo="dataInfo[5]" />
                    </dv-border-box-6>
                    <div class="bottom-right-container">
                        <Bottom-Right-Table-1 :dataInfo="dataInfo[0]" />
                        <Bottom-Right-Table-2 :dataInfo="dataInfo[1]" />
                        <Bottom-Right-Table-3 :dataInfo="dataInfo[2]" />
                        <Bottom-Right-Table-4 :dataInfo="dataInfo[3]" />
                        <Bottom-Right-Table-5 :dataInfo="dataInfo[4]" />
                    </div>
                </div>
            </dv-border-box-1>
        </dv-full-screen-container>
    </div>
</template>
  
<script setup name='FullScreenThirdPage' lang="ts">
import '../common/common.css'
import MyClock from '../../../components/MyClock.vue'
import TopLeftCmp from '../thirdPage/TopLeftCmp.vue'
import TopMiddleCmp from '../thirdPage/TopMiddleCmp.vue'
import TopRightCmp from '../thirdPage/TopRightCmp.vue'
import BottomLeftChart1 from '../thirdPage/BottomLeftChart1.vue'
import BottomLeftChart2 from '../thirdPage/BottomLeftChart2.vue'
import BottomRightTable1 from '../thirdPage/BottomRightTable1.vue'
import BottomRightTable2 from '../thirdPage/BottomRightTable2.vue'
import BottomRightTable3 from '../thirdPage/BottomRightTable3.vue'
import BottomRightTable4 from '../thirdPage/BottomRightTable4.vue'
import BottomRightTable5 from '../thirdPage/BottomRightTable5.vue'
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 queryTerm = reactive({
    startTime: '',
    endTime: '',
    day7Ago: '',
    day15Ago: '',
    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 dataInfo: Ref<Array<dataInfo>> = ref([])
const topLeftData: Ref<Array<dataInfo>> = ref([])
const topRightData: Ref<Array<dataInfo>> = ref([])
const query = async () => {
    dataInfo.value = []
    await selectFullScreenData(queryTerm)
        .then((res) => {
            returnData.value = res.data
            returnData.value.forEach(e => {
                if (e.reportId === 'mz_mzrs') {
                    dataInfo.value[0] = e
                } else if (e.reportId === 'cy_ryrs') {
                    dataInfo.value[1] = e
                } else if (e.reportId === 'zy_zyrs') {
                    dataInfo.value[2] = e
                } else if (e.reportId === 'mz_mzzsr') {
                    dataInfo.value[3] = e
                    topLeftData.value[0] = e
                } else if (e.reportId === 'cw_zysr') {
                    dataInfo.value[4] = e
                    topLeftData.value[1] = e
                } else if (e.reportId === 'cw_ssts') {
                    dataInfo.value[5] = e
                } else if (e.reportId === 'zy_cwsyl') {
                    dataInfo.value[6] = e
                } else if (e.reportId === 'mz_ybjjsr') {
                    topLeftData.value[2] = e
                } else if (e.reportId === 'zy_ybjjsr') {
                    topLeftData.value[3] = e
                } else if (e.reportId === 'cw_ylsr') {
                    dataInfo.value[7] = e
                    topRightData.value[0] = e
                } else if (e.reportId === 'cw_ylypf') {
                    topRightData.value[1] = e
                } else if (e.reportId === 'cw_ylclf') {
                    topRightData.value[2] = e
                } else if (e.reportId === 'cw_yljyf') {
                    topRightData.value[3] = e
                }
            })
        }).catch(() => {

        })
}

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

</script>
  
<style lang="scss" scoped>
header.el-dialog__header {
    height: 0px;
}

#data-view {
    width: 100%;
    height: 100%;
    background-color: #030409;
    color: #fff;

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

    .main-header {
        height: 80px;
        display: flex;
        justify-content: space-between;
        align-items: flex-end;

        .mh-left {
            font-size: 20px;
            color: rgb(1, 134, 187);

            a:visited {
                color: rgb(1, 134, 187);
            }
        }

        .mh-middle {
            font-size: 30px;
            box-sizing: border-box;
            word-break: break-all;
            white-space: nowrap;
            overflow: hidden;

            .marquee_txt {
                display: inline-block;
                // padding-left: 100%;
                /*渐变背景*/
                background-image: -webkit-linear-gradient(left, #3498db, #f47920 10%, #d71345 20%, #f7acbc 30%,
                        #ffd400 40%, #3498db 50%, #f47920 60%, #d71345 70%, #f7acbc 80%, #ffd400 90%, #3498db);
                color: transparent;
                /*文字填充色为透明*/
                -webkit-text-fill-color: transparent;
                -webkit-background-clip: text;
                background-clip: text;
                /*背景剪裁为文字，只将文字显示为背景*/
                background-size: 200% 100%;
                /*背景图片向水平方向扩大一倍，这样background-position才有移动与变化的空间*/
                /* 动画 */
                animation: masked-animation 3s infinite linear;
            }

            @keyframes masked-animation {
                0% {
                    background-position: 0 0;
                    // transform: translate(0, 0);
                    /*background-position 属性设置背景图像的起始位置。*/
                }

                100% {
                    background-position: -100% 0;
                    // transform: translate(-100%, 0);
                }
            }
        }

        .mh-left,
        .mh-right {
            width: 540px;
        }
    }

    .main-container {
        height: calc(100% - 80px);

        .mc-top,
        .mc-bottom {
            box-sizing: border-box;
            padding: 30px;
            display: flex;
        }

        .mc-top {
            height: 40%;
        }

        .mc-bottom {
            height: 60%;
        }

        .top-left-cmp,
        .bottom-left-container {
            width: 32%;
        }

        .top-middle-cmp,
        .top-right-cmp {
            width: 34%;
        }

        :deep(.bottom-left-container) {
            position: relative;

            .border-box-content {
                display: flex;
            }

            .mcb-decoration-1,
            .mcb-decoration-2 {
                position: absolute;
                left: 50%;
                margin-left: -2px;
            }

            .mcb-decoration-1 {
                top: 5%;
                transform: rotate(180deg);
            }

            .mcb-decoration-2 {
                top: 50%;
            }

            .bottom-left-chart-1,
            .bottom-left-chart-2 {
                width: 50%;
                height: 100%;
            }
        }

        .bottom-right-container {
            width: 68%;
            padding-left: 30px;
            box-sizing: border-box;
            display: flex;
        }
    }
}
</style>