<template>
    <div ref="box" class="box">
        <el-empty v-show="componentList.length == 0" :image-size="400"></el-empty>
        <!-- <p class="title" style="margin-bottom: 20px;font-size: 20px;font-weight: 400;">数据看板</p> -->
        <el-scrollbar class="scrollbar">
            <div class="dataBoard" ref='dataBoard' v-if="activeName == 'second'">
                <!-- 断面 -->
                <div class="plate1" ref="plate1">
                    <div :class="sectionData.length <= 2 ? 'sectionBox' : 'section'" ref="section"
                        v-for="(s, i) in sectionData" :key="s.analogAreaComponentId">
                        <template>
                            <div ref="sectionContent">
                                <div>
                                    <p class="board-title">
                                        <span>{{ s.title }}</span>
                                    </p>
                                    <span class="downPull1" data-num="1" @click="sectionHandle(i)"></span>
                                </div>
                                <div v-for="o in s.children" :key="o.analogAreaComponentId">

                                    <OD v-if="o.componentName.includes('OD')" :pageType="o.graphicType" triggerType="触发"
                                        :componentName="o.componentName" :echartArr="o.presentationForm"
                                        :dataArr="o.trigger" :title="o.componentName.split('_')[0]"
                                        :chartName='o.combinationName' />
                                    <typeChart v-else :pageType="o.graphicType" :triggerType="o.timeMode"
                                        :componentName="o.componentName"
                                        :dataArr="o.timeMode == '触发' ? o.trigger : o.cycleTimeData"
                                        :echartArr="o.presentationForm" :title="o.componentName.split('_')[0]"
                                        :chartName='o.combinationName'
                                        :typeValue="o.timeMode == '触发' ? typeValue : typeCycleTimeData" />
                                </div>
                                <!-- :data="triggerList.length != 0 ? triggerList : tableData" -->
                            </div>
                        </template>
                    </div>
                </div>
            </div>
        </el-scrollbar>
        <!-- 详情框 -->
</div>
</template>
 <!-- :data="triggerList.length != 0 ? tripHandle(o) : tableData" -->
<script>
import typeChart from '../../components/target/typeChart.vue';
import OD from '../../components/target/OD.vue';
// import {mapMutation} from 'vuex'
import { getComponentSection } from '../../api/index';
export default {
    components: {
        typeChart,
        OD
    },
    props: {
        activeName: {
            type: String
        },
        triggerData: {
            type: Array,
            default() {
                return [];
            }
        },
        // 触发数据
        triggerListData: {
            type: Array,
            default() {
                return [];
            }
        },
        // 周期时刻数据
        cycleTimeData: {
            type: Array,
            default() {
                return [];
            }
        },
        //周期统计
        cycleStatistics: {
            type: Array,
            default() {
                return [];
            }
        },
    },
    data() {
        return {
            title1: '01断面',
            title2: '01区域',
            dialogVisible: false,
            // 触发数据断面与区域相同
            tableData: [
                {
                    steam_id: 0,
                    time: '2022-10-01 09:15:11.156',
                    obj_id: 125,
                    type: 'Person',
                    plate: '苏A0131M',
                    speed: 35.2,
                    event: 'in',
                    lane: 0,
                    headWay: 19
                },
                {
                    steam_id: 0,
                    time: '2022-10-01 09:15:12.156',
                    obj_id: 125,
                    type: 'Motor Vehicle',
                    plate: '苏A0131M',
                    speed: 70.2,
                    event: 'in',
                    lane: 0,
                    headWay: 6.5
                },
                {
                    steam_id: 0,
                    time: '2022-10-01 09:15:13.156',
                    obj_id: 125,
                    type: 'Non_Motor',
                    plate: '苏A0131M',
                    speed: 60.2,
                    event: 'in',
                    lane: 0,
                    headWay: 10.5
                },
                {
                    steam_id: 0,
                    time: '2022-10-01 09:15:14.156',
                    obj_id: 125,
                    type: 'Non_Motor',
                    plate: '苏A0131M',
                    speed: 60.2,
                    event: 'in',
                    lane: 0,
                    headWay: 2.5
                },
                {
                    steam_id: 0,
                    time: '2022-10-01 09:15:15.156',
                    obj_id: 125,
                    type: 'Motor Vehicle',
                    plate: '苏A0131M',
                    speed: 60.2,
                    event: 'in',
                    lane: 0,
                    headWay: 11.5
                }
            ],

            // 断面的周期统计
            sectionList: [
                {
                    steam_id: '0',
                    gate_id: 'Gate_1',
                    name: '西进口',
                    timestamp: '2022-10-1',
                    interval: '53',
                    type: 'truck',
                    in_flow: 90,
                    out_flow: 120,
                    flow: 147,
                    in_spd: 20.1,
                    out_spd: 30.6,
                    speed: 30
                },
                {
                    steam_id: '0',
                    gate_id: 'Gate_1',
                    name: '西进口',
                    timestamp: '2022-10-1',
                    interval: '53',
                    type: 'truck',
                    in_flow: 90,
                    out_flow: 120,
                    flow: 123,
                    in_spd: 20.1,
                    out_spd: 30.6,
                    speed: 40
                },
                {
                    steam_id: '0',
                    gate_id: 'Gate_1',
                    name: '西进口',
                    timestamp: '2022-10-1',
                    interval: '53',
                    type: 'truck',
                    in_flow: 90,
                    out_flow: 80,
                    flow: 210,
                    in_spd: 20.1,
                    out_spd: 30.6,
                    speed: 50
                },
                {
                    steam_id: '0',
                    gate_id: 'Gate_1',
                    name: '西进口',
                    timestamp: '2022-10-1',
                    interval: '53',
                    type: 'truck',
                    in_flow: 90,
                    out_flow: 120,
                    flow: 210,
                    in_spd: 20.1,
                    out_spd: 30.6,
                    speed: 77
                }
            ],
            // 区域的周期时刻
            regionList1: [
                {
                    zone_id: '0',
                    gate_id: 'Zone_1',
                    name: '西进口左1',
                    timestamp: '2022-10-1',
                    frame: 1000,
                    type: 'car',
                    n_stay: 3,
                    n_queue: 2,
                    occ: 1,
                    speed: 5.6
                },
                {
                    zone_id: '0',
                    gate_id: 'Zone_1',
                    name: '西进口左1',
                    timestamp: '2022-10-1',
                    frame: 1000,
                    type: 'car',
                    n_stay: 3,
                    n_queue: 2,
                    occ: 1,
                    speed: 12.6
                },
                {
                    zone_id: '0',
                    gate_id: 'Zone_1',
                    name: '西进口左1',
                    timestamp: '2022-10-1',
                    frame: 1000,
                    type: 'car',
                    n_stay: 3,
                    n_queue: 2,
                    occ: 1,
                    speed: 10
                },
                {
                    zone_id: '0',
                    gate_id: 'Zone_1',
                    name: '西进口左1',
                    timestamp: '2022-10-1',
                    frame: 1000,
                    type: 'car',
                    n_stay: 3,
                    n_queue: 2,
                    occ: 1,
                    speed: 6
                }
            ],
            // 区域的周期统计
            regionList2: [
                {
                    zone_id: '0',
                    gate_id: 'Zone_1',
                    name: '西进口左1',
                    timestamp: '2022-10-1',
                    type: 'car',
                    enter_flow: 1,
                    leave_flow: 3,
                    ave_stay: 3.2,
                    ave_queue: 2.9,
                    ave_occ: 0.56,
                    ave_delay: 8,
                    ave_speed: 12
                },
                {
                    zone_id: '0',
                    gate_id: 'Zone_1',
                    name: '西进口左1',
                    timestamp: '2022-10-1',
                    type: 'car',
                    enter_flow: 1,
                    leave_flow: 3,
                    ave_stay: 3.2,
                    ave_queue: 2.9,
                    ave_occ: 0.56,
                    ave_delay: 7,
                    ave_speed: 22
                },
                {
                    zone_id: '0',
                    gate_id: 'Zone_1',
                    name: '西进口左1',
                    timestamp: '2022-10-1',
                    type: 'car',
                    enter_flow: 1,
                    leave_flow: 3,
                    ave_stay: 3.2,
                    ave_queue: 2.9,
                    ave_occ: 0.56,
                    ave_delay: 17,
                    ave_speed: 12
                }
            ],



            idVal: '',
            //组件数组
            componentList: [],
            // 触发数据数组
            triggerList: [],

            sectionData: [],



            // 单个区域或者断面的表格触发数据
            tableList: [],


            // 路线数据
            headWay: [],


            tripData: [],

            sectionArr: [],

            //触发的类型数值看板显示
            typeValue: {},
            // 周期时刻的数值看板展示
            typeCycleTimeData: {}
        };
    },
    created() {
        this.idVal = this.$route.query.id;
        getComponentSection({ VideoId: this.idVal }).then((res) => {
            if (res.data.code == 200) {
                console.log(res.data.data, '11111111111111111');
                this.componentList = res.data.data
                this.siftData()
                // 处理获取过来的数据
                // this.componentList.forEach((val) => {
                //     this.sectionArr.push(val.combinationName);
                //     this.sectionArr = Array.from(new Set(this.sectionArr));
                // });
                // this.sectionData = this.sectionArr.map((item) => {
                //     item = { title: item, children: [] };
                //     this.componentList.forEach((val) => {
                //         if (item.title == val.combinationName) {
                //             item.children.push(val);
                //         }
                //     });
                //     return item;
                // });
                console.log(this.sectionData, '455');
            } else if (res.data.code == 404) {
            }
        });

    },
    methods: {

        siftData() {
            this.componentList.forEach((val) => {
                this.sectionArr.push(val.combinationName);
                this.sectionArr = Array.from(new Set(this.sectionArr));
            });
            this.sectionData = this.sectionArr.map((item) => {
                item = { title: item, children: [] };
                this.componentList.forEach((val) => {
                    if (item.title == val.combinationName) {
                        item.children.push(val);
                    }
                });
                return item;
            });
        },
        // 组件图标点击下拉事件
        sectionHandle(i) {
            let sections = document.querySelectorAll('.section');
            let sectionBox = document.querySelectorAll('.sectionBox');
            let downPulls1 = document.querySelectorAll('.downPull1');
            // 断面的小图标
            downPulls1[i].dataset.num++;

            if (downPulls1[i].dataset.num % 2 == 0) {
                downPulls1[i].style.cssText = 'transform: rotate(180deg);transition: all 0.5s linear;';
                sections[i].style.height = 'auto';
                if (sectionBox[i] != undefined) {
                    sectionBox[i].style.height = 'auto';
                }

            } else {
                downPulls1[i].style.cssText = 'transition: all 0.5s linear;';
                sections[i].style.height = '500px';
                if (sectionBox[i] != undefined) {
                    sectionBox[i].style.height = '48vh'
                }


            }
        },


        // 触发数据的类型数值

    },
    mounted() {
    },
    watch: {

        // 触发的原始数据
        triggerData: {
            handler(newVal, oldVal) {
            },
            immediate: true
        },

        // 处理过的触发数据
        triggerListData: {
            handler(newVal) {
                this.triggerList = newVal
                // 触发数据
                console.log(newVal, 'triggerlistData');

                this.componentList.forEach(ele => {
                    if (ele.trigger == undefined && ele.timeMode == '触发') {
                        ele.trigger = []
                    }
                    newVal.forEach(item => {
                        if (ele.analogAreaComponentId == item.component_id && ele.timeMode == '触发') {
                            if (ele.trigger.length == 10) {
                                ele.trigger.pop()

                            } else {
                                // 该时间的触发数据
                                if (item.type_data != null) {
                                    // console.log(item,'461461');
                                    this.typeValue = item
                                }
                                ele.trigger.unshift(item)
                            }
                        }
                    })
                })
            },
            immediate: true
        },
        // 周期时刻的数据
        cycleTimeData: {
            handler(newVal) {
                // 监听到打印周期时刻数据
                console.log(newVal, '440');
                if (newVal.length != 0) {
                    this.componentList.forEach(ele => {
                        if (ele.cycleTimeData == undefined && ele.timeMode == '周期时刻') {
                            ele.cycleTimeData = []
                        }
                        newVal.forEach(item => {
                            if (ele.analogAreaComponentId == item.component_id && ele.timeMode == '周期时刻' && ele.analogAreaGraphId == item.graphical_id) {
                                if (ele.cycleTimeData.length == 10) {
                                    ele.cycleTimeData.slice(ele.cycleTimeData.length-1,0)
                                } else {
                                    if(item.type_data!=null){
                                        // 周期时刻的类型数据
                                        this.typeCycleTimeData = item
                                    }
                                    ele.cycleTimeData.unshift(item)
                                }
                            }
                        })
                    })
                    console.log(this.sectionData, '455');
                }
            },
            immediate: true
        },
        // 周期统计数据
        cycleStatistics:{
            handler(newVal){
                console.log(newVal,'周期统计');
            }
        }

    },



};
</script>

<style scoped lang="scss">
* {
    margin: 0;
    padding: 0;
}

.plate1,
.plate2 {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

/deep/ .el-scrollbar__view {
    display: inline-block !important;
    width: 100%
}

/deep/ .el-scrollbar__wrap {
    overflow-x: hidden !important;
}

.scrollbar {
    height: 100vh;
    overflow-x: hidden !important;

    .dataBoard {
        height: 100%;
    }

}

.dataBoard .region,
.dataBoard .section {
    width: 48%;
    border: 1px solid #e4e7ed;
    box-sizing: border-box;
    padding: 15px;
    height: 500px;
    position: relative;
    transition: all 1s;
    overflow: hidden;
}

.dataBoard .sectionBox {
    width: 100%;
    height: 48vh;
    border: 1px solid #e4e7ed;
    box-sizing: border-box;
    padding: 15px;
    position: relative;
    transition: all 1s;
    overflow: hidden;
}

.dataBoard .sectionBox:nth-child(1) {
    margin-bottom: 4vh;
}

.dataBoard .section {
    float: left;
    margin-top: 20px;
}

.dataBoard .section:nth-child(1),
.dataBoard .section:nth-child(2) {
    margin-top: 0;
}

/* .downUp{
  height: 2000px !important;
} */

.dataBoard .board-title {
    font-size: 17px;
    font-weight: 400;
    position: relative;
    margin-bottom: 15px;
    border-bottom: 1px solid #e4e7ed;
}

.dataBoard .board-title span {
    padding: 5px 10px 5px 10px;
    border-bottom: 1px solid #79b7f8;
    /* display: block; */
    display: inline-block;
}

.test-div i {
    font-size: 25px;
}

.down {
    position: absolute;
    top: 0;
    right: 0;
}

.downPull,
.downPull1 {
    position: absolute;
    top: 20px;
    right: 17px;
    cursor: pointer;
    background-size: 14px 9px;
    background-image: url(../../assets/img/downpull.png);
    width: 14px;
    height: 9px;
}

.upActive {
    transform: rotate(180deg);
    transition: all 0.5s linear;
    /* transform-origin: 7px 7px; */
}

.active {
    transition: all 0.5s linear;
}
</style>