<template>
  <div class="home_page">
    <!-- 地图 -->
    <div class="home_page_map">
      <GaoDeMap @mapClickEventFn="mapClickEvent" />
    </div>
    <!-- 地图弹框 -->
    <div ref="mapDialog" class="map_dialog" :style="{'top':mapDialogTop,'left':mapDialogLeft}">

    </div>
    <!-- 情报板弹框 -->
    <transition name="el-zoom-in-center">
      <div v-if="dialogInfoLeft" class="dialog_info">
        <div class="dialog_info_left">
          <div class="dialog_info_left_t">
            <div class="dialog_info_left_t_txt">{{ dialogTit }}</div>
            <img class="dialog_info_left_t_img" src="@/assets/screen/xtb/close.png" alt="" @click="closeDialogBtnFn">
            <img class="dialog_info_left_t_ti" src="@/assets/screen/xtb/cltiao.png" alt="">
          </div>
          <div class="dialog_info_left_show">
            <div v-if="dialogInfoList.length > 0" class="dialog_info_left_show_box" style="height: 100%;">
              <div class="dialog_info_left_show_box_item" v-for="i in dialogInfoList" :key="i.id">
                <div class="dialog_info_left_show_l">
                  <div class="dialog_info_left_show_l_xsq" :style="{'width':processString(i.screenSize,'w') / getScrollSz(processString(i.screenSize,'w'))+'px','height':processString(i.screenSize,'h') / getScrollSz(processString(i.screenSize,'w'))+'px','justify-content':getTextAlign(i.tcontents[0].formatStyle)}">
                    <div class="dialog_info_left_show_l_xsq_txt" :style="{'font-size':i.tcontents[0].fontSize / getScrollSz(processString(i.screenSize,'w'))+'px','color':'#'+i.tcontents[0].fontColor,'font-family':i.tcontents[0].fontType,}" v-html="i.tcontents[0].content"></div>
                  </div>
                </div>
                <div class="dialog_info_left_show_r">
                  <div @click="editOutline(i)" class="show_r_btn dialog_info_left_show_r_btn1"></div>
                  <div @click="delMoFn(i)" class="show_r_btn dialog_info_left_show_r_btn2"></div>
                </div>
              </div>
            </div>
            <div v-else class="dialog_info_left_show_box" style="height: 100%;">
              <div class="dialog_info_left_show_box_empty">暂无数据</div>
            </div>
            <div class="dialog_info_left_show_bottom">
              <el-tabs v-model="activeName" @tab-click="tabClickFn">
                <el-tab-pane label="详情信息" name="first">
                  <div class="show_bottom_tab_box">
                    <div class="show_bottom_tab_item" v-for="item in tabInfoList" :key="item.id">
                      <div class="show_bottom_tab_item_l">{{ item.tit }}: </div>
                      <div class="show_bottom_tab_item_r" :style="{'color':item.col}"> {{ item.txt }}</div>
                    </div>
                  </div>
                </el-tab-pane>
                <el-tab-pane label="设备参数" name="second">设备参数</el-tab-pane>
              </el-tabs>
            </div>
            <div class="dialog_info_left_show_bottom_btn">
              <div class="show_bottom_btn_add" @click="addMoDataInfoFn(2,2)">添加信息</div>
              <div class="show_bottom_btn_del" @click="InformationReleaseFn">信息发布</div>
            </div>
            <div class="dialog_info_left_show_ce" @click="showCeInfoFn">
              <img class="show_ce_img" src="@/assets/screen/xtb/leftd.png" alt="" :style="{'transform':dialogInfoRight ? 'rotate(0deg)': 'rotate(180deg)'}">
              <div class="show_ce_txt">信息模板</div>
            </div>
          </div>
        </div>
        <transition name="el-zoom-in-center">
          <div v-if="dialogInfoRight" class="dialog_info_right">
            <el-collapse v-model="activeNames" @change="panelChangeFn">
              <el-collapse-item v-for="item in moBanList" :key="item.dictCode" :title="item.dictLabel" :name="item.dictCode">
                <div class="dialog_info_right_show">
                  <div class="dialog_info_left_show_box" style="overflow-y: visible;">
                    <div class="dialog_info_left_show_box_item" v-for="i in item.mbList" :key="i.id">
                      <div class="dialog_info_left_show_l" style="width:16vw;">
                        <div class="dialog_info_left_show_l_xsq" :style="{'width':processString(i.screenSize,'w') / getScrollSz(processString(i.screenSize,'w'))+'px','height':processString(i.screenSize,'h') / getScrollSz(processString(i.screenSize,'w'))+'px','justify-content':getTextAlign(i.tcontents[0].formatStyle)}">
                          <div class="dialog_info_left_show_l_xsq_txt" :style="{'font-size':i.tcontents[0].fontSize / getScrollSz(processString(i.screenSize,'w'))+'px','color':'#'+i.tcontents[0].fontColor,'font-family':i.tcontents[0].fontType}" v-html="i.tcontents[0].content"></div>
                        </div>
                      </div>
                      <div class="dialog_info_left_show_r" style="width: 3.5vw;">
                        <div @click="putLeftFn(i)" class="show_r_btn dialog_info_left_show_r_btn3"></div>
                      </div>
                    </div>
                  </div>
                </div>
              </el-collapse-item>
            </el-collapse>

          </div>
        </transition>
      </div>
    </transition>
    <!-- 情报板弹框中的弹框 -->
    <addBoard ref="addinfo" @addInfo="addInfo" />
    <editBoard v-if="showEmit" :boardEmitItem="boardEmitItem" @receiveForm="receiveForm" @dialogClose="dialogClose" />
    <!-- 左边 -->
    <div class="home_page_left">
      <div class="home_page_left_t">
        <div class="home_page_left_t_txt">
          <div class="home_page_left_t_txt_l">
            <div class="home_page_left_t_txt_l_tit">重点监控</div>
          </div>
          <div class="home_page_left_t_txt_r"></div>
        </div>
        <div class="home_page_left_t_b">
          <div class="home_page_left_t_b_item" v-for="item in keyMonitoringList" :key="item.id">
            <div v-if="item.id !== 9" class="home_page_left_t_b_item_top" :style="{'color':item.col}">{{ item.val }} <span class="t_b_item_top_unit">{{ item.unit }}</span></div>
            <div v-if="item.id !== 9" class="home_page_left_t_b_item_bom">{{ item.name }}</div>
          </div>
        </div>
      </div>
      <div class="home_page_left_b">
        <div class="home_page_left_b_btn">
          <div class="home_page_left_b_btn_item" v-for="item in subjectBtnList" :key="item.id" @click="subjectBtnFn(item)" :class="{'left_b_cont_active': subjectBtn === item.id}">{{ item.name }}</div>
        </div>
        <div v-if="subjectBtn === 21" class="left_b_cont">事件专题</div>
        <div v-if="subjectBtn === 22" class="left_b_cont">
          <div class="left_b_cont_c">
            <div class="left_b_cont_c_item" v-for="item in roadEquipment" :key="item.id">
              <img :src="item.imgList[item.state]" alt="" class="left_b_cont_c_item_img">
              <div class="left_b_cont_c_item_txt">{{ item.name }}</div>
            </div>
            <div class="left_b_cont_c_sba">
              <img class="left_b_cont_c_sba_img" src="@/assets/screen/xtb/sb.png" alt="">
              <div class="left_b_cont_c_sba_txt">清空图层</div>
            </div>
          </div>
        </div>
        <div v-if="subjectBtn === 23" class="left_b_cont">路网设备</div>
      </div>
    </div>
    <!-- 右边 -->
    <div class="home_page_right">
      <div class="home_page_right_t_txt">
        <div class="home_page_left_t_txt_l">
          <div class="home_page_left_t_txt_l_tit">状况统计</div>
        </div>
        <div class="home_page_right_r"></div>
      </div>
      <div class="home_page_right_con">
        <div class="home_page_right_con_event">预警事件</div>
        <div class="home_page_right_con_ec">
          <div class="con_ec_left">
            <div class="con_ec_left_c">
              <div class="con_ec_left_c_t">今日: <span class="ec_left_c_t_val">0</span> 起</div>
              <div class="con_ec_left_c_t">本月: <span class="ec_left_c_t_val">0</span> 起</div>
            </div>
          </div>
          <!--  TODO -->
          <div class="con_ec_cen"></div>
          <div class="con_ec_right">
            <div class="con_ec_right_c">
              <div class="con_ec_left_c_t">本周: <span class="ec_left_c_t_val">1</span> 起</div>
              <div class="con_ec_left_c_t">本年: <span class="ec_left_c_t_val">13</span> 起</div>
            </div>
          </div>
        </div>
        <div class="home_page_right_con_event">在途车辆统计</div>
        <div class="home_page_right_car">
          <div class="home_page_right_car_item">
            <carECharts />
            <div class="right_car_item_num">
              <div class="right_car_item_num_dot"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 路 -->
    <div class="home_page_road">
      <div class="home_page_road_t"></div>
      <div class="home_page_road_b"></div>
    </div>
  </div>
</template>

<script>
import GaoDeMap from '@/views/map/index.vue'
import carECharts from '@/views/echarts/carECharts.vue'
import addBoard from '@/views/boardView/addinfo.vue'
import editBoard from '@/views/boardView/editInfo.vue'
import { invokedFunction, getDeviceRealtimeProperty } from '@/api/device/device.js'
import { getAllVmsTemplate, deleteTemplate } from '@/api//board/template.js'
import { getDicts } from '@/api/system/dict/data.js'
export default {
  name: 'indexView',
  data() {
    return {
      formData: [],
      mapIds: '',
      screenDataSize: '',
      activeNames: [],
      showEmit: false,
      boardEmitItem: {}, //修改弹窗的数据
      activeName: 'first',
      dialogTit: '门架式可变信息标志YK16+270',
      dialogInfoLeft: false,
      dialogInfoRight: false,
      mapDialogTop: '0px',
      mapDialogLeft: '0px',
      keyMonitoringList: [
        { id: 1, name: '日累计车流量', val: 59876, unit: '', col: '#00D1FF' },
        { id: 2, name: '当前在途车辆', val: 4618, unit: '', col: '#00D1FF' },
        { id: 3, name: '当前在途车辆', val: 4618, unit: '', col: '#00D1FF' },
        { id: 4, name: '施工路段', val: 0, unit: '处', col: '#00D1FF' },
        { id: 5, name: '气象预警', val: 4, unit: '处', col: '#FFDB82' },
        { id: 6, name: '异常设备', val: 5, unit: '', col: '#FF5F5F' },
        { id: 7, name: '感知事件', val: 13, unit: '', col: '#00D1FF' },
        { id: 8, name: '平均车速', val: 96.3, unit: '', col: '#00EBC1' },
        { id: 9, name: '平均车速', val: 96.3, unit: '', col: '#00EBC1' }
      ],
      subjectBtn: 22,
      subjectBtnList: [
        { id: 21, name: '事件专题' },
        { id: 22, name: '路测设备' },
        { id: 23, name: '路网设备' }
      ],
      roadEquipment: [
        // 0正常 1异常
        { id: 31, name: '设备箱', state: 0, imgList: [require('@/assets/screen/xtb/lcsb/sbx.png'), require('@/assets/screen/xtb/lcsb/sb.png')] },
        { id: 32, name: '护栏碰撞', state: 0, imgList: [require('@/assets/screen/xtb/lcsb/hlpz.png'), require('@/assets/screen/xtb/lcsb/hlp.png')] },
        { id: 33, name: '疲劳唤醒', state: 0, imgList: [require('@/assets/screen/xtb/lcsb/plhx.png'), require('@/assets/screen/xtb/lcsb/plh.png')] },
        { id: 34, name: '摄像机', state: 1, imgList: [require('@/assets/screen/xtb/lcsb/sxj.png'), require('@/assets/screen/xtb/lcsb/sx.png')] },
        { id: 35, name: '行车诱导', state: 0, imgList: [require('@/assets/screen/xtb/lcsb/xcyd.png'), require('@/assets/screen/xtb/lcsb/xcy.png')] },
        { id: 36, name: '交调', state: 0, imgList: [require('@/assets/screen/xtb/lcsb/jx.png'), require('@/assets/screen/xtb/lcsb/jdq.png')] },
        { id: 37, name: '语音广播', state: 0, imgList: [require('@/assets/screen/xtb/lcsb/yygb.png'), require('@/assets/screen/xtb/lcsb/yyg.png')] },
        { id: 38, name: '情报板', state: 0, imgList: [require('@/assets/screen/xtb/lcsb/qbb.png'), require('@/assets/screen/xtb/lcsb/qb.png')] },
        { id: 39, name: '合流区', state: 0, imgList: [require('@/assets/screen/xtb/lcsb/hlq.png'), require('@/assets/screen/xtb/lcsb/hl.png')] }
      ],
      dialogInfoList: [],
      moBanList: [],
      moBanDataHandList: [],
      moBanDataList: [
        {
          id: 1001,
          bt: '日常通用',
          mbList: [
            { id: 305, txt: '谨慎驾驶', w: 768, h: 64, col: '#FFFF00', fz: 48, pdl: 288, pdt: 8, fm: '黑体' },
            { id: 306, txt: '谨慎驾驶 注意安全', w: 768, h: 160, col: '#03FF00', fz: 60, pdl: 0, pdt: 0, fm: '黑体' },
            { id: 307, txt: '谨慎驾驶 注意安全', w: 768, h: 160, col: '#FF0000', fz: 60, pdl: 0, pdt: 0, fm: '黑体' },
            { id: 308, txt: '谨慎驾驶, <br/> 注意安全', w: 768, h: 160, col: '#03FF00', fz: 60, pdl: 0, pdt: 0, fm: '黑体' }
          ]
        },
        { id: 1002, bt: '施工管控', mbList: [{ id: 309, txt: '道路施工, <br/> 谨慎驾驶', w: 768, h: 160, col: '#FFFF00', fz: 60, pdl: 0, pdt: 0, fm: '黑体' }] },
        { id: 1003, bt: '恶劣天气', mbList: [{ id: 309, txt: '救援   拨打96659', w: 768, h: 160, col: '#FFFF00', fz: 60, pdl: 0, pdt: 0, fm: '黑体' }] },
        { id: 1004, bt: '交通拥堵', mbList: [{ id: 309, txt: '救援   拨打96659', w: 768, h: 160, col: '#FFFF00', fz: 60, pdl: 0, pdt: 0, fm: '黑体' }] },
        { id: 1005, bt: '突发事件', mbList: [{ id: 309, txt: '救援   拨打96659', w: 768, h: 160, col: '#FFFF00', fz: 60, pdl: 0, pdt: 0, fm: '黑体' }] },
        { id: 1006, bt: '警情播报', mbList: [{ id: 309, txt: '救援   拨打96659', w: 768, h: 160, col: '#FFFF00', fz: 60, pdl: 0, pdt: 0, fm: '黑体' }] }
      ],

      tabInfoList: [
        { id: 401, tit: '设备名称', txt: '门架式可变信息标志', col: '#fff' },
        { id: 402, tit: '道路名称', txt: 'G35济菏高速', col: '#fff' },
        { id: 403, tit: '所属机构', txt: '山东高速济南发展公司', col: '#fff' },
        { id: 404, tit: '设备桩号', txt: 'K094+079', col: '#fff' },
        { id: 405, tit: '设备厂商', txt: '光电比特', col: '#fff' },
        { id: 406, tit: '设备状态', txt: '离线', col: '#888' }
      ]
    }
  },

  props: [],
  // 注册组件
  components: { GaoDeMap, carECharts, addBoard, editBoard },
  // 计算属性
  computed: {},
  // 生命周期函数
  created() {
    this.getTemplateHeaderFn()
    // this.getTemplateFn()
  },
  // 侦听器
  // watch: {
  //   data: {
  //     // 自动触发,只能使用handler
  //     handler(newVal, oldVal) {
  //       // console.log(newVal);
  //       // console.log(oldVal);
  //     }
  //     // true表示侦听器立即触发(immediate默认为false)
  //     // immediate: true,
  //     // true表示深度侦听，侦听对象属性的变化
  //     // deep: true
  //   }
  // },
  // 事件函数
  methods: {
    // 地图点位
    mapClickEvent(e) {
      this.dialogInfoList = []
      console.log('父组件地图点位', e)
      this.dialogInfoLeft = true
      this.mapIds = e.target._opts.extData.ids
      this.screenDataSize = e.target._opts.extData.screenSize
      this.dialogTit = e.target._opts.extData.tit
      this.getTemplateHeaderFn()
      this.onSubmit(this.mapIds)
      // this.mapDialogTop = e.pixel.y + 'px'
      // this.mapDialogLeft = e.pixel.x + 'px'
      // this.$refs.mapDialog.style.top = e.pixel.y + 'px'
      // this.$refs.mapDialog.style.left = e.pixel.x + 'px'
      // console.log(this.$refs.mapDialog)
    },
    // 信息发布
    InformationReleaseFn() {
      // invokedFunction('65', '').then(res => {
      //   console.log(res)
      // })

      this.$confirm('是否确定发布情报板?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          let loading = this.$loading({
            lock: true,
            text: 'Loading',
            spinner: 'el-icon-loading',
            background: 'rgba(0, 0, 0, 0.7)'
          })
          const objAll = {}
          // objAll.deviceIds = this.checkedCities.toString()
          objAll.deviceIds = this.mapIds
          let that = this

          // let devicePixel = this.form.devicePixel.split('*')
          console.log('接口参数', this.dialogInfoList)
          let newArr = this.dialogInfoList.map(item => {
            let obj = {}

            obj.STAY = item.stopTime
            obj.ACTION = item.inScreenMode
            obj.SPEED = item.tcontents[0].fontSpacing
            obj.COORDINATE = item.screenSize.replace('*', '')
            obj.COLOR = item.tcontents[0].fontColor
            obj.FONT = this.getFontValue(item.tcontents[0].fontType)
            obj.FONT_SIZE = item.tcontents[0].fontSize

            obj.CONTENT = item.tcontents[0].content.replaceAll(',', '\\,')
            obj.CONTENT = item.tcontents[0].content.replaceAll('=', '\\=')
            obj.CONTENT = item.tcontents[0].content.replace(/\n/g, '\\\\n')

            // obj.CONTENT = item.tcontents[0].content.replace(/\n|\r\n/g, '<r><n>')
            obj.width = this.processString(item.screenSize, 'w')
            obj.height = this.processString(item.screenSize, 'h')
            obj.formatStyle = item.tcontents[0].formatStyle
            return obj
          })

          objAll.parameters = newArr
          const param = {
            objectData: JSON.stringify(objAll)
          }
          console.log('newArr11111', newArr)

          /* invokedFunction(65,'1B',{fileId:'1'}).then(res =>{
          debugger
          console.log('发布消息,播放文件-----------------------------')
          console.log(res)
        }).catch(()=>{
          this.$modal.msgError("发布失败,请重试");
        })*/

          invokedFunction(595, 11, { size: '65535', fileName: 'play099.lst' })
            .then(res => {
              debugger
              console.log('发布消息,校验文件名-------------------------------------')
              console.log(res)
              if (res.data.result == '01') {
                invokedFunction(595, 13, { parameters: newArr })
                  .then(res => {
                    debugger
                    console.log('发布消息,发送文件内容-----------------------------')
                    console.log(res)
                    if (res.data.result == '01') {
                      invokedFunction(595, '1B', { fileId: '99' })
                        .then(res => {
                          debugger
                          console.log('发布消息,播放文件-----------------------------')
                          console.log(res)
                        })
                        .catch(() => {
                          this.$modal.msgError('发布失败,请重试')
                        })
                    }
                  })
                  .catch(() => {
                    this.$modal.msgError('发布失败,请重试')
                  })
              }
            })
            .catch(() => {
              this.$modal.msgError('发布失败,请重试')
            })
          loading.close()
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消发布情报板'
          })
          loading.close()
        })
    },
    // 回读
    onSubmit(deviceId) {
      // this.submitButton = true
      // // this.loading = true
      // this.contentList = []
      // // 获取情报板修改页面信息
      // const param = {
      //   deviceId: deviceId
      // }
      /* await getBoardContentData(param)
        .then(res => {
          console.log(res, 'onSubmit')
          var contents = res.data.parameters
          console.log(contents, 'onSubmit-----contents')
          for (let i = 0; i < contents.length; i++) {
            let item = contents[i]
            item.COLOR = this.getColorStyle(item.COLOR)
            item.FONT_SIZE = Number(item.FONT_SIZE.substring(0, 2)) + 'px'
            item.ID = i
            item.FONT = this.getFont(item.FONT)
            this.contentList.push(item)
          }
          console.log(this.contentList, 'onSubmit-----this.contentList')
          this.loading = false
          this.submitButton = false
          // this.rowDrop();
        })
        .catch(e => {
          this.loading = false
          this.submitButton = false
        })*/
      getDeviceRealtimeProperty(deviceId, '3A', { async: false })
        .then(res => {
          console.log('回读消息------------------------')
          var contentsA = res.data['3A'].content
          console.log('回读消息--1111111111---', contentsA)

          this.dialogInfoList = contentsA.map(item => {
            return {
              ...item,
              stopTime: item.residenceTime,
              inScreenMode: item.screenEntryMethod,
              screenSize: item.displayAreaWidth + '*' + item.displayAreaHeight,
              tcontents: [
                {
                  ...item,
                  fontSpacing: item.fontSpacing,
                  fontSize: parseInt(item.fontSize.replace(/\D/g, '')),
                  fontType: item.font,
                  fontColor: item.foregroundColor.toUpperCase(),
                  formatStyle: item.horizontalAlignment,

                  content: item.textContent.replaceAll('\\,', ',').replaceAll('\\=', '=').replaceAll('\\\\n', '\n')
                }
              ]
            }
          })

          console.log('回读处理后的数据', this.dialogInfoList)

          // for (let i = 0; i < contents.length; i++) {
          //   let item = contents[i]
          //   item.COLOR = item.foregroundColor
          //   item.FONT_SIZE = item.fontSize + 'px'
          //   item.ID = i
          //   item.FONT = item.font
          //   item.COORDINATE = this.covering(item.xCoordinate) + this.covering(item.yCoordinate)
          //   ;(item.screenSize = item.displayAreaWidth + '*' + item.displayAreaHeight), (item.CONTENT = item.textContent.replaceAll('\\,', ','))
          //   item.CONTENT = item.CONTENT.replaceAll('\\=', '=')
          //   item.CONTENT = item.CONTENT.replaceAll('\\\\n', '\n')
          //   item.formatStyle = item.verticalAlignment
          //   this.contentList.push(item)

          //   this.form.devicePixel = item.screenSize
          // }

          // console.log(this.contentList, 'onSubmit-----this.contentList')
          // this.rowDrop();

          // this.loading = false
          // this.submitButton = false
        })
        .catch(e => {
          this.$modal.msgError('回读失败,请重试')
        })
      // this.deviceId = deviceId

      // 根据情报板id获取分辨率
      /*getBoardInfo(deviceId).then(res => {
        console.log(res, 'getBoardInfo')
        this.form.devicePixel = res.data.pixel
        if (res.data.deviceId) {
          this.disabledButton = false
        } else {
          this.disabledButton = true
        }
      })*/
    },
    // 获取模板头部
    getTemplateHeaderFn() {
      this.moBanList = []
      getDicts('iot_template_category').then(res => {
        this.moBanDataHandList = res.data
        this.activeNames = res.data.map(item => {
          return item.dictCode
        })
        this.getTemplateFn()
      })
    },
    // 获取模板
    getTemplateFn() {
      getAllVmsTemplate({ devicePixel: this.screenDataSize }).then(res => {
        this.moBanList = this.moBanDataHandList.map((item, index) => {
          if (item.dictSort === index) {
            return {
              ...item,
              mbList: res.data[index]
            }
          }
        })
      })
    },
    panelChangeFn(val) {
      console.log(val)
    },
    // 接收子组件新增待发模板
    addInfo(form) {
      console.log('待发新增', form)
      this.dialogInfoList.push({
        id: form.id,
        screenSize: form.screenSize,
        COORDINATE: form.coordinate,
        ...form,
        tcontents: [{ ...form, content: form.CONTENT, fontSize: parseInt(form.FONT_SIZE.replace(/\D/g, '')), fontType: form.FONT, fontColor: form.COLOR }],
        id: Math.floor(Math.random() * 10000000000000000),
        txt: form.CONTENT,
        fz: parseInt(form.FONT_SIZE.replace(/\D/g, '')),
        fm: form.FONT,
        formatStyle: form.formatStyle,
        ...this.processString(form.screenSize),
        ...this.processStrNum(form.COORDINATE)
      })
      console.log('新增模板111', this.dialogInfoList)
      // this.getTemplateHeaderFn()
      // console.log(this.dialogInfoList)
      // form.ID = this.contentList.length
      // this.contentList.push(deepClone(form))
      // this.$message.success('添加成功')
      // this.$forceUpdate()
    },
    // 打开添加信息弹窗
    addMoDataInfoFn(type, mode) {
      this.$refs.addinfo.init('', type, mode)
    },
    // 修改弹窗
    editOutline(item, index, type) {
      this.showEmit = true
      this.index = index
      this.editType = type
      console.log('修改弹窗', item)
      this.boardEmitItem = {
        FONT_SIZE: item.tcontents[0].fontSize + 'px',
        COLOR: item.tcontents[0].fontColor,
        CONTENT: item.tcontents[0].content,
        COORDINATE: item.tcontents[0].coordinate,
        FONT: this.getFont(item.tcontents[0].fontType),
        SPEED: item.tcontents[0].fontSpacing,
        formatStyle: item.tcontents[0].formatStyle,
        ACTION: item.inScreenMode, //出屏方式
        STAY: item.stopTime, //停留时间
        type: type,
        screenSize: item.screenSize,
        category: item.category,
        id: item.id,
        tcontentsId: item.tcontents[0].id
      }
    },
    // // // 待下发 编辑
    // openQbbDrawer(item, index, type) {
    //   this.index_ = index
    //   console.log(item)
    //   this.boardEmitItem = item
    //   this.boardEmitItem.screenSize = this.form.devicePixel
    //   this.boardEmitItem.deviceId = this.deviceId
    //   this.boardEmitItem.type = type

    //   this.showEmit = true
    // },
    // 接收子组件form表单 修改
    receiveForm(form) {
      console.log('接收子组件form表单 修改111111111', form)
      this.formData = form
      console.log('开始的数据', this.dialogInfoList)
      this.dialogInfoList = this.dialogInfoList.map(item => {
        if (item.id === form.id) {
          return { ...item, tcontents: [{ ...item.tcontents[0], ...form, content: form.CONTENT, fontSize: parseInt(form.FONT_SIZE.replace(/\D/g, '')), fontType: form.FONT, fontColor: form.COLOR }] }
        }
        return item
      })
      console.log('修改后的数据', this.dialogInfoList)
      // this.getTemplateHeaderFn()
      this.$forceUpdate()
    },
    dialogClose() {
      this.showEmit = false
      this.arrowRightVisible = false
      // setTimeout(() => {
      //   this.allVmsTemplate('no')
      // }, 500)
    },
    delMoFn(item) {
      console.log(item)
      // deleteTemplate(item.tcontents[0].templateId)
      this.removeItemById(this.dialogInfoList, item.id)

      // this.$confirm('确认要删除吗？')
      //   .then(_ => {
      //     console.log(item)
      //     // deleteTemplate(item.tcontents[0].templateId)
      //     this.removeItemById(this.dialogInfoList, item.id)
      //     this.$message({
      //       message: '删除成功!',
      //       type: 'success'
      //     })
      //   })
      //   .catch(_ => {})
    },
    putLeftFn(item) {
      console.log('点击事件', item)
      this.dialogInfoList.push(item)
    },
    tabClickFn(tab, event) {
      console.log(tab, event)
    },
    closeDialogBtnFn() {
      this.dialogInfoLeft = false
      this.dialogInfoRight = false
    },
    showCeInfoFn() {
      this.dialogInfoRight = !this.dialogInfoRight
    },
    subjectBtnFn(item) {
      this.subjectBtn = item.id
    },
    removeItemById(arr, id) {
      const index = arr.findIndex(item => item.id === id) // 找到要删除项的索引
      if (index !== -1) {
        arr.splice(index, 1) // 从数组中删除该项
      }
    },
    getScrollSz(w) {
      if (w > 765) {
        return 3
      } else if (w > 479) {
        return 2
      } else if (w > 191) {
        return 1
      }
    },
    processString(str, x) {
      const parts = str.split('*') // 将字符串按照 '*' 分割成数组
      const w = parseInt(parts[0]) // 将第一个部分解析为整数
      const h = parseInt(parts[1]) // 将第二个部分解析为整数
      if (x === 'w') {
        return w
      } else if (x === 'h') {
        return h
      } else {
        return { w, h } // 返回包含 w 和 h 属性的对象
      }
    },
    processStrNum(str, x) {
      const pdl = parseInt(str.slice(0, 3)) // 截取前三位并解析为整数
      const pdt = parseInt(str.slice(3)) // 截取后三位并解析为整数
      if (x === 'l') {
        return pdl
      } else if (x === 't') {
        return pdt
      } else {
        return { pdl, pdt } // 返回包含 pdl 和 pdt 属性的对象
      }
    },
    getFont(font) {
      if (font == 'KaiTi' || font == 'k') {
        return '楷体'
      } else if (font == 'SimSun' || font == 's') {
        return '宋体'
      } else if (font == 'SimHei' || font == 'h') {
        return '黑体'
      } else if (font == 'FangSong' || font == 'f') {
        return '仿宋'
      } else if (font == 'LiSu' || font == 'l') {
        return '隶书'
      } else {
        return font
      }
    },
    // 转报文 字体
    getFontValue(font) {
      if (font == '黑体' || font == 'SimHei') return '1'
      if (font == '楷体' || font == 'KaiTi') return '2'
      if (font == '仿宋' || font == 'FangSong') return '4'
      if (font == '隶书' || font == 'LiSu') return '5'
      else return '3' //宋体
    },

    // 转报文 色号
    getColorValue(color) {
      if (color == '蓝色' || color == 'blue') return '0000FF'
      if (color == '绿色' || color == '#00FF00' || color == 'GreenYellow') return '00FF00'
      if (color == '红色' || color == 'red') return 'FF0000'
      if (color == '黄色' || color == 'yellow') return 'FFFF00'
      return 'FFFFFF' //白色
    },
    // 居中
    getTextAlign(font) {
      if (font == '0') {
        return 'left'
      } else if (font == '1') {
        return 'right'
      } else {
        return 'center'
      }
    }
  }
}
</script>
<style lang='scss' scoped>
.home_page {
  width: 100%;
  height: calc(100vh - 65px);
  position: relative;
}
.home_page_map {
  width: 100%;
  height: 100%;
}
.home_page_left {
  width: 23.85vw;
  height: 65vh;
  margin-top: 19px;
  position: absolute;
  left: 1%;
  top: 0%;
}
.home_page_left_t {
  width: 100%;
  height: 30vh;
  margin-bottom: 1vh;
  background-image: url('~@/assets/images/screen/maplt.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
}
.home_page_left_b {
  width: 100%;
  height: 34vh;
  padding: 2vh 1vw;
  background-image: url('~@/assets/images/screen/maplb.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
}
.home_page_right {
  width: 23.85vw;
  height: 65vh;
  margin-top: 19px;
  position: absolute;
  right: 1%;
  top: 0%;
  background-image: url('~@/assets/images/screen/mapr.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
}
.home_page_road {
  width: 98%;
  height: 24vh;
  position: absolute;
  left: 1%;
  bottom: 0%;
}
.home_page_road_t {
  width: 8.54vw;
  height: 3.33vh;
  border-radius: 11px 11px 0px 0px;
  opacity: 1;
  border: 1px solid #2ad9fd;
}
.home_page_road_b {
  width: 100%;
  height: calc(100% - 3.33vh);
  background-image: url('~@/assets/images/screen/maproad.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
}
.home_page_left_t_txt {
  width: 100%;
  height: 5.56vh;
  padding: 1vh 1.5vw 0 0.35vw;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.home_page_right_t_txt {
  width: 100%;
  height: 5.56vh;
  padding: 1vh 1.5vw 0 0.3vw;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.home_page_left_t_txt_l {
  width: 14.06vw;
  height: 5.56vh;
  padding-left: 1vw;
  background-image: url('~@/assets/screen/xtb/titbg.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
  display: flex;
  align-items: center;
}
.home_page_left_t_txt_r {
  width: 0.94vw;
  height: 1.2vh;
  margin-top: 1.5vh;
  cursor: pointer;
  background-image: url('~@/assets/screen/xtb/left.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
}
.home_page_right_r {
  width: 0.94vw;
  height: 1.2vh;
  margin-top: 1.5vh;
  cursor: pointer;
  background-image: url('~@/assets/screen/xtb/right.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
}
.home_page_left_t_txt_l_tit {
  color: #fff;
  font-size: 20px;
}
.home_page_left_t_b {
  width: 100%;
  height: calc(100% - 6vh);
  padding: 2vh 1vw;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.home_page_left_t_b_item {
  width: 6.77vw;
  height: 6.3vh;
  color: #fff;
}
.home_page_left_t_b_item_top {
  width: 100%;
  height: 50%;
  text-align: center;
  line-height: 5vh;
  color: #00d1ff;
}
.home_page_left_t_b_item_bom {
  width: 100%;
  height: 50%;
  text-align: center;
  font-size: 0.875rem;
  line-height: 3vh;
  background-image: url('~@/assets/screen/xtb/btnbg.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
}
.t_b_item_top_unit {
  font-size: 10px;
  color: #fff;
  transform: scale(0.8);
}
.home_page_left_b_btn {
  width: 100%;
  height: 3.5vh;
  display: flex;
  justify-content: space-between;
}
.home_page_left_b_btn_item {
  width: 6.51vw;
  height: 100%;
  cursor: pointer;
  text-align: center;
  line-height: 3.8vh;
  color: #fff;
  font-size: 0.875rem;
  background-image: url('~@/assets/screen/xtb/ztbtn.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
}
.left_b_cont {
  width: 100%;
  height: calc(100% - 3.5vh);
}
.left_b_cont_active {
  color: #00d1ff;
  background-image: url('~@/assets/screen/xtb/actbtn.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
}
.left_b_cont_c {
  width: 100%;
  height: 100%;
  padding-top: 2vh;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  position: relative;
}
.left_b_cont_c_item {
  width: 16%;
  height: 7.5vh;
  text-align: center;
  cursor: pointer;
}
.left_b_cont_c_item_img {
  width: 1.67vw;
  height: 2.96vh;
}
.left_b_cont_c_item_txt {
  font-size: 12px;
  color: #fff;
  transform: scale(0.8);
}
.left_b_cont_c_sba {
  width: 4.58vw;
  height: 2.87vh;
  position: absolute;
  right: 4%;
  bottom: 4%;
  border-radius: 20px 20px 20px 20px;
  opacity: 1;
  border: 1px solid #25d8ff;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}
.left_b_cont_c_sba_img {
  width: 16px;
  height: 16px;
}
.left_b_cont_c_sba_txt {
  color: #fff;
  font-size: 12px;
  transform: scale(0.8);
}
.home_page_right_con {
  width: 100%;
  height: calc(100% - 6vh);
  padding: 2vh 0.5vw 0 0.5vw;
}
.home_page_right_con_event {
  width: 100%;
  height: 2.5vh;
  color: #fff;
  padding-left: 1.8vw;
  font-size: 14px;
  background-image: url('~@/assets/screen/xtb/jtyc.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
}
.home_page_right_con_ec {
  width: 100%;
  height: 15.28vh;
  padding: 0 0.5vw;
  display: flex;
}
.con_ec_left {
  width: 30%;
  height: 100%;
  display: flex;
  align-items: center;
}
.con_ec_cen {
  width: 40%;
  height: 100%;
  // TODO
  // background-color: orange;
}
.con_ec_right {
  width: 30%;
  height: 100%;
  display: flex;
  align-items: center;
}
.con_ec_left_c {
  width: 100%;
  height: 50%;
  padding: 0.5vh 0 0.5vh 0.5vw;
  background-image: url('~@/assets/screen/xtb/zktjl.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
.con_ec_right_c {
  width: 100%;
  height: 50%;
  padding: 0.5vh 0 0.5vh 0.5vw;
  background-image: url('~@/assets/screen/xtb/zktj.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
.con_ec_left_c_t {
  width: 100%;
  height: 38%;
  color: #fff;
  font-size: 12px;
  line-height: 2.6vh;
  padding-left: 0.7vw;
  background: linear-gradient(90deg, #0091b0 0%, rgba(37, 216, 255, 0) 100%);
  border-radius: 16px 16px 16px 16px;
  opacity: 1;
  border-image: linear-gradient(90deg, rgba(42, 217, 253, 1), rgba(42, 217, 253, 0)) 1 1;
}
.ec_left_c_t_val {
  color: #ffcd4d;
  font-size: 16px;
}
.home_page_right_car {
  width: 100%;
  height: 17vh;
  padding: 1vh 1vw;
}
.home_page_right_car_item {
  width: 33%;
  height: 100%;
  position: relative;
}
.right_car_item_num {
  width: 75%;
  height: 2.41vh;
  background: linear-gradient(270deg, rgba(42, 217, 253, 0) 0%, #2ad9fd 100%);
  border-radius: 20px 20px 20px 20px;
  opacity: 1;
  border-image: linear-gradient(90deg, rgba(42, 217, 253, 1), rgba(42, 217, 253, 0)) 1 1;
  position: absolute;
  left: 50%;
  bottom: 2%;
  transform: translateX(-50%);
  display: flex;
}
.map_dialog {
  width: 510px;
  height: 550px;
  background-color: pink;
  position: absolute;
  left: 0px;
  top: 0px;
  transform: translate(-110%, -110%);
}
.dialog_info {
  width: 49.48vw;
  height: 56vh;
  position: absolute;
  top: 12%;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  justify-content: space-around;
  align-items: flex-end;
}
.dialog_info_left {
  width: 26.56vw;
  height: 100%;
  background-color: #114c66;
}
.dialog_info_right {
  width: 22.4vw;
  height: 51.44vh;
  border: 2px solid #196980;
  background-color: #114c66;
  padding: 1vh 0.5vw;
  overflow-y: scroll;
}
.dialog_info_left_t {
  width: 100%;
  height: 4.44vh;
  padding: 0 1vw;
  background-image: url('~@/assets/screen/xtb/qbbtit.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.dialog_info_left_t_txt {
  color: #3de8ff;
  font-size: 18px;
}
.dialog_info_left_t_img {
  width: 13px;
  height: 13px;
  cursor: pointer;
}
.dialog_info_left_t_ti {
  width: 55%;
  height: 0.5vh;
  position: absolute;
  left: 0;
  top: 0;
}
.dialog_info_left_show {
  width: 100%;
  height: 30vh;
  padding: 1vh 2vw 1vh 0.5vw;
  position: relative;
}
.dialog_info_left_show_box {
  width: 100%;
  // height: 100%;
  overflow-y: scroll;
}
.dialog_info_left_show_l {
  width: 18.5vw;
  // height: 4.91vh;
  border: 2px solid #1d7890;
  padding: 0.2vh 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
.dialog_info_left_show_r {
  width: 5vw;
  // height: 4.91vh;
  border: 2px solid #1d7890;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.dialog_info_left_show_l_xsq {
  width: 13.33vw;
  height: 100%;
  font-size: 18px;
  color: #ff0000;
  background-color: #000;
  line-height: 1;
  // text-align: center;
  display: flex;
  // justify-content: center;
  align-items: center;
}

.show_r_btn {
  width: 1.67vw;
  height: 2.96vh;
  cursor: pointer;
}
.dialog_info_left_show_r_btn1 {
  background-image: url('~@/assets/screen/xtb/gg.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
}
.dialog_info_left_show_r_btn2 {
  background-image: url('~@/assets/screen/xtb/xx.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
}
.dialog_info_left_show_r_btn3 {
  background-image: url('~@/assets/screen/xtb/zz.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
}
.dialog_info_left_show_box_item {
  margin-bottom: 0.5vh;
  display: flex;
  justify-content: space-between;
}
.dialog_info_left_show_bottom {
  width: 105%;
  height: 16.52vh;
}
.show_bottom_tab_item {
  width: 50%;
  padding: 0.5vh 0;
  display: flex;
  // flex-wrap: wrap;
  // align-items: center;
}
.show_bottom_tab_box {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.show_bottom_tab_item_l {
  color: #3de8ff;
  font-size: 14px;
}
.show_bottom_tab_item_r {
  color: #fff;
  font-size: 14px;
  margin-left: 0.5vw;
}
.dialog_info_left_show_ce {
  position: absolute;
  right: 0%;
  top: 0%;
  width: 24px;
  height: 95px;
  padding: 0.5vh 0;
  background: linear-gradient(180deg, #005c79 0%, #009bcc 100%);
  border-radius: 0px 0px 0px 0px;
  opacity: 1;
  text-align: center;
  cursor: pointer;
}
.show_ce_img {
  width: 15px;
  height: 10px;
  transition: transform 0.3s ease; /* 过渡效果 */
}
.show_ce_txt {
  color: #fff;
  font-size: 13px;
}
.dialog_info_left_show_box_empty {
  font-size: 14px;
  text-align: center;
  color: #fff;
}
.dialog_info_right_tit {
  color: #fff;
  font-size: 14px;
  margin-bottom: 0.5vh;
}
.dialog_info_right_show {
  width: 100%;
  // height: 28vh;
}
.dialog_info_left_show_bottom_btn {
  width: 100%;
  height: 5vh;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  text-align: center;
}
.show_bottom_btn_add {
  width: 90px;
  height: 23px;
  color: #fff;
  font-size: 14px;
  line-height: 23px;
  background: #00b3cc;
  border-radius: 48px 48px 48px 48px;
  opacity: 1;
  margin-right: 0.5vw;
  cursor: pointer;
}
.show_bottom_btn_del {
  width: 90px;
  height: 23px;
  color: #fff;
  font-size: 14px;
  line-height: 23px;
  background: #c87800;
  border-radius: 48px 48px 48px 48px;
  opacity: 1;
  cursor: pointer;
}
//   background-color: #104b65;
//   background-image: url('~@/assets/screen/xtb/qbbtit.png');
//   background-size: 100% 100%;
//   background-repeat: no-repeat;
//   background-position: center;

/* 通用滚动条样式 */
::-webkit-scrollbar {
  width: 3px; /* 设置滚动条宽度 */
  height: 3px; /* 设置滚动条高度 */
}

::-webkit-scrollbar-track {
  background-color: #114c66; /* 设置滚动条轨道颜色 */
}

::-webkit-scrollbar-thumb {
  background-color: #9abce0; /* 设置滚动条滑块颜色 */
  border-radius: 4px; /* 设置滚动条滑块圆角 */
}
::v-deep .el-tabs__nav-wrap::after {
  background-color: #316076;
}

::v-deep .el-tabs__item.is-active {
  color: #3de8ff !important;
}
::v-deep .el-tabs__item {
  color: #fff !important;
}
::v-deep .el-tabs__active-bar {
  background-color: #3de8ff !important;
}
::v-deep .el-collapse-item__header {
  color: #fff;
  height: 28px;
  background-color: #053b4f;
  border: none;
  padding-left: 0.5vw;
}
::v-deep .el-collapse {
  color: #fff;
  border: none;
}
::v-deep .el-collapse-item__wrap {
  color: #fff;
  will-change: height;
  background-color: #053b4f;
  overflow: hidden;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  margin-top: 0.5vh;
  border: none;
}
::v-deep .el-collapse-item__content {
  margin-bottom: 0;
  padding: 0.5vh 0.5vw;
}
::v-deep .el-collapse-item {
  margin-bottom: 1vh;
}
</style>