<template>
  <div class="infoBoardBox" :style="menu.isRecentOpen?'height:calc(100vh - 100px)':'height:calc(100vh - 60px)'">
    <div class="infoBoardCon">
      <!-- ++++++++++设备列表++++++++++ -->
      <div style="width: 20%" class="part partLeft">
        <!-- <div class="partTitle boardListTitle"> -->
        <!-- <img class="qbbBigDot" src="@/assets/screen/xtb/qbbdot.png" alt=""> -->
        <!-- <div>情报板列表</div> -->
        <!-- <img class="qbbBigDotBa" src="@/assets/screen/xtb/qbba.png" alt=""> -->
        <!-- </div> -->
        <WgtTitle :title="'广播设备列表'"></WgtTitle>
        <el-form :model="form" class="formSearch" size="mini">
          <!-- class="partCon" -->
          <!-- style="display: flex; flex-direction: column" -->
          <!-- ref="form" -->
          <el-form-item>
            <el-col :span="12">
              <el-select v-model="form.selectedDirection" size="medium" placeholder="请选择方向" class="direction">
                <el-option v-for="item in boardDirectionList" :key="item.dictValue" :label="item.dictLabel"
                  :value="item.dictValue" />
                <!-- @click.native="____changeDirection(item.dictValue)" -->
              </el-select>
            </el-col>
            <el-col :span="11" :offset="1">
              <el-checkbox-group v-model="form.status" style="height:26px">
                <el-checkbox label="1">在线</el-checkbox>
                <el-checkbox label="0">离线</el-checkbox>
              </el-checkbox-group>
            </el-col>
          </el-form-item>
          <el-form-item label="开始桩号:">
            <el-col :span="2" class="text-center tc-lb">K</el-col>
            <el-col :span="7">
              <el-input-number v-model="form.stakeFrom[0]" style="width: 100%;" :precision="0" :min="0"
                :max="1000"></el-input-number>
            </el-col>
            <el-col :span="2" class="text-center tc-lb">+</el-col>
            <el-col :span="7">
              <el-input-number v-model="form.stakeFrom[1]" style="width: 100%;" :precision="0" :min="0"
                :max="1000"></el-input-number>
            </el-col>
          </el-form-item>
          <el-form-item label="结束桩号:">
            <el-col :span="2" class="text-center tc-lb">K</el-col>
            <el-col :span="7">
              <el-input-number v-model="form.stakeTo[0]" style="width: 100%;" :precision="0" :min="0"
                :max="1000"></el-input-number>
            </el-col>
            <el-col :span="2" class="text-center tc-lb">+</el-col>
            <el-col :span="7">
              <el-input-number v-model="form.stakeTo[1]" style="width: 100%;" :precision="0" :min="0"
                :max="1000"></el-input-number>
            </el-col>
          </el-form-item>
          <el-form-item style="display: flex; justify-content: center;">
            <el-button class="btnInfoBoard" type="add" @click.native="____onSearchDevice()">搜索</el-button>
            <el-button type="publish" @click.native="____onResetSearchDevice()">重置</el-button>
          </el-form-item>
        </el-form>
        <div style="flex:1; height: 0; padding:0 10px 10px">
          <vuescroll :ops="scrollOptions">
            <template v-if="deviceList.length> 0">
              <el-checkbox-group class="deviceList" v-model="checkedDeviceIds" @change="____onSelectDevices">
                <el-checkbox v-for="(itm, index) in deviceList" :label="itm.iotDeviceId" :key="index"
                  :disabled="!itm.iotDeviceId || itm.iotDeviceId.includes('null') || itm.deviceState == 0 || itm.deviceState == null">
                  <el-tooltip content="设备未接入" placement="top"
                    v-if="!itm.iotDeviceId || itm.iotDeviceId.includes('null_')">
                    <div class="title">{{ itm.deviceName }}</div>
                  </el-tooltip>
                  <el-tooltip content="设备离线" placement="top"
                    v-else-if="itm.deviceState == 0 || itm.deviceState == null">
                    <div class="title">{{ itm.deviceName }}</div>
                  </el-tooltip>
                  <div v-else class="title">{{ itm.deviceName }}</div>
                  <el-tooltip :content="(itm.deviceState == 0 || itm.deviceState == null) ? '离线' : '在线'"
                    placement="top">
                    <img src="@/assets/jihe/images/offline.svg" class="state"
                      v-if="itm.deviceState == '0' || itm.deviceState == null">
                    <img src="@/assets/jihe/images/online.svg" class="state" v-else>
                  </el-tooltip>
                  <!-- <el-tooltip content="回读" placement="top">
                    <el-button class="el-icon-tickets huiduButton" @click.stop.prevent="____forkDeviceInfo(itm)"
                      :disabled="submitButton"></el-button>
                  </el-tooltip> -->
                </el-checkbox>
              </el-checkbox-group>
            </template>
            <div v-else style="color: #fff; text-align: center; line-height: 60px">
              暂无数据
            </div>

          </vuescroll>
        </div>
      </div>
      <!-- ++++++++++中间部分：单个设备++++++++++ -->
      <div style="width: 37.8%" class="part partMiddle">
        <WgtTitle title="待下发信息">
          <div class="titleBtnBox">
            <el-button class="btnInfoBoard" type="add" @click.native="____onAddDeviceItem()"
              :disabled="selectedBdMsg.length>=1">添加信息</el-button>
            <el-button v-hasPremi="['service:broadcast:publish']" class="btnInfoBoard" type="publish" @click="____onPublish"
              :disabled="selectedBdMsg.length <= 0 || selectedDevices.length <= 0">发布信息</el-button>
          </div>
        </WgtTitle>
        <!-- <div class="partTitle partDeviceTempateTitle">
          <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="selectedSize">【 {{ selectedSize }}】</span>
            </div>
            <img class="qbbBigDotBa" src="@/assets/screen/xtb/qbba.png" alt="">
          </div>


          <div class="controlBox">
            <el-button class="btnInfoBoard" type="add" @click.native="____onAddDeviceItem()">添加信息</el-button>
            <el-button class="btnInfoBoard" type="publish" @click="____onPublish" :disabled="selectedBdMsg.length <= 0">发布信息</el-button>
          </div>
        </div> -->
        <div class="partCon">
          <vuescroll :ops="scrollOptions" class="templateBox" v-if="selectedBdMsg.length > 0"
            :class="{ hide: isHideCtt }">
            <draggable tag="div" :list="selectedBdMsg" @end="____onDragend" ghostClass="ghost_class"
              dragClass="drag_class" chosenClass="chosen_class">
              <div v-for="(itm, indx) in selectedBdMsg" :key="indx" class="tplItem">
                <!-- 模板内容 -->
                <BroadcastTplShower class="boardPreview" :text="itm.content" />
                <!-- 操作按钮 -->
                <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>
            </draggable>
          </vuescroll>
          <Empty v-else text="请添加待下发信息..." style="padding-top: 100px"></Empty>
        </div>
      </div>
      <!-- ++++++++++右边部分：信息模板++++++++++ -->

      <div style="width: 42.2%;" class="part partRight tpl_box">
        <WgtTitle :title="`信息模板`" class="tpl_title">
          <div class="titleBtnBox">
            <el-button v-hasPremi="['service:broadcast:addTemplate']" class="btnInfoBoard" type="add" @click="____onAddTemplate">添加模板</el-button>
          </div>
        </WgtTitle>
        <BroadcastTplList class="tpl_list" ref="tpl_list" @onAddToDevice="____onAddFromTpl" />
      </div>
    </div>
    <broadcastEditor @afterSubmit="____onEditSubmit" :mode="editDialog.mode" :type="editDialog.type"
      :visible.sync="editDialog.visible" :tpl="editDialog.tpl"></broadcastEditor>
    <!-- <editInfo :boardEmitItem="this.boardEmitItem" @receiveForm="receiveForm" v-if="this.showEmit" @dialogClose="dialogClose"></editInfo> -->
  </div>
</template>
<script>
import draggable from "vuedraggable";
import Sortable from "sortablejs";
import editInfo from "./editInfo";
import {
  addTemplate,
  addTemplateContent,
} from "@/api/broadcast/template";
import {
  getDeviceRealtimeProperty,
} from "@/api/device/device";
import { getdeviceList, getBoardDeviceInfo } from "@/api/broadcast/broadcast";

import BroadcastTplShower from "@screen/components/broadcast/BroadcastTplShower.vue";

import broadcastEditor from "@screen/components/broadcast/broadcastEditor";

import vuescroll from "vuescroll";
import scrollOptions from "@/common/scrollbar.js";

import testDeviceList from "@screen/testData/deviceList.js";
import testDeviceInfo from "@screen/testData/infoBoard.js";

import WgtTitle from "@screen/pages/perception/widgets/title";

import broadcast from "@screen/mixins/broadcast";
import { initSearch } from "@screen/utils/enum/common.js"
import BroadcastTplList from "@screen/components/broadcast/BroadcastTplList.vue";
import {  mapState } from "vuex";
import request from '@/utils/request'
import { multiResultShow } from "@screen/utils/common";


export default {
  name: "DeviceCast",
  mixins: [broadcast],
  components: {
    BroadcastTplList,
    draggable,
    WgtTitle,
    broadcastEditor,
    editInfo,
    BroadcastTplShower,
    vuescroll,
  },
  dicts: ["iot_board_direction"],

  data() {
    return {
      tplCategory: [], //模板
      multiPublish: true,
      toggleIndex: 0,
      toRightCategory: "", //向右类别绑定
      arrowRightVisible: false, //向右类别弹窗
      loading: false,
      submitButton: false, //回读禁用
      selectedDevices: [],
      boardDirectionList: [], //方向
      userQueryParams: {
        userName: this.$store.state.user.name,
      }, //用户
      selectedPixelMode: null, //分辨率
      editType: 0,
      showEmit: false, //修改组件
      index_: 0, //待下发 编辑项index
      index: 0, //模板 编辑项 index
      deviceId: "", //情报板id
      boardEmitItem: null, //修改彈窗的數據
      userDeptId: "", //管理站id
      deptList: [], //分中心下拉框
      mechanismList: [], //管理机构下拉框
      devicessizeList: [], //分辨率下拉框
      deviceList: [], //分辨率
      checkedDeviceIds: [], //多选 选中项
      form: {},
      supplier: null, //报文类型
      activeNames: [], //模板 展开项
      checkAll: false,
      isIndeterminate: false,
      contentList: [], //待下发数据
      toRightItem: {}, //向右添加到模板的数据
      selectedBdMsg: [],
      editDialog: {
        mode: "",
        type: "",
        visible: false,
        tpl: {},
      },
      scrollOptions,
      boardItemEdtingIndex: -1,
      isHideCtt: false,
    };
  },
  watch: {
    contentList: function (newVal, oldVal) {
      this.$nextTick(() => {
        this.rowDrop();
      });
    },
    "editDialog.visible": function (newV) {
      if (!newV) {
        this.editDialog.tpl = null;
      }
    },
    // boardSizeDic: function (newVal, oldVal) {
    //   console.log(newVal, 'selectedSize')
    //   if (newVal.length == 0) {
    //     this.form.selectedPixel = ''
    //     // this.allVmsTemplate('no')
    //   }
    // }
    // // 改变方向
    // 'form.selectedDirection':function(newVal,oldVal){
    //   console.log(newVal,"newVal")
    //   this.boardSizeDic = []
    // }
  },
  created() {
    Promise.all([
      this.____initDirection()
    ]).then((res) => {
      this.____resetForm();
      this.____getIotBoard();
    });
  },
  mounted() {
    // this.rowDrop();
    this.hideScrollFn();
  },
  computed: {
    ...mapState(["menu"]),
  },
  methods: {
    ____boardTxtStyle() {
      return {
        color: "#F00",
      };
    },

    // 行拖拽
    rowDrop() {
      if (JSON.parse(JSON.stringify(this.contentList)).length > 0) {
        // 要侦听拖拽响应的DOM对象
        const tbody = document.querySelector(
          ".partCon .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);
          },
        });
      }
    },
    ____initDirection() {
      return this.getDicts("iot_board_direction").then((res) => {
        this.boardDirectionList = res.data;
      });
    },
    //改变方向
    ____changeDirection(val) {
      this.____getIotBoard();
    },

    ____onSearchDevice() {
      this.____getIotBoard();
    },
    ____resetForm() {
      this.form = {
        selectedDirection: this.boardDirectionList[0].dictValue,
        status: ["0", "1"],
        stakeFrom: [+initSearch.startStakeMark[0], +initSearch.startStakeMark[1]],
        stakeTo: [+initSearch.endStakeMark[0], +initSearch.endStakeMark[1]],
      }
    },
    ____onResetSearchDevice() {
      this.____resetForm();
      // this.____initDirection();
      this.____getIotBoard();
    },
    // 情报板设备 折叠面板
    ____getIotBoard() {
      this.deviceList = [];
      // this.checkAll = false;
      // TODO 接口
      let param = {
        direction: this.form.selectedDirection,
      };
      let stakeFrom = this.form.stakeFrom[0] * 1000 + this.form.stakeFrom[1];
      let stakeTo = this.form.stakeTo[0] * 1000 + this.form.stakeTo[1];
      let statusForm = _.cloneDeep(this.form.status);
      if (statusForm.includes("0")) {
        statusForm.push(null)
      }

        getdeviceList(param).then((res) => {
          res.data.forEach((item, index) => {
            if (_.isString(item.otherConfig)) {
              item.otherConfig = JSON.parse(item.otherConfig);
            }
            item.iotDeviceId = item.iotDeviceId || "null_" + item.id;

            let stakeThis = +item?.stakeMark?.replace(/[K\+]/g, "") || -1;

            if (stakeThis >= stakeFrom && stakeThis <= stakeTo && statusForm.includes(item.deviceState)) {
              this.deviceList.push(item);
            }
            // console.log(item, item.otherConfig.screenSize)
            // if (!this.selectedDevices.deviceName) {
            //   this.selectedDevices = item;
            // }
          });
        });
      
    },
    ____forkDeviceInfo(deviceFrom) {
      //从目标设备取得信息
      if (IS_TESTING) {
        this.selectedBdMsg = [];
        this.selectedBdMsg = _.cloneDeep(testDeviceInfo.data["3A"].content);
      } else {
        if (!deviceFrom.iotDeviceId || deviceFrom.iotDeviceId.includes("null_")) {
          this.$message.warning("设备未接入！");
          return;
        }
        this.selectedBdMsg = [];
        getBoardDeviceInfo(deviceFrom.iotDeviceId, deviceFrom.id)
          .then((res) => {
            this.selectedBdMsg = res.data["3A"].content;
            this.isHideCtt = true;
            this.$nextTick(() => {
              this.isHideCtt = false;
            });
          })
          .catch((err) => { });
      }
    },
    ____onAddTemplate() {

      // if(selectedSize){
      //   fontSize = "64px"
      // }
      this.editDialog = {
        visible: true,
        mode: "add",
        type: "template",
        tpl: {
          content: ""
        },
      };
    },
    ____onDragend(evt) {
      // console.log(evt, this.selectedBdMsg , "拖拽结束+++=======")
    },
    ____onEditBoardItem(tpl, index) {
      // type : board template
      // mode : edit add toDevice toTemplate
      this.boardItemEdtingIndex = index;
      this.editDialog = {
        visible: true,
        mode: "edit",
        type: "device",
        tpl,
      };
    },
    ____onAddFromTpl(item){
        // if(this.checkedDeviceIds.length<=0){ // this.$message.warning('未选择设备!'); // return; // }
        if(this.selectedBdMsg.length >= 1) {
          this.$message({
            type: "warning",
            message: "只能发布一条语音广播!",
          });
          return;
        }

        this.editDialog = {
          visible: false,
          mode: "toDevice",
          type: "template",
          tpl: item,
        };
  },
    //提交之后的回调
    ____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(_.cloneDeep(para.data));
        }
      } else if (para.mode == "toDevice") {
        let temp = _.cloneDeep(para.data);
        this.$delete(temp, "id");
        this.selectedBdMsg.push(temp);
      } else {
        this.____refreshPageData();
      }
    },
    ____refreshPageData() {
      this.$refs["tpl_list"].____refreshData();
      // if (para.type == "template") {

      //   this.____getAllTemplate().then((res) => {
      //     this.____sortTemplate();
      //   });

      // } else {
      // }
    },

    // 修改弹窗

    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;
    },

    // 删除中间模板
    ____onDeleteBoardItem(index) {
      if (index > -1) {
        this.selectedBdMsg.splice(index, 1);
        this.$message.success("删除成功");
      }
    },

    // 发布信息
    ____onPublish() {
      if (!this.selectedDevices.length) {
        this.$message.warning("请选择设备");
        return;
      }
      // this.____publishInfo();

      let deviceList = [];
      let checkList = [];
      this.selectedDevices.forEach(item=>{
          deviceList.push({
            deviceType: item.deviceType,
            id: item.id,
            iotDeviceId: item.iotDeviceId,
            otherConfig: JSON.stringify(item.otherConfig),
          });
          checkList.push(item.otherConfig)
      })
      this.$confirm("是否确定发布语音广播?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          
          const param = {
          "devices": deviceList,
          "functions": [
            {
              "functionId": "1",//随便 不为空即可
              "params": {
                name: "task-3",
                outVol: this.selectedBdMsg[0].outVol,
                priority:this.selectedBdMsg[0].priority,
                text: this.selectedBdMsg[0].content,
                repeatTimes: this.selectedBdMsg[0].repeatTimes,
                termList: checkList,
                functionType: "startPaTts",
              }
            }

          ]
        }

          let loading = this.$loading({
            lock: true,
            text: "Loading",
            spinner: "el-icon-loading",
            background: "rgba(0, 0, 0, 0.7)",
          });
          request({
            url: `/business/device/batchFunctions`,
            method: "post",
            data: param,
          }).then(data=>{
            multiResultShow(data.data, item => item.result.retCode == '0', "广播控制");
          }).catch((err) => {})
          .finally(() => {
            loading.close();
          });

          // let data = {
          //     functionType : "startPaTts",
          //     name : "task-3",
          //     // outVol : "6",
          //     outVol: this.selectedBdMsg[0].outVol,
          //     // priority : "1",
          //     priority: this.selectedBdMsg[0].priority,
          //     repeatTimes: this.selectedBdMsg[0].repeatTimes,
          //     // termList : [{ zoneld: "6001", termDN: "601" }, { zoneld: "6001", termDN: "608" }, { zoneld: "6001", termDN: "610" }],
          //     termList: deviceList,
          //     text: this.selectedBdMsg[0].content
          // }
          //   publishToBoard(data)
          //     .then((res) => {
          //       // this.saveLog(content);
          //       const cbMsg = {
          //         0: '成功',
          //         1: '非法控制台标识',
          //         2: '鉴权失败',
          //         3: '非法分区标识',
          //         4: '非法终端号码',
          //         5: '非法分区名称',
          //         6: '非法终端类型',
          //         7: '非法控制话机号码',
          //         8: '控制话机离线',
          //         9: '控制话机忙',
          //         10: '非法被叫号码',
          //         11: '非法音乐标识',
          //         12: '非法音乐资源链接',
          //         13: '非法广播任务标识',
          //         14: '非法文字广播内容',
          //         15: '非法广播重复次数',
          //         16: '非法广播文件列表',
          //         17: '非法广播终端列表',
          //         18: '非法呼叫标识'
          //       }
          //       if(res.retCode === 0){
          //         this.$message({
          //           type: "success",
          //           message: "发布成功",
          //         });
          //       } else {
          //         this.$message({
          //           type: "error",
          //           message: "发布失败，"+cbMsg[res.retCode],
          //         });
          //       }
                
          //       // !isMultiControl && this.____getDeviceInfo();
          //     })
          //     .catch((err) => {})
          //     .finally(() => {
          //       loading.close();
          //     });
        })

    },

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

    // 多选
    ____onSelectDevices(arr) {

      this.selectedDevices = [];
      if (this.checkedDeviceIds.length == 0) {
        return;
      }

      this.selectedDevices = _.filter(this.deviceList, (item) => {
        return this.checkedDeviceIds.includes(item.iotDeviceId)
      });

      // this.____forkDeviceInfo(this.selectedDevices);
    },

    // 回读
    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.selectedPixel = 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.selectedPixel = 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;
    },

    // 换算文字在模板的位置
    getCoordinate(coordinate, type, screenSize) {
      let width = "";
      let height = "";
      if (!screenSize) {
        width = this.form.selectedPixel.split("*")[0];
        height = this.form.selectedPixel.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";
            }
          }
        }
      }
    },
    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>
::v-deep .formSearch {
  padding: 20px 20px 0;

  .el-form-item__label {
    color: #fff;
  }
}

.direction {
  ::v-deep .el-input {
    .el-input__inner {
      font-size: 14px !important;
      padding: 8px 5px;
    }
  }
}

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

  .infoBoardCon {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    padding: 20px;

    .part {
      background-color: #133242;
      margin-right: 10px;
      display: flex;
      flex-direction: column;

      &.partRight {
        margin-right: 0;
      }

      // .partTitle {
      //   padding: 0px 0;
      //   /* // border-bottom: 1px solid #05afe3; */
      //   margin-bottom: 10px;
      //   display: flex;
      //   justify-content: space-between;
      //   height: 60px;
      //   font-size: 18px;
      //   align-items: center;
      //   .controlBox {
      //     border: 1px solid #f00;
      //     display: flex;
      //     justify-content: center;
      //     margin-bottom: 10px;
      //   }
      // }
      .titleBtnBox {
        flex: 1;
        display: flex;
        justify-content: flex-end;
        padding: 0 10px;
      }

      .partCon {
        flex: 1;
        height: 0;
        padding: 10px;

        .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;
        }
      }

            .templateBox {
              width: 100%;
              height: 100%;
              transition: all linear 0.3s;
              opacity: 1;
              transform: translateX(0);
      
              &.hide {
                transform: translateX(20px);
                opacity: 0;
                transition: all linear 0.3s;
              }
      
              .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: 50px;
                  display: flex;
                  margin-left: 10px;
                  /* // border: solid 1px #05afe3; */
                  border: 2px solid #004c64;
                  background-color: #133242;
                  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.svg);
                    }
      
                    &.btnEdit {
                      background-image: url(~@/assets/jihe/images/button/edit.svg);
                    }
      
                    &.btnDelete {
                      background-image: url(~@/assets/jihe/images/button/delete.svg);
                    }
                  }
      
                  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;
                  }
                }
              }
      
              .tplItem.ghost_class {
      
                .boardPreview,
                .infoBtnBox {
                  border-color: #F00;
                }
              }
      
              .tplItem.chosen_class {
      
                .boardPreview,
                .infoBtnBox {
                  border-color: #0A0;
                }
              }
      
              .tplItem.drag_class {
      
                .boardPreview,
                .infoBtnBox {
                  border-color: #FF0;
                }
              }
      
              .el-collapse {
                max-height: 100% !important;
                overflow: auto;
                border-bottom: none;
                border-top: none;
                padding: 0 0.5vw;
              }
            }
    }
  }

    .tpl_box {
      display: flex;
      flex-direction: column;
  
      .tpl_title {
      }
  
      .tpl_list {
        flex: 1;
        height: 0;
        padding-left:10px;
      }
    }

  .checkbox {
    .boardLabel {}

    // 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;
}

.deviceList {
  margin-right: 5px;
  padding: 10px 20px;
  background-color: #053b4f;
  ::v-deep .el-checkbox__label {
    display: flex !important;
    justify-content: space-between;
    width: 100%;

    .title {
      flex: 1;
      width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      word-break: keep-all;
    }

    .state {
      width: 18px;
      height: 18px;
      margin-right: 4px;
    }

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

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

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

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

  thead {
    display: none;
  }
}

// .boardListTitle {
//   // 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;
}

// .partDeviceTempateTitle {
//   width: 100%;
//   color: #fff;
//   padding-right: 110px !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-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 {
  color: #fff;
  border: none;
}

::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>
