<template>
    <div ref="box" class="box">
        <!-- <p class="title" style="margin-bottom: 20px;font-size: 20px;font-weight: 400;">数据看板</p> -->

        <div class="dataBoard" v-if="activeName == 'second'" :style="componentList.length > 4 ? 'height:auto' : 'height:1050px'">
            <!-- 断面 -->
            <div class="plate1">
                <div class="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">
                                <typeChart
                                    :pageType="o.graphicType"
                                    triggerType="触发"
                                    :componentName="o.componentName"
                                    :data="triggerList.length != 0 ? triggerList : tableData"
                                    :echartArr="o.presentationForm"
                                />
                            </div>
                        </div>
                    </template>
                </div>
            </div>

            <!-- 区域 -->
            <div class="plate2">
                <div class="region" ref="region" v-for="(s, i) in regionData" :key="s.analogAreaComponentId">
                    <div ref="regionContent">
                        <div>
                            <p class="board-title">
                                <span>{{ s.title }}</span>
                            </p>
                            <span class="downPull" data-num="1" @click="regionHandle(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"
                            />
                            <typeChart
                                v-else
                                :pageType="o.graphicType"
                                triggerType="触发"
                                :componentName="o.componentName"
                                :data="triggerList.length != 0 ? triggerList : tableData"
                                :echartArr="o.presentationForm"
                            />
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 详情框 -->
    </div>
</template>

<script>
import typeChart from '../../components/target/typeChart.vue';
import OD from '../../components/target/OD.vue';

import { getComponentSection } from '../../api/index';
export default {
    components: {
        typeChart,
        OD
    },
    props: {
        activeName: {
            type: String
        },
        triggerData: {
            type: Array,
            default() {
                return [];
            }
        }
    },
    data() {
        return {
            title1: '01断面',
            title2: '01区域',
            dialogVisible: false,
            // 触发数据断面与区域相同
            tableData: [
                {
                    steam_id: 0,
                    timestamp: '2022-10-01 09:15:10.156',
                    obj_id: 125,
                    type: 'car',
                    plate: '苏A0131M',
                    speed: 35.2,
                    event: 'in',
                    lane: 0,
                    headWay: 19
                },
                {
                    steam_id: 0,
                    timestamp: '2022-10-01 09:15:10.156',
                    obj_id: 125,
                    type: 'car',
                    plate: '苏A0131M',
                    speed: 70.2,
                    event: 'in',
                    lane: 0,
                    headWay: 6.5
                },
                {
                    steam_id: 0,
                    timestamp: '2022-10-01 09:15:10.156',
                    obj_id: 125,
                    type: 'car',
                    plate: '苏A0131M',
                    speed: 60.2,
                    event: 'in',
                    lane: 0,
                    headWay: 10.5
                },
                {
                    steam_id: 0,
                    timestamp: '2022-10-01 09:15:10.156',
                    obj_id: 125,
                    type: 'car',
                    plate: '苏A0131M',
                    speed: 60.2,
                    event: 'in',
                    lane: 0,
                    headWay: 2.5
                },
                {
                    steam_id: 0,
                    timestamp: '2022-10-01 09:15:10.156',
                    obj_id: 125,
                    type: 'car',
                    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
                }
            ],

            // sectionShow: false,
            // regionShow: false,

            count1: false,
            count2: false,

            idVal: '',
            //组件数组
            componentList: [],
            // 触发数据数组
            triggerList: [],
            //断面的数组
            sectionData: [],
            // 区域的数组
            regionData: []
        };
    },
    created() {
        // console.log(this.$route.query.id);
        // console.log(this.$route.query.id);
        this.idVal = this.$route.query.id;
        getComponentSection({ VideoId: this.idVal }).then((res) => {
            // console.log(res);
            if (res.data.code == 200) {
                // console.log(res.data.data, '11111111111111111');
                this.componentList = res.data.data;
                // 断面
                var sectionArr = [];
                // 区域
                var regionArr = [];
                res.data.data.forEach((val) => {
                    if (val.graphicType == '区域') {
                        regionArr.push(val.combinationName);
                        regionArr = Array.from(new Set(regionArr));
                    } else {
                        sectionArr.push(val.combinationName);
                        sectionArr = Array.from(new Set(sectionArr));
                    }
                });
                this.regionData = regionArr.map((item) => {
                    item = { title: item, children: [] };
                    res.data.data.forEach((val) => {
                        if (item.title == val.combinationName && val.graphicType == '区域') {
                            item.children.push(val);
                        }
                    });
                    return item;
                });
                this.sectionData = sectionArr.map((item) => {
                    item = { title: item, children: [] };
                    res.data.data.forEach((val) => {
                        if (item.title == val.combinationName && val.graphicType == '断面') {
                            item.children.push(val);
                        }
                    });
                    return item;
                });
                // console.log(this.regionData, 'regionArr');
                // console.log(, '111111');
            } else if (res.data.code == 404) {
            }
        });
    },
    methods: {
        // 区域点击事件
        regionHandle(i) {
            //获取区域内box的所有标签
            let regions = document.querySelectorAll('.region');
            let downPulls = document.querySelectorAll('.downPull');
            downPulls[i].dataset.num++;
            // console.log(downPulls[i].dataset.num);
            // 判断datasetid能否整除2能整除进行操作
            if (downPulls[i].dataset.num % 2 == 0) {
                downPulls[i].style.cssText = 'transform: rotate(180deg);transition: all 0.5s linear;';
                regions[i].style.height = regions[i].firstChild.offsetHeight + 30 + 'px';
            } else {
                downPulls[i].style.cssText = 'transition: all 0.5s linear;';
                regions[i].style.height = '500px';
            }
        },
        // 断面点击事件
        sectionHandle(i) {
            let sections = document.querySelectorAll('.section');
            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 = sections[i].firstChild.offsetHeight + 20 + 'px';
            } else {
                downPulls1[i].style.cssText = 'transition: all 0.5s linear;';
                sections[i].style.height = '500px';
            }
        }
    },
    mounted() {},
    watch: {
        triggerData: {
            handler(newVal, oldVal) {
                // console.log(newVal, 'newVal');
                this.triggerList = newVal;
                for (let i = 0; i < this.triggerList.length; i++) {
                    if (this.triggerList[i].headWay == -1) {
                        this.triggerList[i].headWay = '';
                    } else if (this.triggerList[i].lane == -1) {
                        this.triggerList[i].lane = '';
                    }
                }
            },
            immediate: true
        }
    }
};
</script>

<style scoped>
* {
    margin: 0;
    padding: 0;
}

/* .box {
    overflow-y: scroll;
} */
.dataBoard {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
.plate1,
.plate2 {
    width: 48%;
}
.dataBoard .region,
.dataBoard .section {
    width: 100%;
    border: 1px solid #e4e7ed;
    box-sizing: border-box;
    padding: 15px;
    height: 500px;
    position: relative;
    transition: all 1s;
    overflow: hidden;
    margin-top: 30px;
}
.dataBoard .region:nth-child(1),
.dataBoard .section:nth-child(1) {
    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>