<template>
  <div class="container infoBoardBox" style="height:94vh;;background-color: #11232a;">
    <div style="
        height: 100%;
        margin-left: 0px;
        margin-right: 0px;
        display: flex;
        justify-content: space-between;
      ">
      <div style="width: 20%" class="verticalBox">
        <div style="width:100%;height:100%;padding:1vh 0.2vw;">
          <div style="width:100%;height:100%;background-color:#112d3b;padding:0 0 1vh 0;">
            <div class="bigTitle qbbBigTitle">
              <img class="qbbBigDot" src="@/assets/screen/xtb/qbbdot.png" alt="">
              <div>情报板列表</div>
              <img class="qbbBigDotBa" src="@/assets/screen/xtb/qbba.png" alt="">
            </div>
            <el-form ref="form" style="padding:0 0.5vw;" :model="form">
              <el-form-item style="margin-bottom: 12px;">
                <el-select v-model="form.eqDirection" size="medium" placeholder="请选择方向" style="overflow: hidden;width: 100%;">
                  <el-option v-for="item in boardDirectionList" :key="item.dictValue" :label="item.dictLabel" :value="item.dictValue" @click.native="changeDirection(item.dictValue)" />
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-collapse v-model="iotBoardActive" accordion @change="handleChange">
                  <el-collapse-item v-for="(item, index) in iotBoardList" :key="index" :title="item.label" :name="item.devicePixel">
                    <div>
                      <!-- <el-checkbox style="width: 100%" :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选
                      </el-checkbox>-->
                      <div style="margin: 5px 0"></div>
                      <el-checkbox-group class="checkbox" v-model="checkedCities" @change="handleCheckedCitiesChange" :max="1">
                        <el-checkbox v-for="(itm, index) in item.list" :label="itm.deviceId" :key="index">
                          <el-tooltip :content="itm.deviceIp" placement="top">
                            <div>{{ itm.deviceName }}</div>
                          </el-tooltip>
                          <el-tooltip content="回读当前信息" placement="top">
                            <el-button class="el-icon-tickets huiduButton" @click.stop.prevent="onSubmit(itm.deviceId)" :disabled="submitButton"></el-button>
                          </el-tooltip>
                        </el-checkbox>
                      </el-checkbox-group>
                    </div>
                  </el-collapse-item>
                </el-collapse>
              </el-form-item>
            </el-form>
          </div>
        </div>
      </div>
      <div style="width: 37.8%" class="verticalBox verticalBoxBorderLeft">
        <div style="width:100%;height:100%;padding:1vh 0.2vw;">
          <div style="width:100%;height:100%;background-color:#112d3b;">

            <div class="bigTitle awaitBigTitle">
              <div>
                <div style="display: flex;justify-content: start !important;align-items: center;">
                  <img class="qbbBigDot" src="@/assets/screen/xtb/qbbdot.png" alt="">
                  <div>情报板列表</div>
                  <span v-if="form.devicePixel">【 {{ form.devicePixel }}】</span>
                </div>
                <img class="qbbBigDotBa" src="@/assets/screen/xtb/qbba.png" alt="">
              </div>

              <div class="controlBox">
                <el-button type="primary" @click.native="openDialogVisible(1, 2)" :disabled="form.devicePixel ? false : disabledButton">添加信息</el-button>
                <el-button type="primary" @click="publishInfo" :disabled="
                !form.devicePixel ||
                contentList.length == 0 ||
                checkedCities.length == 0
              ">发布信息</el-button>
              </div>
            </div>
            <div class="contentBox">
              <el-table :data="contentList" row-key="ID" v-loading="loading" style="height: 100%;padding: 0 1vh;background-color: #112d3b;overflow-y: scroll;" :key="toggleIndex">
                <el-table-column width="545">
                  <template slot-scope="scope">
                    <div class="con">
                      <div style="background: black; position: relative" :style="{
                      color: getColorStyle(scope.row.COLOR) ,
                      fontSize: getFontSize(scope.row.FONT_SIZE),
                      fontFamily: scope.row.FONT,
                      width: getScreenSize(form.devicePixel, 'width') + 'px',
                      height: getScreenSize(form.devicePixel, 'height') + 'px',
                      'lineHeight':'1',
                      'display': 'flex',
                      'align-items': 'center',
                      'justify-content': getTextAlign(scope.row.formatStyle),
                    }">
                        <span :style="{
                        /*left: getCoordinate(
                          scope.row.COORDINATE.substring(0, 3),
                          'left'
                        ),
                        top: getCoordinate(
                          scope.row.COORDINATE.substring(3, 6),
                          'top'
                        ),*/
                        position:'relative',
                        maxHeight:getScreenSize(form.devicePixel, 'height') + 'px',
                      }" class="boardTextStyle" v-html="
                        scope.row.CONTENT? scope.row.CONTENT.replace(/\n|\r\n/g,'<br>').replace(/ /g, '&nbsp'): ''"></span>
                      </div>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column width="130">
                  <template slot-scope="scope">
                    <div class="menuBox">
                      <!-- <el-tooltip content="加入信息模板" placement="top">
                    <div @click="arrowRight(scope.row)"></div>
                  </el-tooltip> -->

                      <el-tooltip content="编辑" placement="top">
                        <div @click="openQbbDrawer(scope.row, scope.$index, 1)" class="edit"></div>
                      </el-tooltip>
                      <el-tooltip content="删除" placement="top">
                        <div @click="delQbbDrawer(scope.$index)" class="del"></div>
                      </el-tooltip>
                    </div>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </div>
        </div>
      </div>
      <div style=" width: 42.2%" class="verticalBox verticalBoxBorderLeft">
        <div style="width:100%;height:100%;padding:1vh 0.2vw;">
          <div style="width:100%;height:100%;background-color:#112d3b">

            <div class="bigTitle awaitBigTitle">
              <div>
                <div style="display: flex;justify-content: start !important;align-items: center;">
                  <img class="qbbBigDot" src="@/assets/screen/xtb/qbbdot.png" alt="">
                  <div>情报板列表</div>
                  <span v-if="form.devicePixel">【 {{ form.devicePixel }}】</span>
                </div>
                <img class="qbbBigDotBa" src="@/assets/screen/xtb/qbba.png" alt="">
                <!-- <span>信息模板</span>
            <span v-if="form.devicePixel">【 {{ form.devicePixel }}】</span> -->
              </div>
              <div class="controlBox">
                <el-button type="primary" @click="openDialogVisible(2, 2)">添加模板</el-button>
              </div>
            </div>
            <div class="templateBox">
              <el-collapse v-model="activeNames">
                <el-collapse-item v-for="(item, index) in iotTemplateCategoryList" :key="index" :title="item.dictLabel" :name="item.dictValue">
                  <div v-for="(itm, indx) in item.list" :key="indx" class="con" :style="{
                  fontSize: getFontSize(
                    itm.tcontents[0].fontSize,
                    itm.screenSize
                  ),
                  color: getColorStyle(itm.tcontents[0].fontColor),
                  fontFamily: itm.tcontents[0].fontType,
                }">
                    <div class="templateTitle">
                      <div :style="{
                      width: getScreenSize(itm.screenSize, 'width') + 'px',
                      height: getScreenSize(itm.screenSize, 'height') + 'px',
                      'display': 'flex',
                      'align-items': 'center',
                      'justify-content': getTextAlign(itm.tcontents[0].formatStyle),
                      position: 'relative',

                    }" style="background: black; position: relative;overflow: hidden;">
                        <span :style="{
                        /*left: getCoordinate(
                          itm.tcontents[0].coordinate.substring(0, 3),
                          'left',
                          itm.screenSize
                        ),
                        top: getCoordinate(
                          itm.tcontents[0].coordinate.substring(3, 6),
                          'top',
                          itm.screenSize
                        ),*/
                        position:'relative',
                        maxHeight:getScreenSize(itm.screenSize, 'height') + 'px',
                      }" class="boardTextStyle" v-html="
                        itm.tcontents[0].content
                          .replace(/\n|\r\n/g, '<br>')
                          .replace(/ /g, '&nbsp')
                      "></span>
                      </div>
                    </div>
                    <div class="menuBox">
                      <el-tooltip content="加入待下发信息" placement="top">
                        <div @click="arrowLeft(itm)" :class="
                        disabledButton && !form.devicePixel
                          ? 'disabledClass'
                          : ''
                      " style="cursor: pointer" class="toLeft"></div>
                      </el-tooltip>
                      <el-tooltip content="编辑" placement="top">
                        <div @click="editOutline(itm, indx, 2)" class="edit"></div>
                      </el-tooltip>
                      <el-tooltip content="删除" placement="top">
                        <div @click="handleDelete(itm)" class="del"></div>
                      </el-tooltip>
                    </div>
                  </div>
                </el-collapse-item>
              </el-collapse>
            </div>
          </div>
        </div>
      </div>
    </div>
    <el-dialog title="提示" :visible.sync="arrowRightVisible" width="20%" :before-close="dialogClose">
      <el-row>
        <el-col :span="18">
          <el-select v-model="toRightCategory" placeholder="请选择所属类别">
            <el-option v-for="item in iotTemplateCategoryList" :key="item.dictValue" :label="item.dictLabel" :value="item.dictValue">
            </el-option>
          </el-select>
        </el-col>
        <el-col :span="4">
          <el-button type="primary" plain @click="arrowRightAllVmsTemplate">
            确定
          </el-button>
        </el-col>
      </el-row>
    </el-dialog>
    <addinfo ref="addinfo" @addInfo="addInfo" @getActiveNames="getActiveNames"></addinfo>
    <editInfo :boardEmitItem="this.boardEmitItem" @receiveForm="receiveForm" v-if="this.showEmit" @dialogClose="dialogClose"></editInfo>
  </div>
</template>
<script>
import Sortable from 'sortablejs'
import addinfo from './addinfo'
import editInfo from './editInfo'
import boardData from './boardData'
import { getUserDeptId } from '@/api/system/user'
import { listTunnels, devicessize, information, getBoardInfo, getBoardEditInfo, getIotBoardList, getBoardContentData, deviceControl } from '@/api/information/api.js'
import { uploadBoardEditInfo, getAllVmsTemplate, addTemplate, addTemplateContent, getBoardContent, deleteTemplate, splicingBoard } from '@/api/board/template'
import { invokedFunction, getDeviceRealtimeProperty } from '@/api/device/device'
import { getBoardList } from '@/api/board/board'

// 对象深拷贝
export const deepClone = data => {
  // 封装的判断数据类型的方法
  var type = typeof data
  var obj
  if (type === 'array') {
    obj = []
  } else if (type === 'object') {
    obj = {}
  } else {
    // 不再具有下一层次
    return data
  }
  if (type === 'array') {
    for (var i = 0, len = data.length; i < len; i++) {
      obj.push(deepClone(data[i]))
    }
  } else if (type === 'object') {
    for (var key in data) {
      obj[key] = deepClone(data[key])
    }
  }
  return obj
}

export default {
  name: 'Device',
  components: {
    addinfo,
    editInfo
  },
  dicts: ['iot_board_direction'],

  data() {
    return {
      toggleIndex: 0,
      toRightCategory: '', //向右类别绑定
      arrowRightVisible: false, //向右类别弹窗
      loading: false,
      submitButton: false, //回读禁用
      iotBoardActive: '', //情报板设备 绑定
      iotBoardList: [], //情报板设备列表
      boardDirectionList: [], //方向
      userQueryParams: {
        userName: this.$store.state.user.name
      }, //用户
      devicePixelMode: null, //分辨率
      editType: 0,
      disabledButton: true, //禁用按钮
      showEmit: false, //修改组件
      index_: 0, //待下发 编辑项index
      index: 0, //模板 编辑项 index
      deviceId: '', //情报板id
      boardEmitItem: null, //修改彈窗的數據
      userDeptId: '', //管理站id
      deptList: [], //分中心下拉框
      mechanismList: [], //管理机构下拉框
      devicessizeList: [], //分辨率下拉框
      deviceList: [], //分辨率
      checkedCities: [], //多选 选中项
      form: {
        company: null,
        mechanism: null,
        localInfo: null,
        devicePixel: null
      }, //情报板列表表单
      supplier: null, //报文类型
      activeNames: [], //模板 展开项
      iotTemplateCategoryList: [], //模板
      checkAll: false,
      isIndeterminate: false,
      contentList: [], //待下发数据
      toRightItem: {} //向右添加到模板的数据
    }
  },
  watch: {
    contentList: function (newVal, oldVal) {
      this.$nextTick(() => {
        this.rowDrop()
      })
    },
    iotBoardList: function (newVal, oldVal) {
      console.log(newVal, 'iotBoardActive')
      if (newVal.length == 0) {
        this.form.devicePixel = ''
        this.allVmsTemplate('no')
      }
    }
    // // 改变方向
    // 'form.eqDirection':function(newVal,oldVal){
    //   console.log(newVal,"newVal")
    //   this.iotBoardList = []
    // }
  },
  created() {
    this.getInfoMode()
    this.changeDirection()
    this.getBoardPixel()
  },
  mounted() {
    // this.rowDrop();
    this.hideScrollFn()
  },

  methods: {
    // 获取信息模板字典表
    getBoardPixel() {
      this.iotBoardList = []
      this.getDicts('iot_board_pixel').then(res => {
        res.data.forEach(item =>{
          this.iotBoardList.push({
            devicePixel: item.dictValue,
            label: item.dictLabel,
            list: []
          })
        })
      })
    },
    // 获取信息模板字典表
    getInfoMode() {
      this.getDicts('iot_template_category').then(res => {
        this.iotTemplateCategoryList = res.data
      })
    },

    // 行拖拽
    rowDrop() {
      if (JSON.parse(JSON.stringify(this.contentList)).length > 0) {
        // 要侦听拖拽响应的DOM对象
        const tbody = document.querySelector('.contentBox .el-table__body-wrapper tbody')
        const _this = this
        Sortable.create(tbody, {
          // 结束拖拽后的回调函数
          onEnd({ newIndex, oldIndex }) {
            const currentRow = _this.contentList.splice(oldIndex, 1)[0]
            _this.contentList.splice(newIndex, 0, currentRow)
          }
        })
      }
    },
    //改变方向
    changeDirection(val) {
      this.getDicts('iot_board_direction').then(res => {
        this.boardDirectionList = res.data

        if (val) {
          this.form.eqDirection = val
        } else {
          this.form.eqDirection = res.data[0].dictValue
        }

        this.getIotBoard()
      })
    },

    // 情报板设备 折叠面板
    getIotBoard() {
      this.checkAll = false

      //TODO 测试数据 需删除走接口
   /*   let testData = [
        {
          devicePixel: '768*64',
          label: '门架板768*64',
          list: [
            {
              searchValue: null,
              createBy: null,
              createTime: null,
              updateBy: null,
              updateTime: null,
              remark: null,
              params: {},
              deviceId: 595,
              deviceName: '门架式可变信息标志K57+595',
              brandId: 4,
              iotBoardBrandName: {
                brandId: 4,
                brandName: '光电比特'
              },
              routeId: 17,
              routeDirection: '济南方向',
              deviceMarkingName: null,
              deviceTypeId: 202010001,
              deviceTypeNumber: 202010004,
              deviceModelId: null,
              factoryLibrary: null,
              userUnitId: 555503,
              operatorId: null,
              longitude: '117.9554825',
              latitude: '36.84254887',
              firmId: 18,
              purchaseDate: '2022-12-14T16:06:03.000+08:00',
              warrantyYears: null,
              unitPrice: null,
              runStatus: 1,
              tunnelId: 'JQ-JiNan-WenZuBei-MJY',
              deviceStatus: '1',
              installDate: '2022-12-14T16:06:03.000+08:00',
              maintainId: 2,
              collarAgencyId: 555503,
              pileNumber: 'K57+595',
              manageAgencyId: 'YG11002',
              producteDate: null,
              repairDate: null,
              operateDate: null,
              serviceLife: null,
              storageDate: null,
              isMonitor: 1,
              isConfig: 1,
              localInfo: 36,
              routeNumber: null,
              routeName: null,
              deviceIp: '10.0.81.62',
              devicePort: null,
              devicePixel: '768*64',
              userName: null,
              passWord: null,
              protocolName: null,
              deviceTypeIds: null,
              lUserID: null,
              lAlarmHandle: null,
              lUserIDStr: null,
              lAlarmHandleStr: null,
              eqDirection: null,
              iotDeviceType: null
            },
            {
              searchValue: null,
              createBy: null,
              createTime: null,
              updateBy: null,
              updateTime: null,
              remark: null,
              params: {},
              deviceId: 600,
              deviceName: '门架式可变信息标志K71+600',
              brandId: 4,
              iotBoardBrandName: {
                brandId: 4,
                brandName: '光电比特'
              },
              routeId: 17,
              routeDirection: '济南方向',
              deviceMarkingName: null,
              deviceTypeId: 202010001,
              deviceTypeNumber: 202010004,
              deviceModelId: null,
              factoryLibrary: null,
              userUnitId: 555503,
              operatorId: null,
              longitude: '117.9554825',
              latitude: '36.84254887',
              firmId: 18,
              purchaseDate: '2022-12-14T16:06:03.000+08:00',
              warrantyYears: null,
              unitPrice: null,
              runStatus: 1,
              tunnelId: 'JQ-JiNan-WenZuBei-MJY',
              deviceStatus: '1',
              installDate: '2022-12-14T16:06:03.000+08:00',
              maintainId: 2,
              collarAgencyId: 555503,
              pileNumber: 'K71+600',
              manageAgencyId: 'YG11002',
              producteDate: null,
              repairDate: null,
              operateDate: null,
              serviceLife: null,
              storageDate: null,
              isMonitor: 1,
              isConfig: 1,
              localInfo: 36,
              routeNumber: null,
              routeName: null,
              deviceIp: '10.0.81.66',
              devicePort: null,
              devicePixel: '768*64',
              userName: null,
              passWord: null,
              protocolName: null,
              deviceTypeIds: null,
              lUserID: null,
              lAlarmHandle: null,
              lUserIDStr: null,
              lAlarmHandleStr: null,
              eqDirection: null,
              iotDeviceType: null
            },
            {
              searchValue: null,
              createBy: null,
              createTime: null,
              updateBy: null,
              updateTime: null,
              remark: null,
              params: {},
              deviceId: 285,
              deviceName: '门架式可变信息标志K82+285',
              brandId: 4,
              iotBoardBrandName: {
                brandId: 4,
                brandName: '光电比特'
              },
              routeId: 17,
              routeDirection: '济南方向',
              deviceMarkingName: null,
              deviceTypeId: 202010001,
              deviceTypeNumber: 202010004,
              deviceModelId: null,
              factoryLibrary: null,
              userUnitId: 555503,
              operatorId: null,
              longitude: '117.9554825',
              latitude: '36.84254887',
              firmId: 18,
              purchaseDate: '2022-12-14T16:06:03.000+08:00',
              warrantyYears: null,
              unitPrice: null,
              runStatus: 1,
              tunnelId: 'JQ-JiNan-WenZuBei-MJY',
              deviceStatus: '1',
              installDate: '2022-12-14T16:06:03.000+08:00',
              maintainId: 2,
              collarAgencyId: 555503,
              pileNumber: 'K82+285',
              manageAgencyId: 'YG11002',
              producteDate: null,
              repairDate: null,
              operateDate: null,
              serviceLife: null,
              storageDate: null,
              isMonitor: 1,
              isConfig: 1,
              localInfo: 36,
              routeNumber: null,
              routeName: null,
              deviceIp: '10.0.21.61',
              devicePort: null,
              devicePixel: '768*64',
              userName: null,
              passWord: null,
              protocolName: null,
              deviceTypeIds: null,
              lUserID: null,
              lAlarmHandle: null,
              lUserIDStr: null,
              lAlarmHandleStr: null,
              eqDirection: null,
              iotDeviceType: null
            },
            {
              searchValue: null,
              createBy: null,
              createTime: null,
              updateBy: null,
              updateTime: null,
              remark: null,
              params: {},
              deviceId: 208,
              deviceName: '门架式可变信息标志k98+208',
              brandId: 4,
              iotBoardBrandName: {
                brandId: 4,
                brandName: '光电比特'
              },
              routeId: 17,
              routeDirection: '济南方向',
              deviceMarkingName: null,
              deviceTypeId: 202010001,
              deviceTypeNumber: 202010004,
              deviceModelId: null,
              factoryLibrary: null,
              userUnitId: 555503,
              operatorId: null,
              longitude: '117.9554825',
              latitude: '36.84254887',
              firmId: 18,
              purchaseDate: '2022-12-14T16:06:03.000+08:00',
              warrantyYears: null,
              unitPrice: null,
              runStatus: 1,
              tunnelId: 'JQ-JiNan-WenZuBei-MJY',
              deviceStatus: '1',
              installDate: '2022-12-14T16:06:03.000+08:00',
              maintainId: 2,
              collarAgencyId: 555503,
              pileNumber: 'k98+208',
              manageAgencyId: 'YG11002',
              producteDate: null,
              repairDate: null,
              operateDate: null,
              serviceLife: null,
              storageDate: null,
              isMonitor: 1,
              isConfig: 1,
              localInfo: 36,
              routeNumber: null,
              routeName: null,
              deviceIp: '10.0.31.115',
              devicePort: null,
              devicePixel: '768*64',
              userName: null,
              passWord: null,
              protocolName: null,
              deviceTypeIds: null,
              lUserID: null,
              lAlarmHandle: null,
              lUserIDStr: null,
              lAlarmHandleStr: null,
              eqDirection: null,
              iotDeviceType: null
            },
            {
              searchValue: null,
              createBy: null,
              createTime: null,
              updateBy: null,
              updateTime: null,
              remark: null,
              params: {},
              deviceId: 65,
              deviceName: '门架式可变信息标志K103+900',
              brandId: 4,
              iotBoardBrandName: {
                brandId: 4,
                brandName: '光电比特'
              },
              routeId: 17,
              routeDirection: '济南方向',
              deviceMarkingName: null,
              deviceTypeId: 202010001,
              deviceTypeNumber: 202010004,
              deviceModelId: null,
              factoryLibrary: null,
              userUnitId: 555503,
              operatorId: null,
              longitude: '117.9554825',
              latitude: '36.84254887',
              firmId: 18,
              purchaseDate: '2022-12-14T16:06:03.000+08:00',
              warrantyYears: null,
              unitPrice: null,
              runStatus: 1,
              tunnelId: 'JQ-JiNan-WenZuBei-MJY',
              deviceStatus: '1',
              installDate: '2022-12-14T16:06:03.000+08:00',
              maintainId: 2,
              collarAgencyId: 555503,
              pileNumber: 'K103+900',
              manageAgencyId: 'YG11002',
              producteDate: null,
              repairDate: null,
              operateDate: null,
              serviceLife: null,
              storageDate: null,
              isMonitor: 1,
              isConfig: 1,
              localInfo: 36,
              routeNumber: null,
              routeName: null,
              deviceIp: '10.0.31.111',
              devicePort: null,
              devicePixel: '768*64',
              userName: null,
              passWord: null,
              protocolName: null,
              deviceTypeIds: null,
              lUserID: null,
              lAlarmHandle: null,
              lUserIDStr: null,
              lAlarmHandleStr: null,
              eqDirection: null,
              iotDeviceType: null
            }
          ]
        },
        {
          devicePixel: '480*48',
          label: '雨棚480*48',
          list: [
            /!*{
              searchValue: null,
              createBy: null,
              createTime: null,
              updateBy: null,
              updateTime: null,
              remark: null,
              params: {},
              deviceId: 65,
              deviceName: '雨棚可变信息标志ZK18+665',
              brandId: 4,
              iotBoardBrandName: {
                brandId: 4,
                brandName: '光电比特'
              },
              routeId: 17,
              routeDirection: '济南方向',
              deviceMarkingName: null,
              deviceTypeId: 202010001,
              deviceTypeNumber: 202010004,
              deviceModelId: null,
              factoryLibrary: null,
              userUnitId: 555503,
              operatorId: null,
              longitude: '117.9554825',
              latitude: '36.84254887',
              firmId: 18,
              purchaseDate: '2022-12-14T16:06:03.000+08:00',
              warrantyYears: null,
              unitPrice: null,
              runStatus: 1,
              tunnelId: 'JQ-JiNan-WenZuBei-MJY',
              deviceStatus: '1',
              installDate: '2022-12-14T16:06:03.000+08:00',
              maintainId: 2,
              collarAgencyId: 555503,
              pileNumber: 'ZK134+587',
              manageAgencyId: 'YG11002',
              producteDate: null,
              repairDate: null,
              operateDate: null,
              serviceLife: null,
              storageDate: null,
              isMonitor: 1,
              isConfig: 1,
              localInfo: 16,
              routeNumber: null,
              routeName: null,
              deviceIp: '10.7.181.29',
              devicePort: null,
              devicePixel: '480*48',
              userName: null,
              passWord: null,
              protocolName: null,
              deviceTypeIds: null,
              lUserID: null,
              lAlarmHandle: null,
              lUserIDStr: null,
              lAlarmHandleStr: null,
              eqDirection: null,
              iotDeviceType: null
            }*!/
          ]
        },
        {
          devicePixel: '192*160',
          label: ' 悬臂192*160',
          list: [
            /!*{
              searchValue: null,
              createBy: null,
              createTime: null,
              updateBy: null,
              updateTime: null,
              remark: null,
              params: {},
              deviceId: 1055550306,
              deviceName: '悬臂可变信息标志YK16+970',
              brandId: 4,
              iotBoardBrandName: {
                brandId: 4,
                brandName: '光电比特'
              },
              routeId: 17,
              routeDirection: '菏泽方向',
              deviceMarkingName: null,
              deviceTypeId: 202010001,
              deviceTypeNumber: 202010004,
              deviceModelId: null,
              factoryLibrary: null,
              userUnitId: 555503,
              operatorId: null,
              longitude: null,
              latitude: null,
              firmId: 18,
              purchaseDate: '2022-12-14T16:06:03.000+08:00',
              warrantyYears: null,
              unitPrice: null,
              runStatus: 1,
              tunnelId: 'JQ-JiNan-WenZuBei-MJY',
              deviceStatus: '1',
              installDate: '2022-12-14T16:06:03.000+08:00',
              maintainId: 2,
              collarAgencyId: 555503,
              pileNumber: 'YK133+825',
              manageAgencyId: 'YG11002',
              producteDate: null,
              repairDate: null,
              operateDate: null,
              serviceLife: null,
              storageDate: null,
              isMonitor: 1,
              isConfig: 1,
              localInfo: 16,
              routeNumber: null,
              routeName: null,
              deviceIp: '10.7.180.84',
              devicePort: null,
              devicePixel: '192*160',
              userName: null,
              passWord: null,
              protocolName: null,
              deviceTypeIds: null,
              lUserID: null,
              lAlarmHandle: null,
              lUserIDStr: null,
              lAlarmHandleStr: null,
              eqDirection: null,
              iotDeviceType: null
            }*!/
          ]
        },
        {
          devicePixel: '160*80',
          label: ' 站前160*80',
          list: [
            {
              searchValue: null,
              createBy: null,
              createTime: null,
              updateBy: null,
              updateTime: null,
              remark: null,
              params: {},
              deviceId: 221,
              deviceName: '大学城路口站前',
              brandId: 4,
              iotBoardBrandName: {
                brandId: 4,
                brandName: '光电比特'
              },
              routeId: 17,
              routeDirection: '菏泽方向',
              deviceMarkingName: null,
              deviceTypeId: 202010001,
              deviceTypeNumber: 202010004,
              deviceModelId: null,
              factoryLibrary: null,
              userUnitId: 555503,
              operatorId: null,
              longitude: null,
              latitude: null,
              firmId: 18,
              purchaseDate: '2022-12-14T16:06:03.000+08:00',
              warrantyYears: null,
              unitPrice: null,
              runStatus: 1,
              tunnelId: 'JQ-JiNan-WenZuBei-MJY',
              deviceStatus: '1',
              installDate: '2022-12-14T16:06:03.000+08:00',
              maintainId: 2,
              collarAgencyId: 555503,
              pileNumber: '大学城路口站前',
              manageAgencyId: 'YG11002',
              producteDate: null,
              repairDate: null,
              operateDate: null,
              serviceLife: null,
              storageDate: null,
              isMonitor: 1,
              isConfig: 1,
              localInfo: 16,
              routeNumber: null,
              routeName: null,
              deviceIp: '10.0.81.221',
              devicePort: null,
              devicePixel: '160*80',
              userName: null,
              passWord: null,
              protocolName: null,
              deviceTypeIds: null,
              lUserID: null,
              lAlarmHandle: null,
              lUserIDStr: null,
              lAlarmHandleStr: null,
              eqDirection: null,
              iotDeviceType: null
            }
          ]
        }
      ]
      this.iotBoardList = testData
      if (testData.length > 0) {
        this.iotBoardActive = testData[0].devicePixel
        this.handleChange(testData[0].devicePixel)
      } else {
        this.getInfoMode()
      }
      this.$forceUpdate()*/

      // TODO 接口
      let param = {
        direction: this.form.eqDirection,
      };
      getBoardList(param).then((res) => {
        console.log(res, "查询情报板设备列表");
        if (res.length > 0) {
          this.iotBoardList.forEach(item => {
            item.list = []
            res.forEach(board =>{
              if (item.devicePixel == board.sceenSize){
                item.list.push(board)
              }
            })
          })
          this.iotBoardActive = this.iotBoardList[0].devicePixel;
          this.handleChange(this.iotBoardList[0].devicePixel);
        } else {
          this.getInfoMode();
        }
        this.$forceUpdate();
      });
    },

    // 板子分辨率换算
    getScreenSize(num, type) {
      // console.log(num)
      let width = num.split('*')[0]
      let height = num.split('*')[1]
      // 实际分辨率比页面板子小
      if (width <= 450 && height <= 75) {
        if (type == 'width') {
          return width
        } else if (type == 'height') {
          return height
        }
      } else {
        // 实际分辨率比页面板子大
        if (width / 450 > height / 75) {
          if (type == 'width') {
            return 450
          } else if (type == 'height') {
            return height / (width / 450)
          }
        } else {
          if (type == 'width') {
            return width / (height / 75)
          } else if (type == 'height') {
            return 75
          }
        }
      }
    },

    // 接收子组件 新增模板
    getActiveNames() {
      this.allVmsTemplate()
    },

    // 向左新增待下发
    arrowLeft(item) {
      var list = {
        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, //字体间距
        ACTION: item.inScreenMode, //出屏方式
        STAY: item.stopTime, //停留时间
        category: item.category, //所属类别
        ID: this.contentList.length,
        format: item.tcontents[0].contentList,
        formatStyle: item.tcontents[0].formatStyle
      }
      this.contentList.push(list)
      this.toggleIndex++
      console.log(this.contentList, 'this.contentList')
      console.log(this.toggleIndex, 'toggleIndex')
    },

    // 向右添加模板
    arrowRight(item) {
      this.toRightItem = item
      if (!item.category) {
        this.arrowRightVisible = true
      } else {
        this.arrowRightAllVmsTemplate()
      }
    },

    // 向右添加模板
    arrowRightAllVmsTemplate() {
      console.log(this.contentList, '不选所属类别向右contentList')
      console.log(this.toRightItem, this.toRightCategory)
      let item = this.toRightItem
      let templateId = ''
      let method = 'put'
      const params1 = {
        inScreenMode: item.ACTION,
        screenSize: this.form.devicePixel,
        applyType: '',
        category: item.category ? item.category : this.toRightCategory,
        coordinate: '',
        height: '',
        id: '',
        imageUrl: '',
        imgSizeFrom: '',
        remark: '',
        stopTime: item.STAY,
        vmsType: '',
        width: ''
      }

      // 新增
      addTemplate(params1, method).then(data => {
        console.log(data, '新增口返回data')
        const templateContent = []
        templateContent.push({
          content: item.CONTENT,
          coordinate: item.COORDINATE,
          fontColor: this.getColorStyle(item.COLOR),
          fontSize: item.FONT_SIZE.substring(0, 2),
          fontSpacing: item.SPEED,
          fontType: this.getFontStyle(item.FONT)
        })
        const params2 = {
          templateContent: templateContent,
          templateId: data
        }
        addTemplateContent(params2)
          .catch(err => {
            throw err
          })
          .then(res => {
            if (res.code == 200) {
              this.allVmsTemplate('no')
            }
          })
        // this.getActiveNames(item.category);
      })
      this.arrowRightVisible = false
    },

    // 修改弹窗
    editOutline(item, index, type) {
      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,
        ACTION: item.inScreenMode, //出屏方式
        STAY: item.stopTime, //停留时间
        type: type,
        screenSize: item.screenSize,
        category: item.category,
        id: item.id,
        tcontentsId: item.tcontents[0].id,
        formatStyle: item.tcontents[0].formatStyle
      }
      this.showEmit = true
    },

    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.id || this.ids
      let content = '是否确认删除选中数据项?'
      if (ids == null || ids == undefined || ids == [] || ids == '') {
        content = '是否确认删除当前情报板模板?'
      }
      this.$confirm(content, '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(function () {
          return deleteTemplate(ids)
        })
        .then(() => {
          this.allVmsTemplate('no')
          this.$modal.msgSuccess('删除成功')
        })
    },

    // 情报板管理右侧查询接口
    allVmsTemplate(type) {
      const param = {
        devicePixel: this.form.devicePixel
      }

      //TODO 接口
      getAllVmsTemplate(param).then(res => {
        let data = res.data
        console.log(res, '情报板管理右侧查询接口')
        let jArr = []

        for (let j = 0; j < this.iotTemplateCategoryList.length; j++) {
          let arr = this.iotTemplateCategoryList[j]
          let brr = data[j]
          arr.list = brr
          jArr.push(j.toString())
        }
        if (type != 'no') {
          this.activeNames = jArr
        }
        this.$forceUpdate()
        console.log(this.iotTemplateCategoryList, '新模板')
      })
    },

    // 删除中间模板
    delQbbDrawer(index) {
      if (index > -1) {
        this.contentList.splice(index, 1)
        this.$message.success('删除成功')
      }
    },

    // 发布信息
    publishInfo() {
      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()
          let that = this

          let devicePixel = this.form.devicePixel.split('*')
          let newArr = this.contentList.map(function (item) {
            let obj = {}

            obj.STAY = item.STAY
            obj.ACTION = item.ACTION
            obj.SPEED = item.SPEED
            obj.COORDINATE = item.COORDINATE.replace('-', '0')
            obj.COLOR = item.COLOR
            obj.FONT = that.getFontValue(item.FONT)
            obj.FONT_SIZE = item.FONT_SIZE.substring(0, 2)
            // obj.CONTENT = item.CONTENT.replace(/\\/g, '\\\\')
            //

            // obj.CONTENT = item.CONTENT.replace(/\,/g , "other string or space")
            // obj.CONTENT = item.CONTENT
            obj.CONTENT = item.CONTENT.replaceAll(',', '\\,')
            obj.CONTENT = obj.CONTENT.replaceAll('=', '\\=')
            obj.CONTENT = obj.CONTENT.replaceAll('\n', '\\\\n')

            // obj.CONTENT = obj.CONTENT.replaceAll('=','\=')
            obj.width = devicePixel[0]
            obj.height = devicePixel[1]
            obj.formatStyle = item.formatStyle
            return obj
          })
          objAll.parameters = newArr
          const param = {
            objectData: JSON.stringify(objAll)
          }
          console.log(newArr, 'newArr')

          invokedFunction(objAll.deviceIds, 11, { size: '65535', fileName: 'play010.lst' })
            .then(res => {
              console.log('发布消息,校验文件名-------------------------------------')
              console.log(res)
              if (res.data.result == '01') {
                invokedFunction(objAll.deviceIds, 13, { parameters: newArr })
                  .then(res => {
                    console.log('发布消息,发送文件内容-----------------------------')
                    console.log(res)
                    if (res.data.result == '01') {
                      invokedFunction(objAll.deviceIds, '1B', { fileId: '10' })
                        .then(res => {
                          console.log('发布消息,播放文件-----------------------------')
                          console.log(res)
                        })
                        .catch(() => {
                          this.$modal.msgWarning('发布失败,请重试')
                        })
                    }
                  })
                  .catch(() => {
                    this.$modal.msgWarning('发布失败,请重试')
                  })
              }
            })
            .catch(() => {
              this.$modal.msgWarning('发布失败,请重试')
            })
          loading.close()
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消发布情报板'
          })
          loading.close()
        })
    },

    // 接收子组件新增待发模板
    addInfo(form) {
      console.log(form, '待发新增')
      form.ID = this.contentList.length
      this.contentList.push(deepClone(form))
      this.$message.success('添加成功')
      this.$forceUpdate()
    },

    // 接收子组件form表单 修改
    receiveForm(form) {
      console.log(form, '接收子组件form表单 修改')
      this.contentList.splice(this.index_, 1, form)
      this.$forceUpdate()
      this.allVmsTemplate('no')
    },

    // 打开添加信息弹窗
    openDialogVisible(type, mode) {
      this.$refs.addinfo.init(this.form.devicePixel, type, mode)
    },

    // 全选
    handleCheckAllChange(val) {
      this.checkedCities = val ? this.deviceList : []
    },

    // 多选
    handleCheckedCitiesChange(value) {
      console.log(value, 'value')
      this.checkedCities = value
      let val = JSON.parse(JSON.stringify(value))
      for (let itm of this.deviceList) {
        if (val.indexOf(itm) > -1) {
          this.checkAll = true
        } else {
          this.checkAll = false
          return
        }
      }
      this.$forceUpdate()
    },
    // 情报板列表手风琴
    handleChange(val) {
      this.contentList = []
      this.deviceList = []
      this.disabledButton = true
      this.checkedCities = []
      this.checkAll = false
      this.form.devicePixel = val
      this.allVmsTemplate()
      for (let item of this.iotBoardList) {
        if (item.devicePixel == val) {
          // this.checkboxList = item.list;
          for (let itm of item.list) {
            this.deviceList.push(itm.deviceId)
          }
        }
      }
    },

    // 转报文 ITEM001
    formatNum(num, length) {
      return (Array(length).join('0') + parseInt(num)).slice(-length)
    },

    // 转报文 字体
    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' //白色
    },

    // 向内容显示区域添加一条信息
    addContentDisplayInfos(addId, no, disContent) {
      var jsonArr = {}
      jsonArr.itemId = addId
      jsonArr.disContent = disContent
      this.disContentList.push(jsonArr)
    },

    // 回读
    async 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
        })*/
      await getDeviceRealtimeProperty(deviceId, '3A', { async: false })
        .then(res => {
          if ('3A' in res.data) {
            console.log('回读消息------------------------')
            console.log(res.data)
            var contents = res.data['3A'].content
            for (let i = 0; i < contents.length; i++) {
              let item = contents[i]
              item.COLOR = item.foregroundColor.toUpperCase()
              item.FONT_SIZE = item.fontSize + 'px'
              item.ID = i
              item.FONT = item.font
              item.STAY = item.playbackDuration
              item.ACTION = item.screenEntryMethod
              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.msgWarning('回读失败,请重试')
          this.loading = false
          this.submitButton = false
        })
      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
        }
      })*/
    },

    covering(value) {
      if (value.length < 3) {
        value = '0' + value
        return this.covering(value)
      }

      return value
    },

    // 待下发 编辑
    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
    },

    // 转颜色
    getColorStyle(font) {
      if (font == '黄色' || font == 'yellow' || font == '4') {
        return '#FFFF00'
      } else if (font == '红色' || font == 'red' || font == '1') {
        return '#FF0000'
      } else if (font == '绿色' || font == 'GreenYellow' || font == '000255000000' || font == '2') {
        return '#00FF00'
      } else if (font == '蓝色' || font == 'blue' || font == '3') {
        return '#0000FF'
      } else if (font == '7' || font == 'white') {
        return '#FFFFFF'
      } else {
        return '#' + font
      }
    },

    // 居中
    getTextAlign(font) {
      if (font == '0') {
        return 'left'
      } else if (font == '1') {
        return 'right'
      } else {
        return 'center'
      }
    },

    // 换算字号
    getFontSize(font, screenSize) {
      if (!font) {
        return
      }
      let width = ''
      let height = ''
      if (!screenSize) {
        width = this.form.devicePixel.split('*')[0]
        height = this.form.devicePixel.split('*')[1]
      } else {
        width = screenSize.split('*')[0]
        height = screenSize.split('*')[1]
      }
      if (width <= 450 && height <= 75) {
        if (font.toString().length == 2) {
          return font + 'px'
        } else {
          return font.substring(0, 2) + 'px'
        }
      } else {
        if (width / 450 > height / 75) {
          if (font.toString().length == 2) {
            return font / (width / 450) + 'px'
          } else {
            return font.substring(0, 2) / (width / 450) + 'px'
          }
        } else {
          if (font.toString().length == 2) {
            return font / (height / 75) + 'px'
          } else {
            return font.substring(0, 2) / (height / 75) + 'px'
          }
        }
      }
    },

    // 换算文字在模板的位置
    getCoordinate(coordinate, type, screenSize) {
      let width = ''
      let height = ''
      if (!screenSize) {
        width = this.form.devicePixel.split('*')[0]
        height = this.form.devicePixel.split('*')[1]
      } else {
        width = screenSize.split('*')[0]
        height = screenSize.split('*')[1]
      }
      if (width <= 450 && height <= 75) {
        return coordinate + 'px'
      } else {
        if (type == 'left') {
          if (width < 450 && height > 75) {
            return coordinate / (height / 75) + 'px'
          } else {
            if (width / 450 >= height / 75) {
              return coordinate / (width / 450) + 'px'
            } else {
              return coordinate / (height / 75) + 'px'
            }
          }
        } else if (type == 'top') {
          if (width < 450 && height > 75) {
            return coordinate / (height / 75) + 'px'
          } else {
            if (width / 450 >= height / 75) {
              return coordinate / (width / 450) + 'px'
            } else {
              return coordinate / (height / 75) + 'px'
            }
          }
        }
      }
    },
    getFontStyle(font) {
      if (font == '宋体') {
        return 'Simsun'
      } else if (font == '黑体') {
        return 'SimHei'
      } else if (font == '楷体') {
        return 'KaiTi'
      } else {
        return font
      }
    },
    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
      }
    },
    // //  上移
    // moveTop(i, item) {
    //   if (item && i) {
    //     let obj = { ...this.contentList[i - 1] };
    //     this.contentList.splice(i - 1, 1, item);
    //     this.contentList.splice(i, 1, obj);
    //     this.$forceUpdate();
    //   }
    // },
    // // 下移
    // moveBottom(i, item) {
    //   if (item && typeof i === "number") {
    //     let obj = { ...this.contentList[i + 1] };
    //     this.contentList.splice(i + 1, 1, item);
    //     this.contentList.splice(i, 1, obj);
    //     this.$forceUpdate();
    //   }
    // },
    dialogClose() {
      this.showEmit = false
      this.arrowRightVisible = false
      setTimeout(() => {
        this.allVmsTemplate('no')
      }, 500)
    },
    hideScrollFn() {
      // 隐藏滚动条
      document.documentElement.style.overflow = 'hidden'
      // 禁用滚动功能
      function disableScroll() {
        // 记录当前滚动位置
        const scrollPosition = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0

        // 设置滚动位置为固定值，防止滚动
        document.body.style.position = 'fixed'
        document.body.style.top = `-${scrollPosition}px`
      }

      // 启用滚动功能
      function enableScroll() {
        // 获取之前记录的滚动位置
        const scrollPosition = parseInt(document.body.style.top || '0', 10)

        // 恢复滚动位置
        document.body.style.position = ''
        document.body.style.top = ''

        // 滚动到之前的位置
        window.scrollTo(0, -scrollPosition)
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.container {
  .verticalBox {
    height: 100%;
    padding: 10px 5px;

    .bigTitle {
      padding: 0px 0;
      /* // border-bottom: 1px solid #05afe3; */
      margin-bottom: 10px;
      display: flex;
      justify-content: space-between;
      height: 60px;
      font-size: 0.8vw;
      align-items: center;
    }

    .contentBox {
      width: 100%;
      height: calc(100% - 46px);
      padding: 0 0 1vh 0;
      /* // overflow: auto; */

      .con {
        /* // border: 1px solid #05afe3; */
        height: 75px;
        position: relative;
        width: 540px;
        overflow: hidden;
        display: flex;
        justify-content: center;
        align-items: center;
        border: 2px solid #004c64;
      }

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

        div {
          background-repeat: no-repeat;
          background-size: 100% 100%;
          width: 40px;
          height: 40px;
        }

        > div:first-of-type {
          /* background-image: url(../../../assets/cloudControl/edit2.png); */
        }

        > div:nth-of-type(2) {
          /* background-image: url(../../../assets/cloudControl/edit4.png); */
        }

        /* // >div:last-of-type{
          //   background-image: url(../../../assets/cloudControl/edit4.png);
          // } */
        > div:first-of-type:hover {
          /* background-image: url(../../../assets/cloudControl/edit1.png); */
        }

        > div:nth-of-type(2):hover {
          /* background-image: url(../../../assets/cloudControl/closeIcon1.png); */
        }

        /* // >div:last-of-type:hover{
          //   background-image: url(../../../assets/cloudControl/closeIcon1.png);
          // } */
        i {
          font-size: 24px;
          color: #666;
          cursor: pointer;
          caret-color: rgba(0, 0, 0, 0);
          user-select: none;
        }

        i:hover {
          color: #05afe3 !important;
        }
      }

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

    .templateBox {
      width: 100%;
      height: calc(100% - 46px);
      padding: 0 0 1vh 0;

      .con {
        height: 75px;
        margin: 10px 0;
        padding: 0 10px;
        overflow: hidden;
        display: flex;
        align-items: center;

        .templateTitle {
          height: 75px;
          border: 2px solid #004c64;
          position: relative;
          width: 540px;
          float: left;
          display: flex;
          justify-content: center;
          align-items: center;
          overflow: hidden;
        }

        .menuBox {
          display: flex;
          float: right;
          margin-left: 15px;
          padding: 0 0.2vw;
          /* // border: solid 1px #05afe3; */
          width: calc(100% - 555px);
          height: 100%;
          border: 2px solid #004c64;
          display: flex;
          justify-content: space-around;
          align-items: center;

          div {
            background-repeat: no-repeat;
            background-size: 100% 100%;
            width: 40px;
            height: 40px;
          }

          > div:first-of-type {
            /* background-image: url(../../../assets/cloudControl/toLeft2.png); */
          }

          > div:nth-of-type(2) {
            /* background-image: url(../../../assets/cloudControl/edit2.png); */
          }

          > div:last-of-type {
            /* background-image: url(../../../assets/cloudControl/edit4.png); */
          }

          > div:first-of-type:hover {
            /* background-image: url(../../../assets/cloudControl/toLeft1.png); */
          }

          > div:nth-of-type(2):hover {
            /* background-image: url(../../../assets/cloudControl/edit1.png); */
          }

          > div:last-of-type:hover {
            /* background-image: url(../../../assets/cloudControl/closeIcon1.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;
      }
    }
  }

  .checkbox {
    label {
      width: 100%;
      padding: 10px 0;
      box-sizing: border-box;
      display: flex;
    }
  }
}
.qbbBigDotBa {
  width: 64px;
  height: 9px;
  position: absolute;
  right: 5%;
  top: 35%;
}

::v-deep .el-collapse-item__content {
  line-height: normal;
  padding-bottom: 0px;
}

::v-deep .el-checkbox__label {
  display: flex !important;
  justify-content: space-between;
  width: 100%;
}

.el-checkbox {
  display: flex !important;
  padding-top: 10px;
}

::v-deep .el-table {
  caret-color: rgba(0, 0, 0, 0);
  user-select: none;

  thead {
    display: none;
  }
}

.huiduButton {
  background: transparent;
  border: none;
  height: 19px;
  line-height: 20px;
  padding: 0;
  color: #fff;
  font-size: 16px;
}

.huiduButton:hover {
  color: #05afe3 !important;
}

.boardTextStyle {
  position: absolute;
  /*line-height: 1;*/
  caret-color: rgba(0, 0, 0, 0);
  user-select: none;
  white-space: normal;
  word-break: break-all;
  overflow: hidden;
}
.qbbBigTitle {
  // margin-top: 1vh;
  color: #fff;
  height: 35px !important;
  background-image: url('~@/assets/screen/xtb/qbbtit.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
  display: flex;
  justify-content: start !important;
  align-items: center;
  position: relative;
}
.qbbBigDot {
  width: 18px;
  height: 22px;
  margin: 0 0.5vw 0 0.5vw;
}
.awaitBigTitle {
  width: 100%;
  color: #fff;
  padding-right: 6vw !important;
  height: 35px !important;
  background-image: url('~@/assets/screen/xtb/qbbti.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
  position: relative;
}

::v-deep .sortable-chosen:not(th) {
  background-color: rgba(5, 175, 227, 0.1) !important;
}

::v-deep .el-select .el-input .el-input__inner {
  caret-color: rgba(0, 0, 0, 0);
  user-select: none;
}

::v-deep .el-collapse-item__header,
.el-collapse-item__content {
  caret-color: rgba(0, 0, 0, 0);
  user-select: none;
}

::v-deep .el-collapse {
  border-bottom: transparent;
}

::v-deep .el-table .cell {
  padding-left: 5px;
}

::v-deep .el-checkbox + .el-checkbox {
  margin-left: 0px !important;
}
::v-deep .el-select .el-input .el-input__inner {
  color: #fff;
  background-color: #053b4f;
  border-color: transparent;
}
::v-deep .el-collapse-item__header {
  background-color: #053b4f;
  color: #fff;
  padding-left: 1vw;
  border-top: 5px solid #112d3b;
  border-radius: 7px;
  border-bottom: 5px solid #112d3b;
}
::v-deep .el-collapse-item__wrap {
  background-color: #053b4f;
  padding: 0 1vw;
}
::v-deep .el-collapse {
  color: #fff;
  border: none;
}
::v-deep .el-collapse-item__wrap {
  border: none;
}
::v-deep .el-checkbox__label {
  color: #fff;
}
::v-deep .el-button--medium {
  width: 96px;
  height: 23px;
  line-height: 1px;
  border-radius: 15px;
}
::v-deep .el-table__body-wrapper {
  background-color: #053b4f;
  padding: 0 1vw;
}
::v-deep .el-table tr {
  background-color: #053b4f;
}
::v-deep .el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell {
  background-color: #053b4f;
}
::v-deep .el-table td.el-table__cell {
  border: none;
}
.el-table::before,
.el-table--group::after,
.el-table--border::after {
  content: none;
}
/* 通用滚动条样式 */
::-webkit-scrollbar {
  width: 3px; /* 设置滚动条宽度 */
  height: 3px; /* 设置滚动条高度 */
}

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

::-webkit-scrollbar-thumb {
  background-color: #9abce0; /* 设置滚动条滑块颜色 */
  border-radius: 4px; /* 设置滚动条滑块圆角 */
}
</style>