<template>
  <div>
    <transition>
      <div v-if="visible" class="dialog_info">
        <div class="dialog_info_left">
          <div class="dialog_head">
            <div class="tit">{{ dialogTit }}</div>
            <img class="btnCls" src="@/assets/jihe/images/dialog/ibCls.png" alt="" @click="onClose">
            <img class="deco" src="@/assets/jihe/images/dialog/ibHeadDeco.png" alt="">
          </div>
          <div class="dialogContent">
            <div v-if="selectedBdMsg.length > 0" class="dialogContent_box" style="height: 100%;">
              <vuescroll :ops="scrollOptions" class="templateBox">
              <div v-for="(itm, indx) in selectedBdMsg" :key="indx" class="tplItem">
                <!-- 模板内容 -->
                <BoardPreview class="boardPreview" :boardWH="selectedSize" :tpl="itm"></BoardPreview>
                <!-- 操作按钮 -->
                <div class="infoBtnBox">
                  <el-tooltip content="编辑" placement="top">
                    <p @click="____onEditBoardItem(itm, indx)" class="btn btnEdit"></p>
                  </el-tooltip>
                  <el-tooltip content="删除" placement="top">
                    <p @click="____onDeleteBoardItem(indx)" class="btn btnDelete"></p>
                  </el-tooltip>
                </div>
              </div>
              
            </vuescroll>
            </div>
            <div v-else class="dialogContent_box" style="height: 100%;">
              <div class="dialogContent_box_empty">暂无数据</div>
            </div>
            <div class="dialogContent_bottom">
              <el-tabs v-model="activeTab" @tab-click="tabClickFn">
                <el-tab-pane label="详情信息" name="first">
                  <div class="show_bottom_tab_box">
                    <div class="show_bottom_tab_item">
                      <div class="show_bottom_tab_item_l">设备名称</div>
                      <div class="show_bottom_tab_item_r">{{ device.deviceName }}</div>
                    </div>
                    <div class="show_bottom_tab_item">
                      <div class="show_bottom_tab_item_l">设备桩号</div>
                      <div class="show_bottom_tab_item_r">{{ device.stakeMarkId }}</div>
                    </div>
                    <div class="show_bottom_tab_item">
                      <div class="show_bottom_tab_item_l">屏幕像素</div>
                      <div class="show_bottom_tab_item_r">{{ JSON.parse(device.otherConfig).screenSize }}</div>
                    </div>
                    <!-- <div class="show_bottom_tab_item" v-for="item in tabDataInfoList" :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="dialogContent_bottom_btn">
              <div class="show_bottom_btn_add" @click="____onAddDeviceItem">添加信息</div>
              <div class="show_bottom_btn_del" @click="InformationReleaseFn">信息发布</div>
            </div>
            <div class="sideSwitch" @click="showSidePanel">
              <img class="img" src="@/assets/screen/xtb/leftd.png" alt=""
                :style="{ 'transform': isShowTemplate ? 'rotate(0deg)' : 'rotate(180deg)' }">
              <div class="txt">信息模板</div>
            </div>
            
            <!-- 原型图上没有“附近相机”，代码里暂时关闭
              <div class="sideSwitch" style="top:36%;" @click="showCameraInfoFn">
              <img class="img" src="@/assets/screen/xtb/leftd.png" alt=""
                :style="{ 'transform': dialogInfoCamera ? 'rotate(0deg)' : 'rotate(180deg)' }">
              <div class="txt">附近像机</div>
            </div> -->
          </div>
        </div>
        
        <!-- 信息模板 -->
        <div v-if="isShowTemplate" class="dialog_info_right">
          <vuescroll :ops="scrollOptions" class="templateBox">
              <div v-for="(item, index) in templateAvailable" :key="item.dictValue">
                <!-- 原来是<el-collapse v-model="activeNames"> -->
                <h3>{{ item.dictLabel }}</h3>
                <div v-for="(itm, indx) in item.list" :key="indx" class="tplItem">
                  <!-- 模板内容 -->
                  <BoardTplPreview class="boardPreview" :boardWH="selectedSize" :tpl="itm"></BoardTplPreview>
                  <!-- <div class="infoPreview">
                      <div class="infoBox" :style="____boardBgStyle">
                        <span class="infoTxt" :style="____boardTxtStyle(itm)" v-html="itm.content.replace(/\n|\r\n/g, '<br>').replace(/ /g, '&nbsp')"></span>
                      </div>
                    </div> -->
                  <!-- 操作按钮 -->
                  <div class="infoBtnBox">
                    <el-tooltip content="加入待下发信息" placement="top">
                      <p @click="____onAddToDevice(itm)" class="btn btnApply"></p>
                    </el-tooltip>
                  </div>
                </div>
              </div>
            </vuescroll>
        </div>


        <!-- 附近相机 -->
        <div v-if="dialogInfoCamera" class="dialog_info_right" style="padding:0;">
          <div class="dialog_head" style="height:4vh;">
            <div class="tit">摄像机设备</div>
            <img class="btnCls" src="@/assets/jihe/images/dialog/ibCls.png" alt="" @click="closeCameraBtnFn">
            <img class="deco" src="@/assets/jihe/images/dialog/ibHeadDeco.png" alt="">
          </div>
          <div class="info_right_camera">
            <div class="info_right_camera_top">
              <!-- 视频组件 -->
              <videoView :url="videoUrl" />
            </div>
            <div class="info_right_camera_bom">
              <div class="camera_bom_left">
                <div class="camera_bom_left_item">
                  <div class="camera_bom_left_item_txt">选择相机: </div>
                  <div class="camera_bom_left_item_val">
                    <el-select v-model="cameraVal" placeholder="请选择" size="mini" style="width:130px"
                      @change="cameraValChangeFn">
                      <el-option v-for="item in cameraOptList" :key="item.camId" :label="item.camName"
                        :value="item.camId">
                      </el-option>
                    </el-select>
                  </div>
                </div>
                <div class="camera_bom_left_item" v-for="item in cameraDataVideoList" :key="item.id">
                  <div class="camera_bom_left_item_txt">{{ item.txt }}: </div>
                  <div class="camera_bom_left_item_val">{{ item.val }}</div>
                </div>
              </div>
              <div class="camera_bom_right">
                <div class="camera_bom_right_t">
                  <div class="camera_bom_right_t_box"></div>
                  <div class="camera_bom_right_t_h_po" v-for="item in cameraBtnList" :key="item.id"
                    @click="cameraControlBtnFn(item)"
                    :style="{ 'left': item.le, top: item.to, 'transform': 'rotate(' + item.ro + 'deg)' }"></div>
                </div>
                <div class="camera_bom_right_b">
                  <div class="camera_bom_right_b_btn" v-for="item in cameraControlList" :key="item.id">
                    <div class="camera_bom_right_b_btn_l" @click="cameraControlLeFn(item.numL)"></div>
                    <div class="camera_bom_right_b_btn_c">{{ item.txt }}</div>
                    <div class="camera_bom_right_b_btn_r" @click="cameraControlLeFn(item.numR)"></div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

      </div>
    </transition>

    <BoardInfoEditor @afterSubmit="____onEditSubmit" :mode="editDialog.mode" :type="editDialog.type"
        :visible.sync="editDialog.visible" :screenSize="selectedSize" :tpl="editDialog.tpl"></BoardInfoEditor>

    <!-- 情报板弹框中的弹框 -->
    <addBoard ref="addinfo" @addInfo="addInfo" />
    <editBoard v-if="showEmit" :boardEmitItem="boardEmitItem" @receiveForm="receiveForm" @dialogClose="dialogClose" />
  </div>
</template>

<script>
import addBoard from './addinfo.vue'
import editBoard from './editInfo.vue'
import { listDevice, invokedFunction, getDeviceRealtimeProperty } from '@/api/device/device.js'
import infoBoardTestData from "@/common/infoBoardTestData.js"
import { getBoardDeviceInfo } from '@/api/board/board'

import BoardPreview from "@screen/components/infoBoard/BoardPreview.vue"
import BoardTplPreview from "@screen/components/infoBoard/BoardTplPreview.vue"
import BoardInfoEditor from '@screen/components/infoBoard/BoardInfoEditor'

import vuescroll from 'vuescroll'
import scrollOptions from '@/common/scrollbar.js'

import { getTemplateList } from '@/api/board/template'

export default {
  name: 'InfoBoard',
  data(){
    return {
      dialogTit: '门架式可变信息标志YK16+270',
      isShowTemplate: false,
      dialogInfoCamera: false,
      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: '黑体' }] }
      ],
      activeNames:[1001 , 1002],
      activeTab:"first",
      moBanDataList: [{
        dictCode: 1001,
        dictLabel: "日常通用",
        mbList: [
          {
          id: 3001,
          screenSize: "200*80",
          tcontents: [
            {
              content: "谨慎驾驶 注意安全",
              formatStyle: 0,
              fontSize:"24",
              fontType:"微软雅黑",
              fontColor:"0000FF"
            }
          ]
        }
      ]
      }, {
        dictCode: 1002,
        dictLabel: "施工管理",
        mbList: [
          {
            id: 3002,
            screenSize: "800*90",
            tcontents: [
              {
                content: "道路施工<br>缓慢驾驶",
                formatStyle: 0,
                fontSize: "18",
                fontType: "微软雅黑",
                fontColor: "FFFF00"
              }
            ]
          }
        ]
      }],
      tabDataInfoList: [],
      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' }
      ],
      cameraDataVideoList: [],
      cameraDataList: [
        { id: 3001, txt: '设备名称', val: '疲劳唤醒设备1' },
        { id: 3002, txt: '设备编号', val: 'G00030497B0180001' },
        { id: 3003, txt: '设备桩号', val: 'K097+900' },
        { id: 3004, txt: '经/纬度', val: '117.071152/35.910659' },
        { id: 3005, txt: '道路名称', val: 'G35济菏高速' },
        { id: 3006, txt: '道路状况', val: '正常' },
        { id: 3007, txt: '方向', val: '菏泽' }
      ],
      cameraBtnList: [
        { id: 4001, cmd: 23, dir: 'left', le: '26%', to: '33%', ro: 0 },
        { id: 4002, cmd: 21, dir: 'up', le: '46%', to: '4%', ro: 90 },
        { id: 4003, cmd: 24, dir: 'right', le: '65%', to: '33%', ro: 180 },
        { id: 4004, cmd: 22, dir: 'downward', le: '46%', to: '62%', ro: 267 }
      ],
      cameraControlList: [
        { id: 5001, txt: '变倍', numL: 11, numR: 12 },
        { id: 5002, txt: '光圈', numL: 16, numR: 15 },
        { id: 5003, txt: '聚焦', numL: 14, numR: 13 }
      ],
      showEmit:false,

      selectedBdMsg:[],
      selectedSize:"",
      editDialog: {
        mode: "",
        type: "",
        visible: false,
        tpl: {}
      },
      scrollOptions,
      templateAvailable:null,
      tplCategory: [], //模板
      templateAll:[]
    }
  },
  props:{
    visible:{
      type:Boolean,
      default:false
    },
    device: {
      type:Object,
      default:null
    }
  },
  watch:{
    device: {
      handler(newV) {
        this.____getDeviceInfo();
      },
      immediate: false
    }
  },
  components: { addBoard, editBoard, BoardPreview, BoardTplPreview, BoardInfoEditor, vuescroll},
   created() {
      this.____getTemplateCategory();
      this.____getAllTemplate();
    // this.getTemplateSeries();
  },
  computed:{
  },
  mounted() {
    //测试数据
    this.dialogInfoList = this.boardDataConvert(infoBoardTestData);
    this.templateList = this.moBanDataList;
    let deviceState = "online";
    this.tabDataInfoList = [
      { 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: deviceState == 'online' ? '在线' : '离线', col: deviceState == 'online' ? '#10d269' : '#888' }
    ]
  },
  methods: {
     // 获取信息模板分类
    ____getTemplateCategory() {
      return this.getDicts('iot_template_category').then(res => {
        this.tplCategory = res.data;
      })
    },

    ____getAllTemplate() {
      return getTemplateList().then((res) => {
        this.templateAll = res.data;
      });
    },

    ____getDeviceInfo(){
      this.selectedSize = JSON.parse(this.device.otherConfig).screenSize;
      this.____setAvailableTemplate();

      getBoardDeviceInfo(this.device.iotDeviceId).then(res => {
        this.selectedBdMsg = res.data["3A"].content;
      }).catch(err => {

      })
    },

    ____setAvailableTemplate() {
      this.templateAvailable = [];
      this.tplCategory.forEach((item, index) => {
        let arr = this.templateAll['' + index];
        if (arr.length > 0) {
          let temp = [];
          arr.forEach(tpl => {
            if (tpl.screenSize == this.selectedSize) {
              temp.push(tpl);
            }
          })
          if (temp.length > 0) {
            this.templateAvailable.push({
              ...item,
              list: temp
            });
          }
        }
      })
    },

    ____onEditBoardItem(tpl, index) {
      // type : board template
      // mode : edit add toDevice toTemplate
      this.boardItemEdtingIndex = index;
      this.editDialog = {
        visible: true,
        mode: "edit",
        type: "device",
        tpl
      }
    },

    ____onDeleteBoardItem(index) {
      if (index > -1) {
        this.selectedBdMsg.splice(index, 1)
        this.$message.success('删除成功,发布后才能生效。')
      }
    },

    ____onEditSubmit(para) {
      this.editDialog.tpl = {};
      this.editDialog.visible = false;

      if (para.type == "device") {
        if (para.mode == "edit") {
          this.selectedBdMsg[this.boardItemEdtingIndex] = para.data;
        } else {
          this.selectedBdMsg.push(para.data);
        }
      } else if (para.mode == "toDevice") {
        this.selectedBdMsg.push(para.data);
      } else {
        this.____refreshPageData(para);
      }
    },

    ____refreshPageData(para){},


    // 新增待下发
    ____onAddToDevice(item) {
      let arr = this.selectedSize.split("*");
      item.origin = {
          displayAreaWidth: +arr[0],
          displayAreaHeight: +arr[1]
          }
      this.editDialog = {
        visible: true,
        mode: "toDevice",
        type: "template",
        tpl: item,
      }
    },

    ____onAddDeviceItem() {
      let arr = this.selectedSize.split("*");
        this.editDialog = {
          visible: true,
          mode: "add",
          type: "device",
          tpl: {
            "textContent": "",
            origin :  {
              displayAreaWidth: +arr[0],
              displayAreaHeight: +arr[1]
            }
          }
        }
      },




    boardBoxStyle(node) {
      let arr = node.screenSize.split("*");
      let scale = this.getScrollSz(+arr[0]);
      let obj = {
        'width':`${+arr[0] / scale}px`,
        'height':`${+arr[1] / scale}px`, 
        'justify-content': this.getTextAlign(node.tcontents[0].formatStyle)
      }
      return obj;
    },
    boardConStyle(node) {
      let fSize = +node.tcontents[0].fontSize;
      let scale = this.getScrollSz(fSize);
      let obj = { 
        'font-size': `${fSize/scale}px`,
        'color': '#' + node.tcontents[0].fontColor,
        'font-family': node.tcontents[0].fontType
      }
      return obj;
    },
    //情报板原始数据转化成目标格式
    boardDataConvert(origin){
      let rst = origin.map(item => {
          return {
            ...item,
            STAY: item.playbackDuration,
            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,
                STAY: item.playbackDuration / 10,
                content: item.textContent.replaceAll('\\,', ',').replaceAll('\\=', '=').replaceAll('\\\\n', '\n')
              }
            ]
          }
        });
      return rst;
    },
    // 地图点位
    mapClickEvent(e) {
      this.dialogInfoList = []
      console.log('父组件地图点位', e)
      this.videoUrl = ''
      this.cameraOptList = []
      this.mapIds = e.target._opts.extData.deviceId
      this.screenDataSize = e.target._opts.extData.sceenSize
      this.dialogTit = e.target._opts.extData.deviceName
      // this.tabDataInfoList = e.target._opts.extData
      this.tabDataInfoList = [
        { id: 401, tit: '设备名称', txt: e.target._opts.extData.deviceName, col: '#fff' },
        { id: 402, tit: '道路名称', txt: e.target._opts.extData.roadName, col: '#fff' },
        { id: 403, tit: '所属机构', txt: e.target._opts.extData.organization, col: '#fff' },
        { id: 404, tit: '设备桩号', txt: e.target._opts.extData.pileNumber, col: '#fff' },
        { id: 405, tit: '设备厂商', txt: e.target._opts.extData.brind, col: '#fff' },
        { id: 406, tit: '设备状态', txt: e.target._opts.extData.deviceState == 'online' ? '在线' : '离线', col: e.target._opts.extData.deviceState == 'online' ? '#10d269' : '#888' }
      ]
      this.getTemplateSeries()
      this.updateList(this.mapIds)
      this.getEnergyCameraBoardFn(e.target._opts.extData.pileNumber)
      // 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)
    },
    getEnergyCameraBoardFn(pileNumber) {
      getEnergyCameraBoardAPi({ pileNum: pileNumber }).then(res => {
        console.log('获取到附近的像机', res)
        this.cameraVal = res.data[0].camId
        this.cameraOptList = res.data
        this.cameraValCha(this.cameraOptList, this.cameraVal)
        this.getEnergyCameraVideoFn()
      })
    },
    getEnergyCameraVideoFn() {
      getEnergyCameraVideoAPi({ camId: this.cameraVal }).then(res => {
        // console.log('获取到视频', res)
        this.videoUrl = res.data.liveUrl
      })
    },
    cameraControlBtnFn(item) {
      this.getEnergyCameraControlFn(item.cmd, 5)
    },
    cameraControlLeFn(item) {
      // console.log('按钮点击事件', item)
      this.getEnergyCameraControlFn(item, 5)
    },
    getEnergyCameraControlFn(cmd, spe) {
      getEnergyCameraControlAPi({ camId: this.cameraVal, cmdType: cmd, speed: spe }).then(res => {
        // console.log('控制返回结果', res)
        // this.videoUrl = res.data.liveUrl
      })
    },
    cameraValChangeFn() {
      console.log('点击切换按钮', this.cameraVal)
      this.cameraValCha(this.cameraOptList, this.cameraVal)
    },
    // cameraDataVideoList
    cameraValCha(date, num) {
      let str = {
        0: '正常',
        1: '网络中断',
        2: '网络正常无图像',
        3: '有图像图可能存在问题'
      }
      date.forEach(i => {
        if (i.camId === num) {
          this.cameraDataVideoList = [
            { id: 3001, txt: '设备名称', val: i.camName },
            { id: 3002, txt: '设备编号', val: i.camId },
            { id: 3003, txt: '设备桩号', val: i.pileNum },
            { id: 3005, txt: '道路名称', val: i.deptName },
            { id: 3006, txt: '道路状况', val: i.status == '-1' ? '未启用' : str[Number(i.status)] }
          ]
        }
      })
    },
    // 信息发布
    InformationReleaseFn() {
      this.$confirm('是否确定发布情报板?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          return ;
          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.STAY
            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)
          }

          invokedFunction(595, 11, { size: '65535', fileName: 'play099.lst' })
            .then(res => {
              debugger
              // console.log('发布消息,校验文件名-------------')
              if (res.data.result == '01') {
                invokedFunction(595, 13, { parameters: newArr })
                  .then(res => {
                    debugger
                    // console.log('发布消息,发送文件内容-----')
                    if (res.data.result == '01') {
                      invokedFunction(595, '1B', { fileId: '99' })
                        .then(res => {
                          debugger
                          // console.log('发布消息,播放文件-----')
                        })
                        .catch(() => {
                          this.$modal.msgError('发布失败,请重试')
                        })
                    }
                  })
                  .catch(() => {
                    this.$modal.msgError('发布失败,请重试')
                  })
              }
            })
            .catch(() => {
              this.$modal.msgError('发布失败,请重试')
            })
          loading.close()
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消发布情报板'
          })
          loading.close()
        })
      this.updateList()
    },
    // 回读
    updateList(deviceId) {
      getDeviceRealtimeProperty(deviceId, '3A', { async: false })
        .then(res => {
          var contentsA = res.data['3A'].content
          console.log('回读消息--1111111111---', contentsA)

          this.dialogInfoList = this.boardDataConvert(contentsA);

          console.log('hui1111111111111', this.dialogInfoList)
        })
        .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
        }
      })*/
    },
    // 获取模板分类
    getTemplateSeries() {
      this.templateList = []
      getDicts('iot_template_category').then(res => {
        this.moBanDataHandList = res.data
        this.activeNames = res.data.map(item => {
          return item.dictCode
        })
        this.getBoardTemplate()
      })
    },
    // 获取模板
    getBoardTemplate() {
      getAllVmsTemplate({ devicePixel: this.screenDataSize }).then(res => {
        this.templateList = 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)
      })
    },
    // 打开添加信息弹窗
    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 = {
        ...item,
        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
      }
    },

    // 接收子组件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.getTemplateSeries()
      this.$forceUpdate()
    },

    delMoFn(index) {
      console.log(index)
      // deleteTemplate(item.tcontents[0].templateId)
      this.dialogInfoList.splice(index, 1)
      // this.removeItemById(this.dialogInfoList, item.id)
    },
    putLeftFn(item) {
      console.log('点击事件', item)
      this.dialogInfoList.push({ ...item, STAY: item.stopTime })
      console.log('点击事件9990089089', this.dialogInfoList)
    },
    tabClickFn(tab, event) {
      console.log(tab, event)
    },
    onClose() {
      this.$emit("update:visible", false);
      this.isShowTemplate = false
    },
    showSidePanel() {
      if (this.dialogInfoCamera) {
        this.dialogInfoCamera = false
      }
      this.isShowTemplate = !this.isShowTemplate
    },
    showCameraInfoFn() {
      if (this.isShowTemplate) {
        this.isShowTemplate = false
      }
      this.dialogInfoCamera = !this.dialogInfoCamera
    },
    subjectBtnFn(item) {
      this.subjectBtn = item.id
    },
    closeCameraBtnFn() {
      this.dialogInfoCamera = false
    },
    dialogClose() {
      this.showEmit = false
      this.arrowRightVisible = false
    },
    removeItemById(arr, id) {
      const index = arr.findIndex(item => item.id === id) // 找到要删除项的索引
      if (index !== -1) {
        arr.splice(index, 1) // 从数组中删除该项
      }
    },
    getScrollSz(w) {
      if (w > 760) {
        return 3
      } else if (w > 470) {
        return 2
      } else {
        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>


.templateBox {
        width: 100%;
        height: 100%;

        .tplItem {
          margin-right: 14px;
          display: flex;
          align-items: stretch;
          padding-bottom: 10px;

          .boardPreview {
            border: 2px solid #004c64;
            // width: 560px;
            // height:80px;
            flex: 1;
          }

          .infoBtnBox {
            width: 160px;
            height: 80px;
            display: flex;
            margin-left: 10px;
            /* // border: solid 1px #05afe3; */
            border: 2px solid #004c64;
            display: flex;
            justify-content: space-around;
            align-items: center;

            .btn {
              background-repeat: no-repeat;
              background-size: 100% 100%;
              width: 40px;
              height: 40px;

              &.btnApply {
                background-image: url(~@/assets/jihe/images/button/toLeft.png);
              }

              &.btnEdit {
                background-image: url(~@/assets/jihe/images/button/edit.png);
              }

              &.btnDelete {
                background-image: url(~@/assets/jihe/images/button/delete.png);
              }
            }

            i {
              font-size: 24px;
              color: #666;
              padding-left: 4px;
              cursor: pointer;
              caret-color: rgba(0, 0, 0, 0);
              user-select: none;
            }

            i:hover {
              color: #05afe3;
            }

            .disabledClass {
              pointer-events: none;
              cursor: auto !important;
              color: #ccc;
            }
          }

        }

        .controlBox {
          margin-top: 10px;
          margin-bottom: 10px;
          display: flex;
          justify-content: center;
        }

        .el-collapse {
          max-height: 100% !important;
          overflow: auto;
          border-bottom: none;
          border-top: none;
          padding: 0 0.5vw;
        }
      }
      

.map_dialog {
  width: 510px;
  height: 550px;
  background-color: pink;
  position: absolute;
  left: 0px;
  top: 0px;
  transform: translate(-110%, -110%);
}
.dialog_info {
  width: 950px;
  height: 600px;
  position: absolute;
  top: 12%;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  justify-content: space-around;
  align-items: flex-end;
}
.dialog_info_left {
  width: 510px;
  height: 100%;
  background-color: #114c66;
}
.dialog_info_right {
  width: 430px;
  height: 556px;
  border: 2px solid #196980;
  background-color: #114c66;
  padding: 1vh 0.5vw;
  overflow-y: scroll;
  position: relative;
}
.dialog_head {
  width: 100%;
  height: 48px;
  padding: 0 10px;
  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;
  .tit {
    color: #3de8ff;
    font-size: 18px;
  }
  .btnCls {
    width: 13px;
    height: 13px;
    cursor: pointer;
  }
  .deco {
    width: 55%;
    height: 5px;
    position: absolute;
    left: 0;
    top: 0;
  }
}
.dialogContent {
  width: 100%;
  height: 300px;
  padding: 10px 40px 10px 10px;
  position: relative;
}
.dialogContent_box {
  width: 100%;
  // height: 100%;
  overflow-y: scroll;
}
.dialogContent_l {
  width: 355px;
  // height: 4.91vh;
  border: 2px solid #1d7890;
  padding: 1px 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
.dialogContent_r {
  width: 96px;
  // height: 4.91vh;
  border: 2px solid #1d7890;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.dialogContent_l_xsq {
  width: 256px;
  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;
}
.dialogContent_r_btn1 {
  background-image: url('~@/assets/screen/xtb/gg.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
}
.dialogContent_r_btn2 {
  background-image: url('~@/assets/screen/xtb/xx.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
}
.dialogContent_r_btn3 {
  background-image: url('~@/assets/screen/xtb/zz.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
}
.dialogContent_box_item {
  margin-bottom: 0.5vh;
  display: flex;
  justify-content: space-between;
}
.dialogContent_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;
}
.sideSwitch {
  position: absolute;
  right: 0%;
  top: 0%;
  width: 24px;
  line-height: 1.2;
  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;
  .img {
    width: 15px;
    height: 10px;
    border: none;
    transition: transform 0.3s ease; /* 过渡效果 */
  }
  .txt {
    color: #fff;
    font-size: 13px;
  }
}
.dialogContent_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;
}
.dialogContent_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;
}
.info_right_camera {
  width: 100%;
  height: calc(100% - 4vh);
  padding: 1vh 0.5vw;
}
.info_right_camera_top {
  width: 100%;
  height: 20vh;
}
.info_right_camera_bom {
  width: 100%;
  padding: 1vh 0;
  height: calc(100% - 20vh);
  display: flex;
}
.camera_bom_left {
  width: 50%;
  height: 100%;
  padding: 2vh 0;
  border-right: 1px dashed #285a71;
}
.camera_bom_right {
  width: 50%;
  height: 100%;
}
.camera_bom_left_item {
  width: 100%;
  color: #fff;
  display: flex;
  font-size: 14px;
  padding-bottom: 1.5vh;
}
.camera_bom_left_item_txt {
  width: 31%;
  color: #3de8ff;
}
.camera_bom_left_item_val {
  color: #fff;
  font-size: 13px;
}
.camera_bom_right_t {
  width: 100%;
  height: 60%;
  position: relative;
}
.camera_bom_right_b {
  width: 100%;
  height: 40%;
  // background-color: deeppink;
}
.camera_bom_right_t_box {
  width: 2vw;
  height: 4vh;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background-color: #005f87;
  border-radius: 50%;
  border: 1px solid #2191b1;
}
.camera_bom_right_t_h_po {
  width: 1vw;
  height: 5vh;
  position: absolute;
  left: 27%;
  top: 33%;
  cursor: pointer;
  background-image: url('~@/assets/screen/xtb/xjleft.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
}
.camera_bom_right_b_btn {
  width: 100%;
  padding: 0vh 2vw 1vh 2vw;
  display: flex;
  justify-content: space-between;
}
.camera_bom_right_b_btn_l {
  width: 1.2vw;
  height: 2.4vh;
  border-radius: 50%;
  background-image: url('~@/assets/screen/xtb/jhbtn.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
  cursor: pointer;
}
.camera_bom_right_b_btn_c {
  color: #fff;
}
.camera_bom_right_b_btn_r {
  width: 1.2vw;
  height: 2.4vh;
  border-radius: 50%;
  background-image: url('~@/assets/screen/xtb/addbtn.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
  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;
}
::v-deep .el-input--mini .el-input__icon {
  line-height: 20px;
  color: #fff;
}
::v-deep .el-input--mini .el-input__inner {
  height: 20px;
  line-height: 20px;
  background-color: #086d8f;
  border: none;
  color: #fff;
}
</style>