<template>
  <div class="monitor-container" style="cursor: default">
    <div class="monitor_hint" v-if="longtimetf">
      <div class="monitor_hint_text">
        <img src="../../../static/images/monitor/laba.png" alt="" />
        <p>
          您已持续观看监控很久了，长时间观看监控会耗尽物联网卡流量，请您注意
        </p>
      </div>
      <i class="el-icon-close" @click="guanbilong"></i>
    </div>
    <div class="monitor-wrap">
      <div class="video-box">
        <div class="video-container" ref="videoContainerRef">
          <!-- 插件播放 -->
          <div
            class="x"
            v-if="playType == 1"
            v-html="html"
            style="width: 100%; height: 100%"
          ></div>
          <!-- 非插件播放 ，默认非插件播放-->
          <div class="v" style="width: 100%; height: 100%" v-if="playType == 0">
            <div
              :class="{
                videoItem: true,
                a1: divNum == 1,
                a4: divNum == 4,
                a9: divNum == 9,
                selected: count == selected,
              }"
              v-for="count in divNum"
              :key="divNum + count"
              @click.capture="selectVideo(count)"
            >
              <div
                style="width: 100%; height: 100%"
                :id="'my-video' + count"
              ></div>
            </div>
          </div>
        </div>
        <div v-show="playType == 0" class="split-screen">
          <span class="sp sp01" @click="splitView(1)"></span>
          <span class="sp sp02" @click="splitView(4)"></span>
          <span class="sp sp03" @click="splitView(9)"></span>
        </div>
      </div>
      <div class="nav-box">
        <div class="inputbox">
          <!-- <div> -->
          <el-autocomplete
            size="mini"
            v-model="state"
            :fetch-suggestions="querySearchAsync"
            placeholder="请输入设备ID"
            @select="handleSelect"
          >
            <el-button
              @click="axiosList"
              slot="append"
              icon="el-icon-search"
            ></el-button>
          </el-autocomplete>
        </div>
        <ul class="viewLists">
          <li
            style="border: 1px solid #474e60"
            v-for="(item, index) in Idlist"
            :key="index"
            :class="{ active: activeIndex == index }"
            @click="selectEquip(item.device_id, item.jktype, index)"
          >
            <span
              :class="['dot', item.status == 1 ? 'onLine' : 'outLine']"
            ></span>
            <!-- <span :title="item.device_id + (item.device_name !== '' ? item.device_name : '暂无设备名称')">{{ item | formatName }}</span> -->
            <span :title="item.device_id">{{ item | formatName }}</span>
            <!--查看图片 v-if="item.photo_num !== '0'" -->
            <div class="viewPhoto">
              <i class="el-icon-picture" @click.stop="viewPhoto(item.d_id)"></i>
              <i
                class="el-icon-video-camera-solid"
                @click.stop="toplay(item.device_id)"
                v-if="item.camera_playback == 1"
              ></i>
              <i class="el-icon-s-tools" @click.stop="setjk(item)"></i>
            </div>
            <!--  -->
            <!-- <span @click.stop="viewPhoto(item.device_id)" class="viewPhoto"
              >查看图片</span
            > -->
          </li>
        </ul>
        <div class="splitPage" onselectstart="return false">
          <span
            class="arrow el-icon-caret-top"
            @click="splitPage('jian')"
          ></span>
          <span>{{ currPage }}</span>
          <span>/</span>
          <span>{{ totalPage }}</span>
          <span
            class="arrow el-icon-caret-bottom"
            @click="splitPage('jia')"
          ></span>
        </div>
        <div class="direc">
          <!-- <div @click="configCamera('takephoto', '')" class="cameraCtr"></div> -->
          <div @click="photograph()" class="cameraCtr"></div>
          <div
            @mousedown="configCamera('move', 0)"
            @mouseup="stopConfigCamera()"
            class="upCtr"
          ></div>
          <div
            @mousedown="configCamera('move', 1)"
            @mouseup="stopConfigCamera()"
            class="downCtr"
          ></div>
          <div
            @mousedown="configCamera('move', 2)"
            @mouseup="stopConfigCamera()"
            class="leftCtr"
          ></div>
          <div
            @mousedown="configCamera('move', 3)"
            @mouseup="stopConfigCamera()"
            class="rightCtr"
          ></div>
        </div>
        <div class="btnBox">
          <div class="zoom">
            <!-- 无论插件还是费插件都可以放大缩小 -->
            <span
              class="addCtr"
              @mousedown="configCamera('move', 8)"
              @mouseup="stopConfigCamera()"
            ></span>
            <span
              class="reduceCtr"
              @mousedown="configCamera('move', 9)"
              @mouseup="stopConfigCamera()"
            ></span>
          </div>
          <div
            v-show="jktype == 1"
            class="playBack"
            @click="playBackDialogVisible = true"
            id="playBack"
          ></div>
          <!-- <div
            v-show="playType == 0"
            @click="checkPlayType(1)"
            class="playtype1"
          ></div> -->
          <div
            v-show="playType == 1"
            @click="checkPlayType(0)"
            class="playtype0"
          ></div>
          <div @click="addEquip()" class="addequip"></div>
          <!-- <div @click="bindingSIM()" class="addequipA"></div> -->
          <!-- 绑定SIM卡及SIM卡查询 -->
          <!--  <div style="width: 140px; display: flex; margin: 0 auto">
           
            <div @click="inquireSIM()" class="addequipB"></div>
          </div> -->
        </div>
      </div>
    </div>
    <!-- 拍照 -->
    <el-dialog
      title="手动下载"
      :visible.sync="takePhotoDialogVisible"
      width="30%"
    >
      <el-input type="textarea" id="picUrl" v-model="picUrl"></el-input>
      <span slot="footer" class="dialog-footer">
        <el-button @click="takePhotoDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="copyPicUrl">复制</el-button>
      </span>
    </el-dialog>
    <!-- 查看回放 -->
    <el-dialog
      title="查看回放"
      :visible.sync="playBackDialogVisible"
      width="600px"
      @close="palyBackClose"
    >
      <el-form
        ref="backFormRef"
        :model="backForm"
        :rules="backFormRules"
        label-width="80px"
      >
        <el-form-item label="时间范围" prop="time">
          <el-date-picker
            v-model="backForm.time"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          >
          </el-date-picker>
        </el-form-item>
        <!-- <el-form-item label="通道" prop="aisle">
          <el-select
            style="width: 400px"
            v-model="backForm.aisle"
            placeholder="请选择"
          >
            <el-option
              v-for="item in Number(jktype)"
              :key="item"
              :label="'通道' + item"
              :value="item"
            >
            </el-option>
          </el-select>
        </el-form-item> -->
        <el-form-item>
          <el-button type="default" @click="playBackDialogVisible = false"
            >取消</el-button
          >
          <el-button type="primary" @click="playBackSubmit">确定</el-button>
        </el-form-item>
      </el-form>
      <div id="videoBack">
        <div id="playWind"></div>
      </div>
    </el-dialog>

    <!-- 测试添加设备 -->
    <el-dialog
      title="添加设备"
      :visible.sync="addEquipment"
      width="580px"
      :before-close="handleClose"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <!-- 测试 -->
      <div class="facility_box">
        <ul
          style="
            width: 100%;
            display: flex;
            justify-content: space-around;
            padding: 0;
            margin: 0;
          "
        >
          <li
            v-for="(item, index) in tltArray"
            :key="index"
            :class="stepIndex == index ? 'addClass' : ''"
            @click="next(index)"
            style="padding: 10px 0 10px 0; width: 50%; text-align: center"
          >
            {{ item.name }}
          </li>
        </ul>

        <!-- 第一步 -->
        <div v-if="stepIndex == 0" class="facility_boxOne">
          <div style="display: flex; width: 80%; margin: 15px auto">
            <span
              style="
                width: 136px;
                text-align: right;
                line-height: 35px;
                margin: 0 15px 0 0;
              "
              ><span style="color: red">*</span> 账号：</span
            >
            <el-input
              placeholder="请输入账号"
              v-model="FluoriteClouduser"
              clearable
            >
            </el-input>
          </div>
          <div style="display: flex; width: 80%; margin: 15px auto">
            <span
              style="
                width: 136px;
                text-align: right;
                line-height: 35px;
                margin: 0 15px 0 0;
              "
              ><span style="color: red">*</span> 业务员名称：</span
            >
            <el-input
              placeholder="请输入账号所相关的业务员名称"
              v-model="salesman"
              clearable
            >
            </el-input>
          </div>
          <div style="display: flex; width: 80%; margin: 15px auto">
            <span
              style="
                width: 136px;
                text-align: right;
                line-height: 35px;
                margin: 0 15px 0 0;
              "
              ><span style="color: red">*</span> token：</span
            >
            <el-input placeholder="请输入token" v-model="tokenData" clearable>
            </el-input>
          </div>
          <div style="display: flex; width: 80%; margin: 15px auto">
            <span
              style="
                width: 136px;
                text-align: right;
                line-height: 35px;
                margin: 0 15px 0 0;
              "
              ><span style="color: red">*</span> appkey：</span
            >
            <el-input placeholder="请输入秘钥" v-model="secretKey" clearable>
            </el-input>
          </div>
          <div style="display: flex; width: 80%; margin: 15px auto">
            <span
              style="
                width: 136px;
                text-align: right;
                line-height: 35px;
                margin: 0 15px 0 0;
              "
              ><span style="color: red">*</span> appSecret：</span
            >
            <el-input
              placeholder="请输入appSecret"
              v-model="furtiveData"
              clearable
            >
            </el-input>
          </div>
          <!-- <div style="display: flex; width: 80%; margin: 15px auto">
            <span
              style="
                width: 100px;
                text-align: right;
                line-height: 35px;
                margin: 0 15px 0 0;
              "
              ><span style="color: red">*</span> 设备厂家：</span
            >
            <el-radio v-model="radio" label="0" style="margin-top: 10px"
              >海康</el-radio
            >
            <el-radio v-model="radio" label="1" style="margin-top: 10px"
              >大华</el-radio
            >
          </div> -->
        </div>

        <!-- 第二步 -->
        <div v-else-if="stepIndex == 1" class="facility_boxTwo">
          <div style="display: flex; width: 80%; margin: 15px auto">
            <span
              style="
                width: 130px;
                text-align: right;
                line-height: 35px;
                margin: 0 15px 0 0;
              "
              ><span style="color: red">*</span> 萤石云账号id</span
            >
            <el-select
              style="width: 410px"
              v-model="FluoriteClouduserID"
              placeholder="请选择萤石云账号id"
              clearable
            >
              <el-option
                v-for="item in userNameID"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </div>
          <div style="display: flex; width: 80%; margin: 15px auto">
            <span
              style="
                width: 130px;
                text-align: right;
                line-height: 35px;
                margin: 0 15px 0 0;
              "
              ><span style="color: red">*</span> 设备id</span
            >
            <el-input
              placeholder="请输入设备id"
              v-model="equipmentID"
              clearable
              style="width: 410px"
            >
            </el-input>
          </div>
          <div style="display: flex; width: 80%; margin: 15px auto">
            <span
              style="
                width: 130px;
                text-align: right;
                line-height: 35px;
                margin: 0 15px 0 0;
              "
              ><span style="color: red">*</span> 通道</span
            >
            <el-select
              style="width: 410px"
              v-model="equipmentNumber"
              placeholder="请选择设备通道号"
              clearable
            >
              <el-option
                v-for="item in equipmentChannel"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </div>
          <div style="display: flex; width: 91%; margin: 15px auto">
            <span
              style="
                width: 130px;
                text-align: right;
                line-height: 24px;
                margin: 0 15px 0 0;
              "
              ><span style="color: red">*</span> 回放</span
            >
            <el-switch
              style="display: block"
              v-model="playback"
              active-color="#4f71ff"
              inactive-color="#ff4949"
              active-text="支持回放功能"
              inactive-text="不支持回放功能"
            >
            </el-switch>
          </div>
        </div>
      </div>
      <!-- 测试 -->
      <div slot="footer" class="dialog-footer">
        <div v-if="stepIndex == 0">
          <el-button @click="addEquipment = false" size="mini">取 消</el-button>
          <el-button type="primary" @click="FluoriteClouduserAdd" size="mini"
            >确 定</el-button
          >
        </div>
        <div v-if="stepIndex == 1">
          <el-button @click="addEquipment = false" size="mini">取 消</el-button>
          <el-button type="primary" @click="addConfirm" size="mini"
            >确 定</el-button
          >
        </div>
      </div>
    </el-dialog>

    <!-- 绑定SIM弹框 -->
    <el-dialog title="绑定SIM" :visible.sync="addEquipmentA" width="580px">
      <div v-loading="simloading">
        <div style="display: flex; width: 80%; margin: 15px auto">
          <span
            style="
              width: 75px;
              text-align: right;
              line-height: 35px;
              margin: 0 15px 0 0;
            "
            ><span style="color: red">*</span>设备id
          </span>
          <el-select
            v-model="bangDsimId"
            filterable
            remote
            reserve-keyword
            placeholder="请输入关键词"
            :remote-method="remoteMethod"
            :loading="loading"
            style="width: 410px"
            @change="bangDsimIdselect"
            size="mini"
          >
            <el-option
              v-for="item in bangDsimoptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
        <div style="display: flex; width: 80%; margin: 15px auto">
          <span
            style="
              width: 75px;
              text-align: right;
              line-height: 35px;
              margin: 0 15px 0 0;
            "
            ><span style="color: red">*</span>ICCID</span
          >
          <el-input
            placeholder="请输入iccid"
            v-model="equipmentValue"
            clearable
            style="width: 412px"
            size="mini"
          >
          </el-input>
        </div>
        <div style="width: 50%; margin: 15px auto">
          <el-button
            type="primary"
            size="mini"
            @click="(addEquipment = false), addEquipmentBfirm()"
            >查 询</el-button
          >
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="(addEquipmentA = false), addCancel()" size="mini"
          >取 消</el-button
        >
        <el-button
          type="primary"
          @click="(addEquipment = false), addConfirmSIM()"
          size="mini"
          >确 定</el-button
        >
      </span>
    </el-dialog>

    <!-- 查询SIM卡弹框 -->
    <!-- <el-dialog
      title="查询SIM"
      :visible.sync="addEquipmentB"
      width="30%"
    >
      <div style="display: flex; width: 80%; margin: 15px auto"  >
        <span
          style="
            width: 75px;
            text-align: right;
            line-height: 35px;
            margin: 0 15px 0 0;
          "
          ><span style="color: red">*</span> ICCID</span
        >
        <el-input placeholder="请输入iccid" v-model="equipmentICCID" clearable>
        </el-input>
      </div>
     
      <span slot="footer" class="dialog-footer">
        <el-button @click="(addEquipmentB = false), addEquipmentBCancel()"
          >取 消</el-button
        >
        <el-button
          type="primary"
          @click="(addEquipment = false), addEquipmentBfirm()"
          >确 定</el-button
        >
      </span>
    </el-dialog> -->

    <!-- SIM卡数据-->
    <el-dialog title="SIM卡" :visible.sync="simCodeVisible" width="30%">
      <div class="simCodeBox">
        <div>
          <span class="simCodeTitle">ICCID：</span>
          <div>{{ sim.iccid }}</div>
        </div>
        <div>
          <span class="simCodeTitle">状态：</span>
          <div v-if="code == 2">{{ sim.account_status }}</div>
          <div v-if="code == 1">{{ sim.deviceStatus }}</div>
        </div>
        <div>
          <span class="simCodeTitle">套餐：</span>
          <div>
            <el-progress :show-text="false" :percentage="100"></el-progress>
          </div>
          <span v-if="code == 2">{{ sim.data_plan }}MB</span>
          <span v-if="code == 1">{{ sim.totalDataVolume }}</span>
        </div>
        <div>
          <span class="simCodeTitle">已用流量：</span>
          <div v-if="code == 2">
            <el-progress :show-text="false" :percentage="100"></el-progress>
          </div>
          <span v-if="code == 2">{{ sim.data_usage }}MB</span>
          <div v-if="code == 1">
            <el-progress
              :show-text="false"
              :percentage="sim.dataUsage"
            ></el-progress>
          </div>
          <span v-if="code == 1">{{ sim.dataUsage.toFixed(2) }}MB</span>
        </div>
        <div>
          <span class="simCodeTitle">到期时间：</span>
          <!-- <div>{{ (sim.expiry_date * 1000) | formatTime }}</div> -->
          <div v-if="code == 1">{{ sim.expireDate }}</div>
          <div v-if="code == 2">
            {{ (sim.expiry_date * 1000) | formatTime }}
          </div>
        </div>
        <div class="operateBtn">
          <el-button size="mini" @click="simCodeVisible = false"
            >关闭</el-button
          >
        </div>
      </div>
    </el-dialog>
    <el-dialog
      title="设备控制"
      :visible.sync="jkcondialogVisible"
      width="600px"
      :close-on-click-modal="false"
    >
      <div class="jkconbox">
        <el-form
          :model="jkconinfo"
          :rules="rules"
          ref="ruleForm"
          label-width="120px"
          class="demo-ruleForm"
        >
          <el-form-item label="设备名称" prop="name">
            <el-input v-model="jkconinfo.name" size="mini" :maxlength="10"></el-input>
          </el-form-item>
          <el-form-item label="设备状态" prop="onoff">
            <el-radio-group v-model="jkconinfo.onoff">
              <el-radio label="on">开</el-radio>
              <el-radio label="off">关</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="开始结束时间" v-show="jkconinfo.onoff == 'on'">
            <el-col :span="11">
              <el-form-item prop="statetime">
                <el-time-select
                  v-model="jkconinfo.statetime"
                  size="mini"
                  :picker-options="{
                    start: '00:00',
                    step: '01:00',
                    end: '23:00',
                  }"
                  placeholder="选择时间"
                >
                </el-time-select>
              </el-form-item>
            </el-col>
            <el-col class="line" :span="2">-</el-col>
            <el-col :span="11">
              <el-form-item prop="endtime">
                <el-time-select
                  size="mini"
                  v-model="jkconinfo.endtime"
                  :picker-options="{
                    start: '00:00',
                    step: '01:00',
                    end: '23:00',
                  }"
                  placeholder="选择时间"
                >
                </el-time-select>
              </el-form-item>
            </el-col>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="jkcondialogVisible = false" size="mini"
          >取 消</el-button
        >
        <el-button size="mini" type="primary" @click="jkprimary"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      currPage: 1, //当前分页
      totalPage: 0, //总分页
      id: "", //右侧菜单选中的设备ID
      activeIndex: 0, //控制设备列表选中状态
      jktype: "", //为1有回放，否则无回放
      divNum: 1, //默认分屏数量
      hlsHdSrc: "",
      rtmpHdSrc: "",
      takePhotoDialogVisible: false, //拍照弹框
      Idlist: [], //右侧设备列表
      divMainHeight: "", //视频盒子高度
      selected: 1, //默认选中第一个视频窗口
      playType: 0, //0:直播 ; 1：插件
      html: "", //插件播放内容
      picUrl: "", //视频拍照地址
      playBackDialogVisible: false,
      mapTojkId: this.$route.query.id, //四情基地监控设备id
      mapTojktype: this.$route.query.jktype, //四情基地监控设备jktype
      myVideo: {},
      backForm: {
        time: "",
        start: "",
        end: "",
        aisle: 1,
      },
      backFormRules: {
        time: [
          { required: true, message: "请选择时间范围", trigger: "change" },
        ],
        aisle: [{ required: true, message: "请选择通道", trigger: "change" }],
      },
      accessToken: "",

      addEquipment: false, //测试添加设备
      equipmentID: "", //添加设备ID
      equipmentIDlist: [], //搜索Id集合
      equipmentOptions: [
        //设备id集合
      ],
      equipmentChannel: [
        {
          value: "0",
          label: "0",
        },
        {
          value: 1,
          label: 1,
        },
        {
          value: 2,
          label: 2,
        },
        {
          value: 3,
          label: 3,
        },
        {
          value: 4,
          label: 4,
        },
        {
          value: 5,
          label: 5,
        },
        {
          value: 6,
          label: 6,
        },
        {
          value: 7,
          label: 7,
        },
        {
          value: 8,
          label: 8,
        },
        {
          value: 9,
          label: 9,
        },
        {
          value: 10,
          label: 10,
        },
        {
          value: 11,
          label: 11,
        },
        {
          value: 12,
          label: 12,
        },
        {
          value: 13,
          label: 13,
        },
        {
          value: 14,
          label: 14,
        },
        {
          value: 15,
          label: 15,
        },
        {
          value: 16,
          label: 16,
        },
        {
          value: 17,
          label: 17,
        },
        {
          value: 18,
          label: 18,
        },
        {
          value: 19,
          label: 19,
        },
        {
          value: 20,
          label: 20,
        },
        {
          value: 21,
          label: 21,
        },
        {
          value: 22,
          label: 22,
        },
        {
          value: 23,
          label: 23,
        },
        {
          value: 24,
          label: 24,
        },
        {
          value: 25,
          label: 25,
        },
        {
          value: 26,
          label: 26,
        },
        {
          value: 27,
          label: 27,
        },
        {
          value: 28,
          label: 28,
        },
        {
          value: 29,
          label: 29,
        },
        {
          value: 30,
          label: 30,
        },
        {
          value: 31,
          label: 31,
        },
      ],
      equipmentNumber: "", // 设备通道
      playback: false, //是否添加回放功能

      // 搜索
      restaurants: [],
      state: "",
      timeout: null,
      idName: "",
      addEquipmentA: false, // 绑定SIM卡弹框
      addEquipmentB: false, // 查询SIM卡弹框
      equipmentICCID: "", // 查询SIM input
      // sim卡
      sim: {
        iccid: "",
        account_status: 0, //卡状态 0-7 未知 测试期 沉默期 使用中 停机 停机保号 预销号 销号
        data_plan: 0, //套餐大小
        data_usage: 0, //当月用量
        data_balance: 0, //剩余流量
        expiry_date: 0, //到期日期
      },
      simCodeVisible: false,
      input3: "",
      value3: [],
      code: 0, //设备型号，
      query: [],
      simloading: false,
      equipmentValue: "", // iccid

      // 添加设备
      FluoriteClouduser: "", // 萤石云账号
      salesman: "", // 萤石云账号所相关的业务员名称
      tokenData: "", // token
      secretKey: "", // appkey
      furtiveData: "", // appSecret
      FluoriteClouduserID: "", // 萤石云账号ID
      stepIndex: 0, // 步骤下标
      tltArray: [
        {
          name: "添加账号",
        },
        {
          name: "添加监控设备",
        },
      ],
      userNameID: [
        // {
        //   value: 1,
        //   label: 1,
        // },
      ],
      bangDsimoptions: [], //绑定sim设备id集合
      bangDsimId: null, //当前设备ID
      VideoList: [], // 视频直播列表
      longtimetf: false,
      monthitortime: null,
      radio: "0",
      loading: false,
      jkcondialogVisible: false,
      jkconinfo: {
        name: "",
        onoff: "on",
        statetime: "",
        endtime: "",
        device_id: "",
      },
      rules: {
        name: [{ required: true, message: "请输入设备名称", trigger: "blur" }],
        onoff: [{ required: true, message: "请选择设备状态", trigger: "blur" }],
      },
    };
  },
  filters: {
    formatName: function (value) {
      if (!value) return "";
      if (value.device_name) {
        if (value.device_name.length > 20) {
          value.device_name.slice(0, 20) + "...";
        }
      }
      if (value.device_id.length > 30) {
        value.device_id.slice(0, 30) + "...";
      }
      // var item =
      //   (value.device_name !== ""
      //     ? value.device_name
      //     : "暂无设备名称") + "/" + value.device_id;
      var item = "";
      if (value.device_name != "") {
        item = value.device_name;
      } else {
        item = value.device_id;
      }
      console.log(value.device_name + "/" + value.device_id);
      if (item.length > 20) {
        var name = item.slice(0, 20) + "...";
      } else {
        var name = item;
      }
      return name;
    },
  },
  mounted() {
    if (this.$route.query.id !== undefined) {
      this.idName = this.$route.query.id;
    }
    this.getJkList();
    // this.restaurants = this.loadAll(); // 搜索数据
  },
  created() {},
  destroyed() {
    // this.player.dispose()
    for (var i = 0; i < this.VideoList.length; i++) {
      this.VideoList[i].stop();
    }
  },
  methods: {
    viewPhoto(id) {
      this.$router.push("/index/photoView/" + id);
    },
    //获取视频列表
    getJkList() {
      this.$axios({
        method: "POST",
        url: "/api/api_gateway?method=camera.camera_manage.list_camera",
        data: this.qs.stringify({
          page: this.currPage,
          page_size: 8,
          device_id: this.idName,
        }),
      }).then((res) => {
        if (res.data.message == "") {
          if (res.data.data.data.length) {
            this.Idlist = res.data.data.data;
            this.accessToken = res.data.data.accessToken;
            this.totalPage = Math.ceil(res.data.data.counts / 8);
            if (this.mapTojkId && this.mapTojktype) {
              //基地展示跳转过来
              this.selectEquip(this.mapTojkId, this.mapTojktype, 99999);
            } else {
              this.selectEquip(
                this.Idlist[0].device_id,
                this.Idlist[0].jktype,
                0
              );
            }
          }
        }
        console.log(this.Idlist);
        for (var i = 0; i < this.Idlist.length; i++) {
          var obj = {
            value: i,
            label: this.Idlist[i].device_id,
          };
          this.equipmentOptions.push(obj);
        }
        this.restaurants = this.loadAll(); // 搜索数据
      });
    },
    //视频分页
    splitPage(str) {
      if (str == "jian") {
        if (this.currPage > 1) {
          this.currPage--;
          this.getJkList();
        }
      } else {
        if (this.currPage < this.totalPage) {
          this.currPage++;
          this.getJkList();
        }
      }
    },
    //关闭方向
    stopConfigCamera() {
      this.$axios({
        method: "POST",
        url: "/api/api_gateway?method=camera.camera_manage.ctrl_camera",
        data: this.qs.stringify({
          device_id: this.id,
          ctrl: "stop",
        }),
      });
    },
    //上下左右
    configCamera(ctrl, movenum) {
      if (ctrl == "takephoto") {
        this.$axios({
          method: "POST",
          url: "/api/api_gateway?method=camera.camera_manage.camera_takephoto",
          data: this.qs.stringify({
            device_id: this.id,
          }),
        }).then((res) => {
          let data = JSON.parse(res.data.data);
          if (data.code == 200) {
            this.picUrl = data.data.picUrl;
            this.takePhotoDialogVisible = true;
          } else {
            if (document.getElementsByClassName("el-message").length == 0) {
              this.$message.error(data.msg);
            }
          }
        });
      } else {
        //上下左右、放大、缩小
        this.$axios({
          method: "POST",
          url: "/api/api_gateway?method=camera.camera_manage.ctrl_camera",
          data: this.qs.stringify({
            device_id: this.id,
            ctrl: ctrl,
            movenum: movenum,
          }),
        }).then((res) => {
          // if (res.data.message == '') {
          // 	this.$message.success('指令下发成功')
          // 	// this.stopConfigCamera() //关闭方向
          // }
        });
      }
    },
    // 拍照
    photograph() {
      this.$axios({
        method: "POST",
        url: "/api/api_gateway?method=camera.camera_manage.camera_takephoto",
        data: this.qs.stringify({
          device_id: this.id,
        }),
      })
        .then((res) => {
          if (res.data.message == "") {
            console.log(res.data);
            this.picUrl = res.data.data.addr;
            // this.takePhotoDialogVisible = true;
            if (document.getElementsByClassName("el-message").length == 0) {
              this.$message({
                message: "拍照成功",
                type: "success",
              });
            }
          } else {
            if (document.getElementsByClassName("el-message").length == 0) {
              this.$message({
                message: res.data.message,
                type: "warning",
                duration: 1500,
              });
            }
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //选中右侧菜单设备
    selectEquip(device_id, jktype, index) {
      this.jktype = jktype;
      this.activeIndex = index; //菜单选中状态
      this.id = device_id; //保存选中的设备id
      this.$axios({
        url: "/api/api_gateway?method=camera.camera_manage.addr_camera_list",
        method: "POST",
        data: this.qs.stringify({ device_id: device_id }),
      }).then((res) => {
        if (res.data.message == "") {
          var data = eval("(" + res.data.data + ")");
          let hlsHdSrc = data.hlsHd;
          let rtmpHdSrc = data.rtmpHd;
          if (this.playType == 1) {
            //插件
            this.html = `<video id="player" autoplay muted poster='' controls playsInline webkit-playsinline src="${rtmpHdSrc}" style="width:100%; height:100%;"></video>`;
            setTimeout(() => {
              this.myVideo["xPlayer"] = new EZUIKit.EZUIPlayer(player);
              this.myVideo["xPlayer"].play();
            }, 1000);
          } else if (this.playType == 0) {
            let playHtml = `<video id="myPlayer${this.selected}"  muted autoplay  poster='' controls playsInline  webkit-playsinline src="${hlsHdSrc}"  style="width:100%; height:100%;"></video>`;
            document.getElementById("my-video" + this.selected).innerHTML =
              playHtml;
            //非插件
            this.$nextTick(() => {
              console.log(data.hlsHd, "data.hlsHddata.hlsHd");
              this.myVideo[`myPlayer${this.selected}`] = new EZUIKit.EZUIPlayer(
                `myPlayer${this.selected}`
              );
              setTimeout(() => {
                this.myVideo[`myPlayer${this.selected}`].play();
              }, 150);
              this.VideoList.push(this.myVideo[`myPlayer${this.selected}`]);
              // this.player = videojs('my-video' + this.selected)
              // this.player.reset()
              // this.player.src({
              // 	src: this.hlsHdSrc,
              // 	type: 'application/x-mpegURL'
              // })
              // this.player.play()
              // this.player.load()
            });
          }
          this.guanbilong();
        }
      });
    },
    //点击分屏
    splitView(num) {
      for (let item in this.myVideo) {
        this.myVideo[item].stop();
      }
      this.divNum = num;
      this.selected = 1;
      this.selectEquip(this.id, this.jktype, this.activeIndex);
    },
    //点击视频
    selectVideo(i) {
      console.log(i);
      this.selected = i;
    },
    //播放模式切换，插件/视频直播
    checkPlayType(i) {
      this.playType = i;
      for (let item in this.myVideo) {
        this.myVideo[item].stop();
      }
      console.log(this.myVideo);
      this.selectEquip(this.id, this.jktype, this.activeIndex);
    },
    //复制拍照地址
    copyPicUrl() {
      document.getElementById("picUrl").select();
      if (document.getElementsByClassName("el-message").length == 0) {
        this.$message({
          showClose: true,
          message: "手动复制，在浏览器打开，另存为",
        });
      }
    },
    //添加设备
    addConfirm() {
      console.log(this.equipmentNumber);
      if (this.equipmentID == "") {
        if (document.getElementsByClassName("el-message").length == 0) {
          this.$message({
            message: "设备ID不能为空",
            type: "warning",
            duration: 1500,
          });
        }
      } else if (this.equipmentNumber == "") {
        if (document.getElementsByClassName("el-message").length == 0) {
          this.$message({
            message: "通道号不能为空",
            type: "warning",
            duration: 1500,
          });
        }
      } else if (this.FluoriteClouduserID == "") {
        if (document.getElementsByClassName("el-message").length == 0) {
          this.$message({
            message: "萤石云账号ID不能为空",
            type: "warning",
            duration: 1500,
          });
        }
      } else if (this.equipmentID !== "" && this.equipmentNumber !== "") {
        this.$axios({
          method: "POST",
          url: "/api/api_gateway?method=camera.camera_manage.add_camera",
          data: this.qs.stringify({
            device_id: this.equipmentID,
            camera_channel: this.equipmentNumber,
            camera_playback: this.playback == true ? 1 : 0,
            account_id: this.FluoriteClouduserID,
          }),
        }).then((res) => {
          if (res.data.message == "") {
            console.log(456);
            if (document.getElementsByClassName("el-message").length == 0) {
              this.$message({
                message: "添加成功",
                type: "success",
                duration: 1500,
              });
            }
            this.equipmentID = "";
            this.equipmentNumber = "";
            this.playback = false;
            this.addEquipment = false;
            this.getJkList();
          }
        });
      }
    },
    // addEquip() {
    //   this.$prompt("添加设备id", "提示", {
    //     confirmButtonText: "确定",
    //     cancelButtonText: "取消",
    //   })
    //     .then(({ value }) => {
    //       this.$axios({
    //         method: "POST",
    //         url: "/api/api_gateway?method=camera.camera_manage.add_camera",
    //         data: this.qs.stringify({ device_id: value }),
    //       }).then((res) => {
    //         if (res.data.message == "") {
    //           console.log(456);
    //           this.getJkList();
    //         }
    //       });
    //     })
    //     .catch(() => {
    //       this.$message({
    //         type: "info",
    //         message: "取消添加",
    //       });
    //     });
    // },
    addEquip() {
      this.addEquipment = true;
    },
    handleClose() {
      this.addEquipment = false;
    },
    // 确定添加
    addConfirmSIM() {
      console.log(this.bangDsimId);
      console.log(this.bangDsimoptions);
      if (this.bangDsimId == null) {
        if (document.getElementsByClassName("el-message").length == 0) {
          this.$message({
            message: "设备ID不能为空",
            type: "warning",
            duration: 1500,
          });
        }
      } else if (this.equipmentValue == "") {
        if (document.getElementsByClassName("el-message").length == 0) {
          this.$message({
            message: "iccid不能为空",
            type: "warning",
            duration: 1500,
          });
        }
      } else if (this.bangDsimId !== "" && this.equipmentValue !== "") {
        this.$axios({
          method: "POST",
          url: "/api/api_gateway?method=camera.camera_manage.add_camera_sim",
          data: this.qs.stringify({
            device_id: this.equipmentOptions[this.bangDsimId].label, //设备id
            iccid: this.equipmentValue,
          }),
        })
          .then((res) => {
            console.log(res);
            if (res.data.data == true) {
              if (document.getElementsByClassName("el-message").length == 0) {
                this.$message({
                  type: "success",
                  message: "sim卡绑定成功",
                  duration: 1500,
                });
              }
              this.bangDsimId = "";
              this.equipmentValue = "";
              this.playback = false;
              this.addEquipmentA = false;
            } else {
              if (document.getElementsByClassName("el-message").length == 0) {
                this.$message({
                  type: "error",
                  message: res.data.message,
                  duration: 1500,
                });
              }
            }
          })
          .catch((err) => {
            console.log(err);
            if (document.getElementsByClassName("el-message").length == 0) {
              this.$message({
                type: "error",
                message: "sim卡绑定失败",
                duration: 1500,
              });
            }
          });
      }
      console.log(this.equipmentID + "设备ID");
      console.log(this.equipmentValue + "设备通道");
      console.log(this.playback + "是否支持回放功能");
    },
    // 取消添加
    addCancel() {
      this.equipmentID = "";
      this.equipmentValue = "";
      this.playback = false;
      if (document.getElementsByClassName("el-message").length == 0) {
        this.$message({
          type: "info",
          message: "取消添加",
        });
      }
      this.input3 = "";
    },

    // 测试添加设备

    //回放
    playBackSubmit() {
      this.$refs.backFormRef.validate((valid) => {
        if (!valid) {
          return false;
        }
        let start = new Date(this.backForm.time[0]);
        let end = new Date(this.backForm.time[1]);
        let beginVal = "";
        let endVal = "";
        function checked(num) {
          if (num < 10) {
            num = "0" + num;
          }
          return num;
        }
        beginVal =
          beginVal +
          start.getFullYear() +
          checked(start.getMonth() + 1) +
          checked(start.getDate()) +
          checked(start.getHours()) +
          checked(start.getMinutes()) +
          checked(start.getSeconds());
        endVal =
          endVal +
          end.getFullYear() +
          checked(end.getMonth() + 1) +
          checked(end.getDate()) +
          checked(end.getHours()) +
          checked(end.getMinutes()) +
          checked(end.getSeconds());

        if (!document.getElementById("playWind")) {
          document.getElementById("videoBack").innerHTML =
            '<div id="playWind"></div>';
        }
        let url = `ezopen://open.ys7.com/${this.id}/${this.backForm.aisle}.local.rec?begin=${beginVal}&end=${endVal}`;
        this.playback = new EZUIKit.EZUIPlayer({
          id: "playWind",
          autoplay: true,
          url: url,
          accessToken: this.accessToken,
          decoderPath: "static/js/",
          width: 560,
          height: 460,
        });
      });
    },
    palyBackClose() {
      this.$refs.backFormRef.resetFields();
      this.playback.stop();
      document.getElementById("videoBack").innerHTML = "";
    },

    // 搜索
    loadAll() {
      var list = this.Idlist;
      var arr = [];
      for (var i = 0; i < list.length; i++) {
        var obj = {};
        obj["value"] = list[i].device_id;
        obj["name"] =
          list[i].device_name == "" ? "暂无设备名称" : list[i].device_name;
        arr.push(obj);
      }
      return arr;
    },
    querySearchAsync(queryString, cb) {
      var restaurants = this.restaurants;
      var results = queryString
        ? restaurants.filter(this.createStateFilter(queryString))
        : restaurants;

      clearTimeout(this.timeout);
      this.timeout = setTimeout(() => {
        cb(results);
      }, 3000 * Math.random());
    },
    createStateFilter(queryString) {
      return (state) => {
        return (
          state.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0
        );
      };
    },
    // 搜索事件
    handleSelect(item) {
      this.idName = item.value;
      this.getJkList();
    },
    axiosList() {
      this.idName = this.state;
      this.getJkList();
    },

    // 绑定SIM
    bindingSIM() {
      this.addEquipmentA = true;
    },
    //sim卡id查询
    simsearch(query) {
      this.equipmentIDlist = [];
      console.log(query);
      if (query != "") {
        this.$axios({
          method: "POST",
          url: "/api/api_gateway?method=camera.camera_manage.list_camera",
          data: this.qs.stringify({
            device_id: query,
          }),
        }).then((res) => {
          // this.equipmentID = res.data.data.data
          var list = res.data.data.data;
          console.log(list);
          // this.equipmentValue = list[0].sim
          for (var i = 0; i < list.length; i++) {
            var obj = {
              label: list[i].device_id,
              value: i,
            };
            this.equipmentIDlist.push(obj);
          }
        });
      }
    },
    simsearchB(simid) {
      this.$axios({
        method: "POST",
        url: "/api/api_gateway?method=camera.camera_manage.list_camera",
        data: this.qs.stringify({
          device_id: simid,
        }),
      }).then((res) => {
        var list = res.data.data.data;
        console.log(list[0].sim);
        this.equipmentValue = list[0].sim;
      });
    },
    simidchangae(value) {
      //点击选择id
      console.log(value);
      this.equipmentID = this.equipmentIDlist[value].label;
      this.simsearchB(this.equipmentIDlist[value].label);
    },
    simidchangaeB(value) {
      // console.log(this.equipmentOptions[value].label); //equipmentOptions
      console.log(value, this.equipmentOptions);
      this.equipmentID = this.equipmentOptions[value].label;
      this.simsearchB(this.equipmentOptions[value].label);
    },
    // 查询SIM
    inquireSIM() {
      this.addEquipmentB = true;
    },
    // 确定
    addEquipmentBfirm() {
      if (this.equipmentValue == "") {
        if (document.getElementsByClassName("el-message").length == 0) {
          this.$message({
            type: "info",
            message: "请输入正确的iccid",
          });
        }
      } else {
        var postData = this.qs.stringify({
          iccid: this.equipmentValue,
        });
        this.simloading = true;
        this.$axios({
          method: "POST",
          url: "/api/api_gateway?method=forecast.send_control.sim_query",
          data: postData,
        })
          .then((res) => {
            this.simloading = false;
            console.log(res.data);
            this.code = res.data.data.code;
            console.log(this.code);
            if (res.data.data.code == 1) {
              // 合宙
              if (res.data.data.data.message == "OK") {
                this.sim = res.data.data.data.data;
                console.log(this.sim);
                var a;
                if (this.sim.deviceStatus == "TEST_READY_NAME") {
                  a = "可测试";
                } else if (this.sim.deviceStatus == "INVENTORY_NAME") {
                  a = "库存";
                } else if (this.sim.deviceStatus == "ACTIVATION_READY_NAME") {
                  a = "可激活";
                } else if (this.sim.deviceStatus == "ACTIVATED_NAME") {
                  a = "已激活";
                } else if (this.sim.deviceStatus == "DEACTIVATED_NAME") {
                  a = "已停卡";
                } else if (this.sim.deviceStatus == "RETIRED_NAME") {
                  a = "已销卡";
                } else if (this.sim.deviceStatus == "PURGED_NAME") {
                  a = "已清除";
                }
                this.sim.deviceStatus = a;
              } else {
                if (document.getElementsByClassName("el-message").length == 0) {
                  this.$message({
                    type: "info",
                    message: "查询失败",
                  });
                }
              }
              this.simCodeVisible = true;
            } else if (res.data.data.code == 2) {
              // 企鹏
              console.log(res.data.data.data);
              if (res.data.data.data.msg == "") {
                let cardInfo = res.data.data.data.data;
                if (cardInfo) {
                  // 卡状态
                  var a;
                  if (cardInfo.account_status == 0) {
                    a = "未知";
                  } else if (cardInfo.account_status == 1) {
                    a = "测试期";
                  } else if (cardInfo.account_status == 2) {
                    a = "沉默期";
                  } else if (cardInfo.account_status == 3) {
                    a = "使用中";
                  } else if (cardInfo.account_status == 4) {
                    a = "停机";
                  } else if (cardInfo.account_status == 5) {
                    a = "停机保号";
                  } else if (cardInfo.account_status == 6) {
                    a = "预销号";
                  } else if (cardInfo.account_status == 7) {
                    a = "销号";
                  }
                  // 套餐
                  // var b = data.iratePlanName;
                  // b = b.split("M/月");

                  this.sim = {
                    iccid: cardInfo.iccid,
                    account_status: a,
                    // data_plan: Number(b[0]), //套餐大小
                    data_plan: cardInfo.data_plan, //套餐大小
                    data_usage: cardInfo.data_usage, //当月用量
                    // data_balance: Number(b[0]) - data.dataUsage, //剩余流量
                    expiry_date: cardInfo.expiry_date, //到期日期
                  };
                  console.log(this.sim);
                } else {
                  if (
                    document.getElementsByClassName("el-message").length == 0
                  ) {
                    this.$message({
                      type: "info",
                      message: "查询失败",
                    });
                  }
                }
              } else {
                if (document.getElementsByClassName("el-message").length == 0) {
                  this.$message({
                    type: "info",
                    message: "查询失败",
                  });
                }
              }
              this.simCodeVisible = true;
            } else {
              if (document.getElementsByClassName("el-message").length == 0) {
                this.$message({
                  type: "info",
                  message: "暂无查询数据",
                });
              }
            }

            // if (res.data.message == "") {
            //   let data = eval("(" + res.data.data.data + ")");
            //   // let cardInfo = data.data.card_list[0]
            //   let cardInfo = data.data;
            //   this.sim = cardInfo;
            // }
          })
          .catch((err) => {
            console.log(err);
          });
      }
    },
    // 取消
    addEquipmentBCancel() {},

    // 添加设备-下一步
    next(index) {
      if (index == 1) {
        this.FluoriteClouduserUserID(); // 请求获取萤石云账号ID接口
      }
      this.stepIndex = index;
    },

    // 萤石云账号添加
    FluoriteClouduserAdd() {
      if (this.FluoriteClouduser == "") {
        if (document.getElementsByClassName("el-message").length == 0) {
          this.$message({
            message: "账号不能为空，请填写！",
            type: "warning",
            duration: 1500,
          });
        }
      } else if (this.salesman == "") {
        if (document.getElementsByClassName("el-message").length == 0) {
          this.$message({
            message: "业务员不能为空，请填写！",
            type: "warning",
            duration: 1500,
          });
        }
      } else if (this.tokenData == "") {
        if (document.getElementsByClassName("el-message").length == 0) {
          this.$message({
            message: "token不能为空，请填写！",
            type: "warning",
            duration: 1500,
          });
        }
      } else if (this.secretKey == "") {
        if (document.getElementsByClassName("el-message").length == 0) {
          this.$message({
            message: "appkey不能为空，请填写！",
            type: "warning",
            duration: 1500,
          });
        }
      } else if (this.furtiveData == "") {
        if (document.getElementsByClassName("el-message").length == 0) {
          this.$message({
            message: "appSecret不能为空，请填写！",
            type: "warning",
            duration: 1500,
          });
        }
      } else {
        var postData = this.qs.stringify({
          account: this.FluoriteClouduser, // 萤石云账号
          salesman: this.salesman, // 萤石云账号所相关的业务员名称
          app_token: this.tokenData, // 萤石云账号 token
          app_key: this.secretKey, // 萤石云账号 appkey
          app_secret: this.furtiveData, // 萤石云账号 appSecret
          account_type: "1",
        });
        this.$axios({
          method: "POST",
          url: "/api/api_gateway?method=camera.camera_manage.add_camera_account",
          data: postData,
        })
          .then((res) => {
            console.log(res);
            if (res.data.data == true) {
              if (document.getElementsByClassName("el-message").length == 0) {
                this.$message({
                  message: "添加萤石云账号成功！",
                  type: "success",
                  duration: 1500,
                });
              }
              this.addEquipment = false;
            } else {
              if (document.getElementsByClassName("el-message").length == 0) {
                this.$message({
                  message: "添加萤石云账号失败",
                  type: "warning",
                  duration: 1500,
                });
              }
            }
          })
          .catch((err) => {
            console.log(err);
            if (document.getElementsByClassName("el-message").length == 0) {
              this.$message({
                message: "添加萤石云账号失败",
                type: "warning",
                duration: 1500,
              });
            }
          });
      }
    },

    // 萤石云账号ID接口
    FluoriteClouduserUserID() {
      var postData = this.qs.stringify({
        account: "", // 按萤石云账号名字搜索
        salesman: "", // 按业务员名称搜索
      });
      this.$axios({
        method: "POST",
        url: "/api/api_gateway?method=camera.camera_manage.see_camera_account",
        data: postData,
      })
        .then((res) => {
          console.log(res.data.data);
          if (res.data.data.length !== 0) {
            var data = res.data.data;
            var arr = [];
            for (var i = 0; i < data.length; i++) {
              var obj = {};
              obj["value"] = data[i].id;
              obj["label"] = data[i].account;
              arr.push(obj);
            }
            this.userNameID = arr;
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    remoteMethod(e) {
      //sim卡绑定 设备id查询
      this.$axios({
        url: "/api/api_gateway?method=camera.camera_manage.list_camera",
        method: "POST",
        data: this.qs.stringify({ device_id: e }),
      }).then((res) => {
        console.log(res.data.data.data);
        this.bangDsimoptions = [];
        var datas = res.data.data.data;
        for (var i = 0; i < datas.length; i++) {
          this.bangDsimoptions.push({
            value: i,
            label: datas[i].device_id,
            iccid: datas[i].sim,
          });
        }
      });
    },
    bangDsimIdselect(e) {
      //SIM卡绑定 设备id切换
      this.equipmentValue = this.bangDsimoptions[e].iccid;
      if (this.bangDsimoptions[e].iccid == "") {
        if (document.getElementsByClassName("el-message").length == 0) {
          this.$message({
            message: "该设备尚未绑定sim卡！",
            type: "warning",
          });
        }
      }
    },
    guanbilong() {
      this.longtimetf = false;
      if (this.monthitortime) {
        clearTimeout(this.monthitortime);
      }
      this.monthitortime = setTimeout(() => {
        this.longtimetf = true;
      }, 1800000);
    },
    toplay(id) {
      this.$router.push("/index/playback?id=" + id);
    },
    setjk(data) {
      console.log(data);
      this.jkcondialogVisible = true;
      this.jkconinfo.name = data.device_name;
      this.jkconinfo.device_id = data.device_id;
      this.jkconinfo.onoff = data.off_on;
      this.jkconinfo.statetime = data.status_time;
      this.jkconinfo.endtime = data.end_time;
    },
    jkprimary() {
      this.$refs["ruleForm"].validate((valid) => {
        if (valid) {
          this.$axios({
            method: "POST",
            url: "/api/api_gateway?method=camera.camera_manage.camera_config",
            data: this.qs.stringify({
              device_id: this.jkconinfo.device_id,
              start_time: this.jkconinfo.statetime,
              end_time: this.jkconinfo.endtime,
              off_on: this.jkconinfo.onoff,
              device_name: this.jkconinfo.name,
            }),
          }).then((res) => {
            console.log(res);
            if (res.data.data) {
              if (document.getElementsByClassName("el-message").length == 0) {
                this.$message.success("指令下发成功");
              }
              this.jkcondialogVisible = false;
            } else {
              if (document.getElementsByClassName("el-message").length == 0) {
                this.$message.error(res.data.message);
              }
            }
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
  },
  watch: {
    // 添加设备弹框
    addEquipment(val) {
      if (val == false) {
        // 第二步
        this.equipmentID = ""; // 设备ID
        this.equipmentValue = ""; // iccid
        this.playback = false; // 回放
        this.equipmentNumber = ""; // 通道号
        this.FluoriteClouduserID = ""; //萤石云账号ID
        // 第一步
        this.FluoriteClouduser = ""; // 萤石云账号
        this.salesman = ""; // 萤石云账号所相关的业务员名称
        this.tokenData = ""; // token
        this.secretKey = ""; // appKey
        this.furtiveData = ""; // appSecret
        this.stepIndex = 0; // 步骤下标
      }
    },
  },
};
</script>

<style lang='less' scoped>
li {
  list-style-type: none;
}
.monitor-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  position: relative;
  /deep/.el-breadcrumb {
    margin-bottom: 30px;
  }
  .monitor_hint {
    position: fixed;
    top: 60px;
    left: 200px;
    height: 30px;
    line-height: 30px;
    color: #eb6767;
    width: 89%;
    background-color: #fff;
    padding: 0 20px;
    display: flex;
    box-sizing: border-box;
    justify-content: space-between;
    z-index: 1999999;
    .monitor_hint_text {
      height: 25px;
      display: flex;
      img {
        width: 20px;
        height: 20px;
        margin-right: 10px;
        margin-top: 5px;
      }
    }
    .el-icon-close {
      line-height: 30px;
    }
  }
  .monitor-wrap {
    display: flex;
    justify-content: space-between;
    background: #323a47;
    flex: 1;
    .video-box {
      // flex: 1;
      padding: 10px 10px 0 10px;
      width: 75%;
      .video-container {
        width: 100%;
        height: calc(100% - 47px);
        background: rgb(97, 93, 93);
        & > div {
          display: flex;
          flex-wrap: wrap;
          .videoItem {
            border: 1px solid #000;
            box-sizing: border-box;
          }
          .videoItem:hover {
            border-color: aquamarine;
          }
          .selected {
            border: 1px solid aquamarine;
          }
          .a1 {
            width: 100%;
            height: 100%;
          }
          .a4 {
            width: 50%;
            height: 50%;
          }
          .a9 {
            width: 33.3%;
            height: 33.3%;
          }
        }
      }
      .split-screen {
        display: flex;
        justify-content: flex-start;
        padding: 15px 0;
        .sp {
          width: 17px;
          height: 17px;
          display: inline-block;
          margin-right: 10px;
          cursor: pointer;
        }
        .sp01 {
          background: url(../../assets/images/forecasting/monitor/sp1.png);
        }
        .sp02 {
          background: url(../../assets/images/forecasting/monitor/sp2.png);
        }
        .sp03 {
          background: url(../../assets/images/forecasting/monitor/sp3.png);
        }
        .sp01:hover {
          background: url(../../assets/images/forecasting/monitor/sp1-active.png);
        }
        .sp02:hover {
          background: url(../../assets/images/forecasting/monitor/sp2-active.png);
        }
        .sp03:hover {
          background: url(../../assets/images/forecasting/monitor/sp3-active.png);
        }
      }
    }
    .nav-box {
      width: 24%;
      background: #474e60;
      color: #fff;
      font-size: 14px;
      .inputbox {
        width: 100%;
        height: 30px;
        margin: 5px 0px;
        padding: 10px;
        box-sizing: border-box;
        /deep/.el-autocomplete{
          width: 100%;
        }
      }
      .viewLists {
        height: 50%;
        overflow: auto;
        padding: 0;
        li {
          padding-left: 25px;
          padding-right: 25px;
          line-height: 40px;
          cursor: pointer;
          .viewPhoto {
            color: #4f71ff;
            float: right;
            font-size: 18px;
            cursor: pointer;
          }
          .dot {
            display: inline-block;
            width: 7px;
            height: 7px;
            border-radius: 100%;
            margin-right: 15px;
          }
          .onLine {
            background: #4f71ff;
          }
          .outLine {
            background: #c1c1c1;
          }
        }
        li.active {
          background: #37414d;
          color: #4f71ff;
        }
        li:hover {
          background: #37414d;
        }
      }
      .splitPage {
        height: 3%;
        margin-top: 2%;
        text-align: center;
        color: #4f71ff;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        .arrow {
          font-size: 20px;
          cursor: pointer;
        }
      }
      .direc {
        text-align: center;
        width: 100%;
        height: 180px;
        margin: 5% 0 5% 0;
        position: relative;
        background: url(../../assets/images/forecasting/monitor/direction-btn.png)
          no-repeat center;
        background-size: contain;
        & > div {
          position: absolute;
          width: 50px;
          height: 50px;
          cursor: pointer;
        }
        .upCtr {
          top: 10px;
          left: 50%;
          margin-left: -25px;
        }
        .downCtr {
          bottom: 10px;
          left: 50%;
          margin-left: -25px;
        }
        .leftCtr {
          top: 50%;
          left: 112px;
          margin-top: -25px;
        }
        .rightCtr {
          top: 50%;
          right: 118px;
          margin-top: -25px;
        }
        .cameraCtr {
          top: 0;
          bottom: 0;
          left: 0;
          right: 0;
          margin: auto;
        }
      }
      .btnBox {
        height: 15%;
        .zoom,
        .playBack,
        .playtype0,
        .playtype1,
        .addequip,
        .addequipA {
          width: 140px;
          height: 32px;
          margin: auto;
          margin-bottom: 10px;
          cursor: pointer;
        }
        .zoom {
          background: no-repeat center / 100%
            url(../../assets/images/forecasting/monitor/zoom-btn.png);
          display: flex;
          & > span {
            flex: 1;
            height: 32px;
          }
        }
        .playBack {
          background: url(../../assets/images/forecasting/monitor/playback-btn.png)
            no-repeat center;
        }
        .playtype0 {
          background: url(../../assets/images/forecasting/monitor/playtype0.png)
            no-repeat center;
          margin-bottom: 10px;
        }
        .playtype1 {
          background: url(../../assets/images/forecasting/monitor/playtype1.png)
            no-repeat center;
          margin-bottom: 10px;
        }
        .addequip {
          background: url(../../assets/images/forecasting/monitor/addequip.png)
            no-repeat center;
          margin-bottom: 10px;
        }
        .addequipA {
          background: url(../../assets/images/forecasting/monitor/1.png)
            no-repeat center;
          margin-bottom: 10px;
        }
        // .addequipB {
        //   height: 32px;
        //   width: 100px;
        //   background: url(../../../assets/images/forecasting/monitor/2.png)
        //     no-repeat center;
        //   margin-bottom: 10px;
        // }
      }
    }
  }
}

// SIM
.simCodeBox {
  > div {
    line-height: 40px;
    display: flex;
    align-content: center;
    .simCodeTitle {
      width: 100px;
      text-align: right;
      font-size: 14px;
      color: #333;
    }
    > div {
      flex: 1;
      .el-progress {
        margin-top: 17px;
      }
    }
    span {
      width: 85px;
      font-size: 12px;
      padding-left: 3px;
      color: #909090;
    }
    .el-input {
      width: 60%;
    }
  }
  .operateBtn {
    display: block;
    text-align: right;
  }
}
.siminput {
  position: relative;
  height: 36px;
  .simgather {
    position: absolute;
    top: 36px;
    width: 100%;
    height: 50px;
    background-color: #fff;
    z-index: 9999;
  }
}

.addClass {
  // background: rgb(122, 121, 121);
  background: #4f71ff;
  color: #fff;
}
/deep/.el-switch {
  .is-active {
    color: #4f71ff;
  }
}
.jkconbox {
  /deep/.el-input {
    width: 423px !important;
  }
  /deep/.el-date-editor {
    width: 180px !important;
  }
  /deep/.is-checked {
    .el-radio__inner {
      border-color: #4f71ff !important;
      background: #4f71ff !important;
    }
    .el-radio__label {
      color: #4f71ff !important;
    }
  }
}
</style>