<template>
    <div class="setion">
        <p class="chartTitle"><span class="titleIcon"></span> {{ title }}</p>
        <div class="typeContent">
            <el-card style="width: 150px; margin-bottom: 20px; text-align: center">
                <div style="font-size: 30px; font-weight: bold">99</div>
                <div style="padding: 14px">
                    <span>数值</span>
                    <div class="bottom clearfix">
                        <time class="time">17:49</time>
                        <el-button type="text" class="button">操作按钮</el-button>
                    </div>
                </div>
            </el-card>
            <div v-if="pageType == '断面'" style="margin-bottom: 20px; border: 1px solid #e4e7ed">
                <tableShow :msg="data" :type="triggerType" />
            </div>
            <div v-if="pageType == '区域'">
                <regionTable :msg="data" :type="triggerType" />
            </div>
            <div class="border">
                <detailDialog />
                <lineChart :pageType="pageType" :list="data" :status="triggerType" :title="title"></lineChart>

                <div class="border">
                    <detailDialog />
                    <avgChart :pageType="pageType" :list="data" :status="triggerType" :title="title" />
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import lineChart from '../chart/lineChart.vue';
import barChart from '../chart/barChart.vue';
import tableShow from '../chart/tableShow.vue';
import detailDialog from '../chart/detailDialog.vue';
import thermalChart from '../chart/thermalChart.vue';
import regionTable from '../chart/regionTable.vue';
import avgChart from '../chart/avgChart.vue';
export default {
    name: 'lineUpChart', //排队数组件
    components: {
        lineChart,
        barChart,
        tableShow,
        detailDialog,
        thermalChart,
        regionTable,
        avgChart
    },
    props: ['pageType', 'triggerType', 'data'],
    data() {
        return {
            title: '排队数组件'
        };
    },
    methods: {},
    mounted() {}
};
</script>
<style scoped>
.typeContent {
    box-sizing: border-box;
}

.border {
    width: 100%;
    margin-bottom: 20px;
    position: relative;
}
</style>