<template>
    <div class="content-box">
        <!-- <div class="container"> -->
        <div>
            <!-- <el-tabs type="border-card"  v-model="activeName" tab-position="left"> -->
            <el-tabs type="border-card" v-model="activeName">
                <el-tab-pane :label="titName" name="first">
                    <div class="mapModuleApp">
                        <iframe
                            id="mapModule"
                            src="./VideoWeb/index.html"
                            frameborder="0"
                            style="width: 100%; height:100%;"
                            scrolling="no"
                            v-if="videoUnityShow"
                        ></iframe>
                        <!-- <iframe src="./VideoWeb/index.html" style="height: 100%; width: 100%;border: none" ref="iframe"></iframe> -->
                    <el-empty :description="description" v-if="videoAnalysisShow">
                    </el-empty>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="数据看板" name="second">
                    <dataBoard :activeName="activeName" :triggerData="triggerData" :triggerListData="triggerListData" :cycleTimeData='cycleTimeData' :cycleStatistics='cycleStatistics'></dataBoard>
                </el-tab-pane>
                <el-tab-pane label="分析配置" name="third">
                    <analysisConfiguration :analysisConfigurationdata="analysisConfigurationdata"></analysisConfiguration>
                </el-tab-pane>
                <el-tab-pane label="分析状态" name="fourth">
                    <editModal></editModal>
                </el-tab-pane>
                <el-tab-pane label="存储" name="five">存储</el-tab-pane>
            </el-tabs>
            <!-- <el-button class="videoAnalysis" type="primary" size="mini" @click="videoAnalysisBtn" v-if="videoAnalysisShow" :disabled='disabledVideoAnalysis'
                >视频分析</el-button> -->
            <el-button class="trafficAnalysis" type="primary" plain size="mini" @click="trafficAnalysisBtn" v-if="trafficAnalysisShow" :disabled='disabledTrafficAnalysis'
                >交通分析</el-button>
        </div>
        <el-drawer
            class="new-dialog"
            :visible.sync="dialogFormVisible"
            direction="btt"
            custom-class="demo-drawer"
            ref="drawer"
            :modal="false"
            :close-on-click-modal="false"
            v-alterELDialogMarginTop="{ marginTop: '0vh' }"
            width="100%"
            :wrapperClosable="false"
            :with-header="false"
            size="100%"
        >
            <div class="formBox">
                <el-form ref="form" :model="form" label-width="80px" :inline="true">
                    <el-form-item label="组件名称">
                        <el-input v-model="form.name"></el-input>
                    </el-form-item>
                    <el-form-item label="断面方向" v-if="form.type == '断面'">
                        <el-select v-model="form.Direction" placeholder="请选择类型">
                            <el-option label="正向" value="正向"></el-option>
                            <el-option label="反向" value="反向"></el-option>
                            <el-option label="双向" value="双向"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="onSubmit(form)">确认</el-button>
                        <el-button @click="closeFigure(form)">取消</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </el-drawer>
        <!-- 组件弹框 -->
        <el-dialog :title="componentTitle + '指标组件'" width="40%" :visible.sync="component" :close-on-click-modal ="false">
            <el-form ref="form" :model="componentForm" label-width="150px" @close="closeComponentForm()">
                <el-form-item label="名称：">
                    <el-input v-model="componentForm.componentName"></el-input>
                </el-form-item>

                <el-form-item label="类型筛选：" v-if="componentForm.componentType == '类型'">
                    <el-checkbox-group v-model="componentForm.type" @change="handleTypeData">
                        <el-checkbox v-for="item in typeData" :label="item" :key="item">{{ item }}</el-checkbox>
                    </el-checkbox-group>
                </el-form-item>
                <el-form-item label="数值筛选：" v-if="componentForm.componentType != 'OD' &&componentForm.componentType != '类型'&&componentForm.componentType != '流量'">
                    <el-input-number v-model="componentForm.startValue"></el-input-number>
                    <el-input-number v-model="componentForm.endValue" style="margin-left:5%"></el-input-number>
                </el-form-item>
                 <el-form-item label="流量类型：" v-if="componentForm.componentType=='流量'">
                    <el-radio-group v-model="componentForm.FlowType" >
                      <el-radio label="出流"></el-radio>
                      <el-radio label="入流"></el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="时间模式：">
                    <el-select v-model="componentForm.timeMode" placeholder="请选择时间模式">
                        <el-option label="触发" value="触发" v-if="componentForm.componentType != '延误'&&componentForm.componentType != '拥堵'"></el-option>
                        <el-option
                            label="周期时刻"
                            value="周期时刻"
                            v-if="
                                    componentForm.componentType != '排队数' &&
                                    componentForm.componentType != '检测数' &&
                                    componentForm.componentType != '延误' &&
                                    componentForm.componentType != '拥堵'&&
                                    componentForm.componentType != '流量'
                            "></el-option>
                        <el-option label="周期统计" value="周期统计" v-if="componentForm.componentType != 'OD'">
                        </el-option>
                    </el-select>
                </el-form-item>
                <!-- <el-form-item label="触发类型：" v-if="componentForm.timeModel=='touch'">
          <el-radio-group v-model="componentForm.touchType" >
            <el-radio label="实时（触发）"></el-radio>
            <el-radio label="间隔"></el-radio>
          </el-radio-group>
        </el-form-item> -->
                <el-form-item label="周期间隔：" v-if="componentForm.timeMode != '触发'">
                    <!-- <el-slider v-model="componentForm.cycleInterval" show-input>
            </el-slider> -->
                    <div style="display:inline">
                        <el-select v-model="componentForm.company" placeholder="请选择单位" @change="changeCompany">
                            <!-- <el-option v-for="item in timeSelect" :key="item.value" :label="item.label" :value="item.value"></el-option> -->
                        <el-option label="秒" value="秒" v-if="componentForm.timeMode != '周期统计'"></el-option>
                        <el-option
                            label="分钟"
                            value="分钟"
                            ></el-option>
                        <el-option label="小时" value="小时" ></el-option>
                        </el-select>
                        <el-slider v-model="componentForm.cycleInterval" :max="max"> </el-slider>
                    </div>
                </el-form-item>
                <!-- <el-form-item label="单位：" ></el-form-item> -->
                <el-form-item label="起点：" v-if="componentForm.componentType == 'OD'">
                    <el-checkbox-group v-model="componentForm.startSection" @change="handleCheckedStartSection">
                        <el-checkbox v-for="item in sectionals" :label="item.graphicName" :key="item.graphicId">{{
                            item.graphicName
                        }}</el-checkbox>
                    </el-checkbox-group>
                </el-form-item>
                <el-form-item label="终点：" v-if="componentForm.componentType == 'OD'">
                    <el-checkbox-group v-model="componentForm.endSection" @change="handleCheckedendSection">
                        <el-checkbox v-for="item in sectionals" :label="item.graphicName" :key="item.graphicId">{{
                            item.graphicName
                        }}</el-checkbox>
                    </el-checkbox-group>
                </el-form-item>
                <el-form-item label="展现形式：" v-if="componentForm.componentType != 'OD'">
                    <el-checkbox-group v-model="componentForm.presentation" @change="handlePresentation">
                        <el-checkbox label="数值" name="presentation"></el-checkbox>
                        <el-checkbox label="表格" name="presentation" v-if="componentForm.componentType != '拥堵'"></el-checkbox>
                        <el-checkbox label="时间曲线图" name="type"></el-checkbox>
                        <el-checkbox label="直方图" name="presentation" v-if="componentForm.componentType == '类型'"></el-checkbox>
                        <el-checkbox label="饼状图" name="presentation" v-if="componentForm.componentType == '类型'"></el-checkbox>
                        <el-checkbox label="均值图" name="presentation" v-if="componentForm.componentType != '拥堵'"></el-checkbox>
                    </el-checkbox-group>
                    <!-- <el-checkbox-group v-model="componentForm.presentation" @change="handlePresentation">
              <el-checkbox v-for="item in sectionals" :label="item.graphicName" :key="item.graphicId" >{{item.graphicName}}</el-checkbox>
            </el-checkbox-group> -->
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" @click="onSubmitComponent(componentForm)">确认</el-button>
                    <el-button @click="closeComponent(componentForm)">取消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>

        <!-- </div> -->
    </div>
</template>

<script>
// import mqtt from "mqtt"; // mqtt协议
import editModal from '@/views/bounced/maintenanceRemind';
import analysisConfiguration from '@/views/bounced/analysisConfiguration';
import dataBoard from '@/views/bounced/dataBoard';
import {
    getComponentData,
    getSectionalData,
    getVideoStatus,
    startTrafficAnalysis,
    startVideoAnalysis,
    getAnalysisData
} from '../api/index';
import serverUrl from '../config/apiurl.js';
import axios from 'axios';
// mqtt
// import mqttHandle from "../../../utils/mqttHandle";
import mqttConfig from '@/utils/mqttConfig.js';
var mqtt; //mqtt 处理对象（全局变量）
var client;
// //判断
export default {
    data() {
        return {
            max: '',
            receiveNews: '',
            topicSends: ['img0', 'stream0', 'trajectory0', 'detection0'],
            trajectory: false, //轨迹
            hideBoxShow: true, //隐藏箱子按钮显示隐藏
            closeStatus: null,
            modelOthers: false,
            componentShow: '',
            isShowBtn: true, //菜单按钮隐藏
            isShowBtn1: false, //菜单按钮显示
            inputVal: '',
            dialogFormVisible: false,
            areaComponent: false,
            indexModule: false,
            disabledTrafficAnalysis:true,
            disabledVideoAnalysis:false,
            //判断模拟区，画布区
            numberNew: 1,
            speed: false,
            component: false,
            sectionals: [],
            activeName: 'first',
            VideoId: '',
            title: '断面',
            componentTitle: '速度',
            form: {
                name: '',
                type: '',
                id: '',
                coordinate: '',
                Direction: '双向',
                StoppingSpeed: '5'
            },
            //初始图形名称
            startFigureName: '',
            areaComponentform: {
                name: '',
                region: '',
                date1: '',
                date2: '',
                delivery: false,
                type: [],
                resource: '实时（触发）',
                desc: ''
            },
            timeSelect: [
                {
                    label: '秒',
                    value: '秒'
                },
                {
                    label: '分钟',
                    value: '分钟'
                },
                {
                    label: '小时',
                    value: '小时'
                }
            ],
            titName: '',
            componentForm: {
                //单位
                company: '',
                componentName: '',
                componentParameterId: '01888e05fac246b29e3a19a27c3d2ab0',
                //周期间隔
                cycleInterval: '',
                startSectionIds: '',
                startSectionNames: '',
                endSectionIds: '',
                endSectionNames: '',
                endValue: '',
                //展现形式
                presentationForm: '',
                presentation: [],
                startValue: '',
                timeMode: '',
                type: [],
                startSection: [],
                endSection: [],
                componentType: '',
                typeFiltering: '',
                typeData: [],
                FlowType:'出流'

            },
            // typeData: ['小汽车', '公交车', '卡车', '非机动车', '行人'],
            typeData:['机动车','非机动车','行人'],
            //展现形式
            presentation: ['数值', '表格', '时间曲线图', '均值图'],
            trackForm: {
                name: ''
            },
            nowTime: '',
            ins: 0,
            btnPic: [],
            Data: [
                {
                    title: 'xx路口',
                    url: ''
                },
                {
                    title: '数据看板',
                    url: ''
                },
                {
                    title: '分析配置',
                    url: ''
                },
                {
                    title: '分析配置',
                    url: ''
                }
            ],
            messageInfo: [],
            orderList: [],
            enterList: [],
            stockInfo: [],
            perCent: 0,
            perCent1: 0,
            perCent2: 0,
            facToal: '',
            wbContent: '',
            //   wxContent:'',
            inContent: '',
            outContent: '',
            containerDetails: '',
            locdesc: '',
            weatherItem: {},
            loadingShow1: true,
            number: '',
            componentId: '',
            analysisConfigurationdata: {},
            //触发数据
            triggerData: [],
            triggerListData:[],
            //周期时刻
            cycleTimeData:[],
            //周期统计
            cycleStatistics:[],
            //视频类型
            videoType: '',
            videoAnalysisShow: false,
            trafficAnalysisShow: false,
            //控制unity展示
            videoUnityShow:true,
            videoAnalysisSta:'',
            analysis:{
                trafficAnalysisPath1:'',
                trafficAnalysisPath2:'',
                videoAnalysisPath:'',
                videoName:'',
                videoPath:'',
                videoTotalFrames:'',
                videoType:'实时视频'
            },
            description:'请等待排队',
            ipData:''
        };
    },

    //离开当前页面后执行
    destroyed: function() {
        //console.log("离开当前页")
        //   client.publish('msg_stream',JSON.stringify({"msg_flag":-1}))
        //client.end();
    },
    created() {
           window.OnScene = this.OnSceneN;
          this.getAllSectionalData(this.$route.query.id);
        this.VideoId = this.$route.query.id;
        this.number = this.$route.query.num;
        this.titName = this.$route.query.name;
        window.getFigure = this.getFigureD;
        window.getModifyTheName = this.getModifyTheNameN;
        // window.getModifyTheName = this.getModifyTheNameN;
        window.getSingleComponentId = this.getSingleComponentIdN;
        window.getSimulationAreaEdit = this.getSimulationAreaEdit;
     
        window.delSuccess= this.delSuccess;
        
        //  console.log("id",id)
        // console.log("num",num)
        // console.log("name",name)
        // console.log("type",type)
        // console.log("status",status)
        // this.videoType = this.$route.query.type;
        if (this.$route.query.type == '实时视频') {
            this.videoAnalysisShow = false;
            this.trafficAnalysisShow = false;
            
            this.createMqtt();
             
            // document.getElementById('mapModule').contentWindow.lixianVideo(JSON.stringify(this.analysis));
        } else if (this.$route.query.type == '离线视频'){
            this.videoAnalysisShow = true;
            this.trafficAnalysisShow = true;
            this.getAnalysisStatus()
            // this.createMqtt();
            // if(this.$route.query.status=='未分析'){
            // }
            // if(this.$route.query.status=='未分析'){
            //     // document.getElementById('mapModule').contentWindow.lixianVideo("实时视频");
            // }else{
            // }   
        }
    },
    mounted() {
       
    },
    methods: {
        /** 创建mqtt */
        createMqtt() {
            //创建链接，接收数据
            this.topicSends = ['stream' + this.number, 'trajectory' + this.number, 'detection' + this.number,'trigger-'+ this.$route.query.id,'cycle_time-'+ this.$route.query.id,'cycle_statistics-'+ this.$route.query.id];
            window.PubScribe(this.topicSends, this.number, this.realInfo);
            //   mqtt = mqttConfig;
            /*mqtt = new mqttConfig(this.topicSends);
      client = mqtt.createConnect();
      client.subscribe(['img'+this.number,'stream'+this.number, 'trajectory'+this.number, 'detection'+this.number], { qos: 0 }, (err)=> {
          if (!err) {
            console.log("订阅成功");
            // setTimeout(function() {
                 client.publish('msg_stream',JSON.stringify({"msg_flag":parseInt(this.number)}))
            //   }, 1000);

          } else {
            console.log('消息订阅失败！')
          }

        });
      client.on("message", (topic, message) => {
        //数据分类
        try {
        //   this.receiveNews = this.receiveNews.concat(message);
        //   this.realInfo(topic, this.receiveNews);
          this.realInfo(topic, message);
        } catch (error) {

        }
      });*/
        },
        //获取视频分析，交通分析状态数据
        getAnalysisStatus(){
            getVideoStatus(this.$route.query.id).then(res => {
                console.log("res.data",res.data)
                //视频分析状态
                if(res.data.data.videoAnalysisStatus == '未分析'){
                     this.disabledTrafficAnalysis= true
                     this.videoUnityShow = true
                     this.analysisData()
                }else if(res.data.data.videoAnalysisStatus == '分析中'){
                    this.disabledVideoAnalysis= true
                    this.videoUnityShow = false
                        setTimeout(() => {
                        this.getAnalysisStatus()
                        }, 5000); 
                }else if(res.data.data.videoAnalysisStatus == '已分析'){
                    this.videoUnityShow = true
                    this.videoAnalysisSta = res.data.data.videoAnalysisStatus
                    this.disabledTrafficAnalysis= false
                    this.analysisData()
                     //交通分析状态
                }else if(res.data.data.trafficAnalysisStatus=='未分析'){
                    this.disabledVideoAnalysis= true
                }else if(res.data.data.trafficAnalysisStatus=='分析中'){
                    this.disabledVideoAnalysis= true
                     this.disabledTrafficAnalysis= true
                }else if(res.data.data.videoAnalysisStatus == '已分析'||res.data.data.trafficAnalysisStatus == '已分析'){
                     this.disabledVideoAnalysis= false
                     this.disabledTrafficAnalysis= true
                }
            });
        },
        //分析视频按钮
        videoAnalysisBtn() {
            startVideoAnalysis(this.$route.query.id).then(res => {
                //
                if(res.data.msg=='请求成功'){
                    this.$message({
                            message: '启动成功',
                            type: 'success'
                        });
                         setTimeout(() => {
                        this.getAnalysisStatus()
                        }, 5000);
                    // if(this.videoAnalysisSta=='已分析'){

                    // }else if(this.videoAnalysisSta=='分析中'){
                    //     this.description = '正在分析中'
                    //     setTimeout(() => {
                    //     this.getAnalysisStatus()
                    //     }, 5000); 
                    // }else if(this.videoAnalysisSta=='未分析'){
                    // }  
                }   
            });
        },
        //交通分析
        trafficAnalysisBtn() {
            startTrafficAnalysis(this.$route.query.id).then(res => {
                //
                console.log("res.data",res.data.data)
                 if (res.data.code == 200) {
                        this.$message({
                            message: res.data.msg,
                            type: 'success'
                        });
                          document.getElementById('mapModule').contentWindow.addColor()
                 }else{
                     this.$message({
                            message: res.data.msg,
                            type: 'warning'
                        });
                 }
            });
        },
        //获取视频分析结果
        analysisData(){
             getAnalysisData(this.$route.query.id).then(res => {
                console.log("res.data.data",res.data.data)
                this.analysis.trafficAnalysisPath1 = res.data.data.trafficAnalysisPath1
                this.analysis.trafficAnalysisPath2 = res.data.data.trafficAnalysisPath2
                this.analysis.videoAnalysisPath = res.data.data.videoAnalysisPath
                this.analysis.videoName = res.data.data.videoName
                this.analysis.videoPath = res.data.data.videoPath
                this.analysis.videoTotalFrames = res.data.data.videoTotalFrames
                this.analysis.videoType=this.$route.query.type     
            });
        },
        //停止订阅mqtt
        disConnect() {
            /*if (client != null) {
        client.unsubscribe(this.topicSends);
        client = null;
      }*/
        },
        /** 实时数据分类 */
        realInfo(topic, message) {
            switch (topic) {
                // 接收托片
                case 'img'+this.number:   
                    try {
                        const utf8decoder = new TextDecoder();
                        const u8arr = new Uint8Array(message);
                        const temp = utf8decoder.decode(u8arr); // 将二进制数据转为字符串
                        const msg = JSON.parse(temp); //这一步报错则返回的是二进制流图片，不报错则返回的是JSON的错误提示数据
                        // console.log("msg",msg)
                        // document.getElementById('mapModule').contentWindow.getDestination(JSON.stringify(msg));
                        
                        if (msg.rate == 'high') {
                            document.getElementById('mapModule').contentWindow.getDestination(JSON.stringify(msg));
                        } else {
                            this.analysisConfigurationdata = msg;
                        }
                    } catch (error) {}
                    break;
                // 树结构
                case 'stream'+this.number:
                    try {
                        const utf8decoder1 = new TextDecoder();
                        const u8arr = new Uint8Array(message);
                        const temp = utf8decoder1.decode(u8arr); // 将二进制数据转为字符串
                        const msg = JSON.parse(temp);
                        //   console.log("msg",msg)
                        document.getElementById('mapModule').contentWindow.getData(JSON.stringify(msg));
                    } catch (error) {}
                    break;
                // 控制台输出
                case 'trajectory'+this.number:    
                    try {
                        const utf8decoder = new TextDecoder();
                        const u8arr = new Uint8Array(message);
                        const temp = utf8decoder.decode(u8arr); // 将二进制数据转为字符串
                        const msg = JSON.parse(temp);
                        //   console.log("msg",msg)
                        document.getElementById('mapModule').contentWindow.getGuiJi(JSON.stringify(msg));
                    } catch (error) {}
                    break;
                // 触发
                case 'detection'+this.number: 
                    try {
                        const utf8decoder = new TextDecoder();
                        const u8arr = new Uint8Array(message);
                        const temp = utf8decoder.decode(u8arr); // 将二进制数据转为字符串
                        var detId = [];
                        const msgN = JSON.parse(temp);
                        //   console.log("msgN",msgN)
                        this.triggerData = msgN;
                        if (temp.length != 0) {
                            for (let i = 0; i < msgN.length; i++) {
                                detId.push(msgN[i].det_id);
                            }
                            document.getElementById('mapModule').contentWindow.getChuFa(JSON.stringify(detId));
                        }
                        } catch (error) {}
                        break;
                    case 'trigger-'+this.$route.query.id:
                        try {
                            //  console.log("trigger_msgN",message)
                        const utf8decoder = new TextDecoder();
                        const u8arr = new Uint8Array(message);
                        const temp = utf8decoder.decode(u8arr); // 将二进制数据转为字符串
                        var detId = [];
                        const msgN = JSON.parse(temp);
                         console.log("trigger_msgN",msgN)
                        this.triggerListData = msgN;
                    } catch (error) {}
                    break;
                    case 'cycle_time-'+this.$route.query.id:
                        try {
                            //  console.log("trigger_msgN",message)
                        const utf8decoder = new TextDecoder();
                        const u8arr = new Uint8Array(message);
                        const temp = utf8decoder.decode(u8arr); // 将二进制数据转为字符串
                        var detId = [];
                        const msgN = JSON.parse(temp);
                        //  console.log("trigger_msgN",msgN)
                        this.cycleTimeData = msgN;
                    } catch (error) {}
                    break;
                    case 'cycle_statistics-'+this.$route.query.id:
                        try {
                            //  console.log("trigger_msgN",message)
                        const utf8decoder = new TextDecoder();
                        const u8arr = new Uint8Array(message);
                        const temp = utf8decoder.decode(u8arr); // 将二进制数据转为字符串
                        var detId = [];
                        const msgN = JSON.parse(temp);
                        //  console.log("trigger_msgN",msgN)
                        this.cycleStatistics = msgN;
                    } catch (error) {}
                    break;
            }
            this.receiveNews = '';
        },
        // handleClick(tab, event) {
        //     console.log(tab, event);
        //   },
        changeCompany(val) {
            console.log('val', val);
            if (val == '小时') {
                this.max = '24';
            } else {
                this.max = '100';
            }
        },
        //初始化unity
        OnSceneN() {
            var ip = window.location.host;
        this.ipData = "http://"+ip.split(":")[0]+':5000'
        // document.getElementById('mapModule').contentWindow.getIpData(this.ipData);
         document.getElementById('mapModule').contentWindow.getIpData('http://172.16.1.168:5000');
         if(this.$route.query.type=='离线视频'){
            document.getElementById('mapModule').contentWindow.lixianVideo(JSON.stringify(this.analysis)); 
         } 
        document.getElementById('mapModule').contentWindow.postVideoId(JSON.stringify(this.$route.query.id+ ',' +this.$route.query.type));          
        },
        //删除图形成功获取数据
        delSuccess(){
            if(this.$route.query.type=='离线视频'){
                 this.$message({
                            type: "warning",
                            message: "请点击交通分析，获取最新数据！",
                            showClose: true,
                            duration:0,
                    });
            }
        },
        // //新增组件根据组件id获取单个组件数据
        getSingleComponentIdN(id, type, name) {
            console.log('id', id);
            console.log('type', type);
            console.log('name', name);
            this.componentId = id;
            this.componentForm.componentType = type;
            this.componentTitle = type;
            getComponentData({ AnalogAreaComponentId: id }).then(res => {
                console.log('res', res);
                if (res.data.code == 200) {
                    console.log('res', res.data.data);
                    this.component = true;
                    if (res.data.data.company != '') {
                        this.componentForm.company = res.data.data.company;
                    }
                    // this.componentForm.componentName = res.data.data.componentName+'-'+type
                    this.componentForm.componentName = res.data.data.componentName;
                    if (res.data.data.timeMode != '') {
                        this.componentForm.timeMode = res.data.data.timeMode;
                    }else{
                        console.log("this.componentForm.timeMode",this.componentForm.timeMode);
                        console.log("this.componentForm.componentType",this.componentForm.componentType);
                        if(this.componentForm.componentType=='延误'||this.componentForm.componentType=='拥堵'){
                            console.log("this.componentForm.timeMode",this.componentForm.timeMode);
                            this.componentForm.timeMode = '周期统计'
                        }else{
                            this.componentForm.timeMode = '触发'
                        }
                    }
                    this.componentForm.componentParameterId = res.data.data.componentParameterId;
                    this.componentForm.cycleInterval = res.data.data.cycleInterval;
                    this.componentForm.startSectionIds = res.data.data.startSectionIds;
                    // this.componentForm.FlowType = res.data.data.flowType;
                    this.componentForm.startSectionNames = res.data.data.startSectionNames;
                    this.componentForm.endSectionIds = res.data.data.endSectionIds;
                    this.componentForm.endSectionNames = res.data.data.endSectionNames;
                    this.componentForm.company = res.data.data.company;
                    this.componentForm.endValue = res.data.data.endValue;
                    this.componentForm.startValue = res.data.data.startValue;
                    this.componentForm.presentationForm = res.data.data.presentationForm;
                    this.getAllSectionalData(this.$route.query.id);
                    // this.componentForm.typeFiltering = res.data.data.typeFiltering
                    // this.componentForm.type = res.data.data.type
                    if (res.data.data.startSectionIds != '') {
                        console.log('startSectionIds', res.data.data.startSectionIds);
                        var startSectionIdArr = [];
                        var startSectionArr = [];
                        startSectionIdArr = res.data.data.startSectionIds.split(',');
                        console.log('this.sectionals', this.sectionals);
                        console.log('startSectionIdArr', startSectionIdArr);
                        startSectionIdArr.forEach(item => {
                            this.sectionals.forEach(items => {
                                if (item == items.graphicId) {
                                    startSectionArr.push(items.graphicName);
                                    this.componentForm.startSection = startSectionArr;
                                }
                            });
                        });
                    }
                    if (res.data.data.endSectionIds != '') {
                        console.log('endSectionIds', res.data.data.endSectionIds);
                        var endSectionIdArr = [];
                        var endSectionArr = [];
                        endSectionIdArr = res.data.data.endSectionIds.split(',');
                        console.log('this.sectionals', this.sectionals);
                        console.log('endSectionIdArr', endSectionIdArr);
                        endSectionIdArr.forEach(item => {
                            this.sectionals.forEach(items => {
                                if (item == items.graphicId) {
                                    endSectionArr.push(items.graphicName);
                                    this.componentForm.endSection = endSectionArr;
                                }
                            });
                        });
                    }
                    if (this.componentForm.presentationForm != '') {
                        var arr = [];
                        arr = this.componentForm.presentationForm.split(',');
                        this.componentForm.presentation = arr;
                    } else if (this.componentForm.presentationForm == '') {
                        this.componentForm.presentation = [];
                    }
                    if (res.data.data.type != '') {
                        var arr = [];
                        arr = res.data.data.type.split(',');
                        this.componentForm.type = arr;
                    } else {
                        this.componentForm.type = [];
                    }
                    console.log('this.componentForm', this.componentForm);
                }
            });
        },
        //修改模拟区组件、图形
        getSimulationAreaEdit(id, type, componentType, name, number) {
            console.log('number', number);
            this.numberNew = number;
            if (type == '图形') {
                this.form.id = id;
                this.form.name = name;
                this.form.type = componentType;
                this.startFigureName = name;
                if (this.form.type == '轨迹') {
                    this.dialogFormVisible = true;
                } else if (this.form.type == '区域') {
                    this.dialogFormVisible = true;
                } else if (this.form.type == '断面') {
                    this.dialogFormVisible = true;
                }
            } else if (type == '组件') {
                this.componentId = id;
                this.componentForm.componentType = componentType;
                this.componentTitle = componentType;
                getComponentData({ AnalogAreaComponentId: id }).then(res => {
                    console.log('res', res);
                    if (res.data.code == 200) {
                        console.log('res', res.data.data);
                        this.component = true;
                        if (res.data.data.company != '') {
                            this.componentForm.company = res.data.data.company;
                        }
                        if (res.data.data.timeMode != '') {
                            this.componentForm.timeMode = res.data.data.timeMode;
                        }else{
                        if(this.componentForm.componentType=='延误'||this.componentForm.componentType=='拥堵'){
                            this.componentForm.timeMode = '周期统计'
                        }else{
                            this.componentForm.timeMode = '触发'
                        }
                        }
                        this.componentForm.componentName = res.data.data.componentName;
                        this.componentForm.componentParameterId = res.data.data.componentParameterId;
                        this.componentForm.cycleInterval = res.data.data.cycleInterval;
                        this.componentForm.startSectionIds = res.data.data.startSectionIds;
                        this.componentForm.startSectionNames = res.data.data.startSectionNames;
                        this.componentForm.endSectionIds = res.data.data.endSectionIds;
                        this.componentForm.endSectionNames = res.data.data.endSectionNames;
                        this.componentForm.endValue = res.data.data.endValue;
                        this.componentForm.startValue = res.data.data.startValue;
                        this.componentForm.presentationForm = res.data.data.presentationForm;
                        // this.componentForm.type = res.data.data.type
                        if (res.data.data.startSectionIds != '') {
                            console.log('startSectionIds', res.data.data.startSectionIds);
                            var startSectionIdArr = [];
                            var startSectionArr = [];
                            startSectionIdArr = res.data.data.startSectionIds.split(',');
                            console.log('this.sectionals', this.sectionals);
                            console.log('startSectionIdArr', startSectionIdArr);
                            startSectionIdArr.forEach(item => {
                                this.sectionals.forEach(items => {
                                    if (item == items.graphicId) {
                                        startSectionArr.push(items.graphicName);
                                        this.componentForm.startSection = startSectionArr;
                                    }
                                });
                            });
                        }
                        if (res.data.data.endSectionIds != '') {
                            console.log('endSectionIds', res.data.data.endSectionIds);
                            var endSectionIdArr = [];
                            var endSectionArr = [];
                            endSectionIdArr = res.data.data.endSectionIds.split(',');
                            console.log('this.sectionals', this.sectionals);
                            console.log('endSectionIdArr', endSectionIdArr);
                            endSectionIdArr.forEach(item => {
                                this.sectionals.forEach(items => {
                                    if (item == items.graphicId) {
                                        endSectionArr.push(items.graphicName);
                                        this.componentForm.endSection = endSectionArr;
                                    }
                                });
                            });
                        }
                        if (this.componentForm.presentationForm != '') {
                            var arr = [];
                            arr = this.componentForm.presentationForm.split(',');
                            this.componentForm.presentation = arr;
                        } else if (this.componentForm.presentationForm == '') {
                            this.componentForm.presentation = [];
                        }
                        if (res.data.data.type != '') {
                            var arr = [];
                            arr = res.data.data.type.split(',');
                            this.componentForm.type = arr;
                        } else {
                            this.componentForm.type = [];
                        }
                    }
                });
            }
        },
        //获取所有断面数据
        getAllSectionalData(VideoId) {
            getSectionalData({ VideoId: VideoId }).then(res => {
                console.log('res', res);
                if (res.data.code == 200) {
                    this.sectionals = res.data.data;
                }
            });
        },
        figureType(type) {
            if (type == 'Move') {
                type = '轨迹';
            } else if (type == 'Poly') {
                type = '区域';
            } else if (type == 'Line') {
                type = '断面';
            }
            return type;
        },
        getFigureD(item, index, indexNew) {
            console.log('图形类型', item);
            console.log('初始图形名称', index);
            this.startFigureName = index;
            console.log('图形位置', indexNew);
            this.dialogFormVisible = true;
            this.form.name = index;
            this.form.type = this.figureType(item);
            this.form.coordinate = indexNew;
            this.form.id = '';
            this.title = this.figureType(item);
        },
        //双击图形修改图形名称弹框
        getModifyTheNameN(data, number) {
            console.log('data', data);
            console.log('number', number);
            this.numberNew = number;
            var arr = [];
            arr = data.split(',');
            console.log('arr', arr);
            this.form.id = arr[0];
            this.form.name = arr[1];
            this.form.type = arr[2];
            this.startFigureName = arr[1];
            if (this.form.type == '轨迹') {
                // this.open2()
                this.dialogFormVisible = true;
            } else if (this.form.type == '区域') {
                this.dialogFormVisible = true;
            } else if (this.form.type == '断面') {
                this.dialogFormVisible = true;
            }
        },
        //新增、编辑图形确认按钮
        onSubmit(form) {
            console.log('form', form);
            //新增
            if (form.id == '') {
                let formData = new FormData();
                if (form.type == '断面') {
                    formData.append('GraphicName', form.name);
                    formData.append('GraphicType', form.type);
                    formData.append('Coordinate', form.coordinate);
                    formData.append('VideoId', this.VideoId);
                    formData.append('Direction', form.Direction);
                } else if (form.type == '区域') {
                    formData.append('GraphicName', form.name);
                    formData.append('GraphicType', form.type);
                    formData.append('Coordinate', form.coordinate);
                    formData.append('VideoId', this.VideoId);
                    // formData.append("Direction",form.Direction);
                    // formData.append("StoppingSpeed",form.StoppingSpeed);
                } else {
                    formData.append('GraphicName', form.name);
                    formData.append('GraphicType', form.type);
                    formData.append('Coordinate', form.coordinate);
                    formData.append('VideoId', this.VideoId);
                    // formData.append("Direction",form.Direction);
                }

                axios({
                    method: 'post',
                    url: serverUrl.addFigure,
                    data: formData
                }).then(res => {
                    console.log('res', res);

                    if (res.data.code == 200) {
                        this.$message({
                            message: res.data.msg,
                            type: 'success'
                        });
                        // setTimeout(() => { 
                        //     this.$message({
                        //     type: "warning",
                        //     message: "请点击交通分析，获取最新数据！",
                        //     showClose: true,
                        //     duration:0,
                        //     });
                        // }, 3000);
                       
                        document.getElementById('mapModule').contentWindow.postFigureId(JSON.stringify(res.data.data));
                        document.getElementById('mapModule').contentWindow.postFigureName(
                                JSON.stringify(res.data.data + ',' + form.name + ',' + this.startFigureName + ',' + this.numberNew)
                            );
                          
                        this.dialogFormVisible = false;
                    } else {
                        this.$message({
                            message: res.data.msg,
                            type: 'warning'
                        });
                    }
                });
            } else {
                //编辑
                let formData = new FormData();
                if (form.type == '断面') {
                    formData.append('GraphicName', form.name);
                    formData.append('GraphicType', form.type);
                    formData.append('Direction', form.Direction);
                    formData.append('GraphicId', form.id);
                    formData.append('VideoId', this.VideoId);
                } else if (form.type == '区域') {
                    formData.append('GraphicName', form.name);
                    formData.append('GraphicType', form.type);
                    formData.append('Direction', form.Direction);
                    formData.append('GraphicId', form.id);
                    formData.append('VideoId', this.VideoId);
                    formData.append('StoppingSpeed', form.StoppingSpeed);
                } else {
                    formData.append('GraphicName', form.name);
                    formData.append('GraphicType', form.type);
                    // formData.append("Direction",form.Direction);
                    formData.append('GraphicId', form.id);
                    formData.append('VideoId', this.VideoId);
                }
                axios({
                    method: 'post',
                    url: serverUrl.editFigure,
                    data: formData
                }).then(res => {
                    console.log('res', res);

                    if (res.data.code == 200) {
                        this.$message({
                            message: res.data.msg,
                            type: 'success'
                        });
                        setTimeout(() => { 
                            this.$message({
                            type: "warning",
                            message: "请点击交通分析，获取最新数据！",
                            showClose: true,
                            duration:0,
                            });
                        }, 5000);
                        console.log('startFigureName', this.startFigureName);
                        document.getElementById('mapModule').contentWindow.postFigureId(JSON.stringify(res.data.data));
                        console.log('this.numberNew', this.numberNew);
                        document
                            .getElementById('mapModule')
                            .contentWindow.postFigureName(
                                JSON.stringify(form.id + ',' + form.name + ',' + this.startFigureName + ',' + this.numberNew)
                            );
                        this.dialogFormVisible = false;
                    } else {
                        this.$message({
                            message: res.data.msg,
                            type: 'warning'
                        });
                    }
                });
            }
        },
        //新增编辑组件取消
        onSubmitComponent(componentForm) {
            this.component = false;
            let formData = new FormData();
            if (componentForm.componentType == 'OD') {
                //名称
                formData.append('componentName', componentForm.componentName);
                //单位
                formData.append('company', componentForm.company);
                //id
                formData.append('componentParameterId', componentForm.componentParameterId);
                formData.append('cycleInterval', componentForm.cycleInterval);
                formData.append('startSectionIds', componentForm.startSectionIds);
                formData.append('startSectionNames', componentForm.startSectionNames);
                formData.append('endSectionIds', componentForm.endSectionIds);
                formData.append('endSectionNames', componentForm.endSectionNames);
                formData.append('endValue', componentForm.endValue);
                formData.append('startValue', componentForm.startValue);
                formData.append('timeMode', componentForm.timeMode);
               
                
                formData.append('presentationForm', '矩阵图');
            } else if (componentForm.componentType == '类型') {
                //名称
                formData.append('componentName', componentForm.componentName);
                //单位
                formData.append('company', componentForm.company);
                //id
                formData.append('componentParameterId', componentForm.componentParameterId);
                formData.append('cycleInterval', componentForm.cycleInterval);
                formData.append('endValue', componentForm.endValue);
                formData.append('startValue', componentForm.startValue);
                formData.append('timeMode', componentForm.timeMode);
                formData.append('presentationForm', componentForm.presentationForm);
                formData.append('type', componentForm.type);
            } else {
                //名称
                formData.append('componentName', componentForm.componentName);
                //单位
                formData.append('company', componentForm.company);
                //id
                formData.append('componentParameterId', componentForm.componentParameterId);
                formData.append('cycleInterval', componentForm.cycleInterval);
                formData.append('endValue', componentForm.endValue);
                formData.append('startValue', componentForm.startValue);
                formData.append('timeMode', componentForm.timeMode);
                formData.append('presentationForm', componentForm.presentationForm);
                 formData.append('flowType', componentForm.FlowType);
            }
            axios({
                method: 'post',
                url: serverUrl.editComponent,
                data: formData
            }).then(res => {
                console.log('res', res);

                if (res.data.code == 200) {
                    this.$message({
                        message: res.data.msg,
                        type: 'success'
                    });
                    // document.getElementById("mapModule").contentWindow.postFigureId(JSON.stringify(res.data.data))
                    document.getElementById('mapModule').contentWindow.editComponent(this.componentId + ',' + componentForm.componentName);
                    this.dialogFormVisible = false;
                } else {
                    this.$message({
                        message: res.data.msg,
                        type: 'warning'
                    });
                }
            });
        },
        //新增编辑组件取消
        closeComponent(componentForm) {
            this.component = false;
            this.componentForm = {
                //单位
                company: '',
                componentName: '',
                componentParameterId: '01888e05fac246b29e3a19a27c3d2ab0',
                //周期间隔
                cycleInterval: '',
                startSectionIds: '',
                startSectionNames: '',
                endSectionIds: '',
                endSectionNames: '',
                endValue: '',
                //展现形式
                presentationForm: '',
                presentation: [],
                startValue: '',
                timeMode: '',
                type: [],
                startSection: [],
                endSection: [],
                componentType: '',
                typeFiltering: '',
                typeData: []
            };
            document.getElementById('mapModule').contentWindow.editComponent('');
        },
        //新增、编辑图形取消按钮
        closeFigure(form) {
            console.log('form', form);
            if (form.id != '') {
                this.dialogFormVisible = false;
                document.getElementById('mapModule').contentWindow.closeEdit(JSON.stringify(form.type + ',' + form.id));
            } else {
                this.dialogFormVisible = false;
                document.getElementById('mapModule').contentWindow.delFigure();
            }
        },
        closeComponentForm() {
            this.component = false;
            document.getElementById('mapModule').contentWindow.editComponent('');
        },
        closeForm(form) {
            if (this.form.id != '') {
                this.dialogFormVisible = false;
                document.getElementById('mapModule').contentWindow.closeEdit(JSON.stringify(form.type + ',' + form.id));
            } else {
                this.dialogFormVisible = false;
                document.getElementById('mapModule').contentWindow.delFigure();
            }
        },
        //改变起点
        handleCheckedStartSection(value) {
            console.log('改变起点', value);
            var startSectionIdArr = [];
            var startSectionNameArr = [];
            value.forEach(item => {
                this.sectionals.forEach(items => {
                    if (item == items.graphicName) {
                        startSectionIdArr.push(items.graphicId);
                        startSectionNameArr.push(items.graphicName);
                        let newStartSectionId = startSectionIdArr.join(',');
                        let newStartSectionName = startSectionNameArr.join(',');
                        this.componentForm.startSectionIds = newStartSectionId;
                        this.componentForm.startSectionNames = newStartSectionName;
                    }
                });
            });
        },
        //改变终点
        handleCheckedendSection(value) {
            console.log('改变终点', value);
            var endSectionIdArr = [];
            var endSectionNameArr = [];
            value.forEach(item => {
                this.sectionals.forEach(items => {
                    if (item == items.graphicName) {
                        endSectionIdArr.push(items.graphicId);
                        endSectionNameArr.push(items.graphicName);
                        let newendSectionId = endSectionIdArr.join(',');
                        let newEndSectionName = endSectionNameArr.join(',');
                        console.log('newendSectionId', newendSectionId);
                        console.log('newEndSectionName', newEndSectionName);
                        this.componentForm.endSectionIds = newendSectionId;
                        this.componentForm.endSectionNames = newEndSectionName;
                    }
                });
            });
        },
        //修改展现形式
        handlePresentation(value) {
            console.log('展现形式', value);
            let presentation = value.join(',');
            this.componentForm.presentationForm = presentation;
            console.log('this.componentForm.presentationForm', this.componentForm.presentationForm);
        },
        //类型数据
        handleTypeData(value) {
            console.log('类型数据', value);
            let type = value.join(',');
            this.componentForm.typeData = type;
        },
        //模型加载等待
        loadingShow(data) {
            this.loadingShow1 = data;
        },

        handleSearch() {
            this.modelOthers = true;
            this.$refs.htModels.finbBox(this.inputVal);
            console.log(this.$refs.htModels, 'asdasdasd');
            this.inputVal = '';
        },
        handleRow(val) {
            this.modelOthers = true;
            this.$refs.htModels.finbBox(val);
        },
        // 天气
        handleWather() {
            axios({
                url: 'https://restapi.amap.com/v3/weather/weatherInfo?key=bc2b906032fdd8a63cbd0790d656b1d7&city=620100',
                methods: ''
            }).then(res => {
                this.weatherItem = res.data.lives[0];
                console.log(this.weatherItem, 'asdsads');
            });
        }
    },
    components: {
        editModal,
        analysisConfiguration,
        dataBoard
    }
};
</script>
<style scoped>
.el-form-item {
    margin-bottom: 15px;
}

.content-box::-webkit-scrollbar {
    display: none; /* Chrome Safari */
}
.new-dialog {
    width: 49%;
    height: 11%;
    left: calc(24vw);
    top: 90vh;
    bottom: 0 /* right:auto;; */;
}
.formBox {
    margin-top: 20px;
    margin-left: 20px;
}
/* .new-dialog .el-dialog {
    width:100%!important;
        margin: 0vh auto !important;
        margin-top: 0vh!important;
} */
.new-dialog .el-dialog {
    width: 100% !important;
    margin: 0 auto 0px !important;
    /* margin-top: 0vh!important; */
}
.new-dialog .el-dialog__wrapper::-webkit-scrollbar {
    display: none; /* Chrome Safari */
}
.new-dialog .customWidth {
    width: 100%;
    min-width: 150px;
}
.mapModuleApp {
    /* width:100%; */
    width: 1600px;
    height: 900px;
    display: inline-block;
    border: 1px soild #eee;
}
.el-drawer.btt,
.el-drawer.ttb {
    width: 100%;
    left: 0;
    right: 0;
    height: 100% !important;
}

.el-drawer__container {
    position: relative;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    height: 100%;
    width: 100%;
}
.videoAnalysis {
    position: absolute;
    right: 200px;
    top: 17px;
}
.trafficAnalysis {
    position: absolute;
    right: 100px;
    top: 17px;
}
</style>
