<template>
  <div class="app-container">
    <div class="app-container-search main-bgcolor main-radius">
      <h1 class="">设备管理</h1>
      <br />
      <!-- 搜索工作栏 -->
      <SearchInfo
        ref="searchForm"
        :searchFormParam="{queryParams , dataSource}"
        :showSearch.sync="showSearch"
        @handleQuery="handleQuery"
        @resetQuery="resetQuery"
      ></SearchInfo>
    </div>

    <div class="app-container-list main-bgcolor main-radius shopping">
      <div class="shopping-top">
        <div class="shopping-title">设备列表</div>
        <el-button class="shopping-add-btn" type="primary" plain @click="handleAdd"
          v-hasPermi="['product:device-info:create']">添加</el-button>
      </div>

      <!-- 列表 -->
      <el-table v-loading="loading" :data="list">
        <el-table-column label="编号" align="center" type="index" width="80" >
          <template v-slot="{ $index }">
            <span>{{($index+1)+ (queryParams.pageNo-1)*queryParams.pageSize }}</span>
          </template>
        </el-table-column>
        <el-table-column label="设备名称" align="center" prop="deviceName" width="150" />
        <el-table-column label="网关类型" align="center" prop="gatewayType" width="150">
          <template v-slot="{ row }">
            <span>{{gatewayTypeOptions[row.gatewayType-1].label}}</span>
          </template>
        </el-table-column>
        <el-table-column label="设备类型" align="center" prop="deviceType" width="150" >
          <template v-slot="{ row }">
            <span>{{deviceTypeOptions[row.deviceType-1].label}}</span>
          </template>
        </el-table-column>
        <el-table-column label="商户名称" align="center" prop="belongBusinessName" width="150" />
        <el-table-column label="传感器对应环境类型" align="center" prop="envTypeName" width="150">
          <template v-slot="{row}">
            <span>{{row.envTypeName?row.envTypeName:'-'}}</span>
          </template>
        </el-table-column>
        <el-table-column label="控制器对应控制类型" align="center" prop="controllerTypeName" width="150">
          <template v-slot="{row}">
            <span>{{row.controllerTypeName?row.controllerTypeName:'-'}}</span>
          </template>
        </el-table-column>
        <el-table-column label="是否启用" width="100" align="center" prop="enabled" >
          <template v-slot="{ row }">
            <el-switch @change="changeEnabled(row.id,$event)" v-model="row.enabled"></el-switch>
          </template>
        </el-table-column>
        <el-table-column label="开关是否开启" width="100" align="center" prop="switchOn" >
          <template v-slot="{ row }">
            <el-switch v-if="row.deviceType === 1" @change="changeSwitchOn(row.id,$event)" v-model="row.switchOn"></el-switch>
          </template>
        </el-table-column>
        <el-table-column label="备注" align="center" prop="remarks" width="100"/>
        <el-table-column label="创建时间" align="center" prop="createTime" width="150">
          <template v-slot="{ row }">
            <span>{{parseTime(row.createTime)}}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" fixed="right" width="230" class-name="small-padding fixed-width">
          <template v-slot="scope">
            <el-button v-if="scope.row.deviceType == 2" size="mini" type="text" icon="el-icon-view" @click="openEnvDataDialog(scope.row)"
              v-hasPermi="['product:device-info:update']">环境数据</el-button>
            <el-button v-if="scope.row.deviceType == 3" size="mini" type="text" icon="el-icon-view" @click="openMonitorDialog(scope.row)"
              v-hasPermi="['product:device-info:update']">监控</el-button>
            <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
              v-hasPermi="['product:device-info:update']">修改</el-button>
            <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
              v-hasPermi="['product:device-info:delete']">删除</el-button>
          </template>
        </el-table-column>
        <div slot="empty">
            <EmptyTable />
        </div>
      </el-table>
      <!-- 分页组件 -->
      <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize"
                  @pagination="getList"/>
    </div>

    <!-- 对话框(添加 / 修改) -->
    <el-dialog :title="title" :visible.sync="open" width="900px" v-dialogDrag append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px" label-position="top">
        <el-row :gutter="50">
          <el-col :span="12">
            <el-form-item label="所属商户" prop="belongBusinessId">
              <el-select class="w100" :disabled="isDisable" ref="business" @change="changeBusiness" v-model="form.belongBusinessId" placeholder="请选择所属商户">
                <el-option
                v-for="(item,index) in businessNameList"
                :key="index"
                :label="item.label"
                :value="item.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="设备名称" prop="deviceName">
              <el-input class="w100" v-model="form.deviceName" placeholder="请输入设备名称" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="网关类型" prop="gatewayType">
              <el-select class="w100" v-model="form.gatewayType" placeholder="请选择网关类型">
                <el-option
                v-for="(item,index) in gatewayTypeOptions"
                :key="index"
                :label="item.label"
                :value="item.value"/>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="设备类型" prop="deviceType">
              <el-select class="w100" v-model="form.deviceType" @change="changeDeviceType" placeholder="请选择设备类型">
                <el-option
                v-for="(item,index) in deviceTypeOptions"
                :key="index"
                :label="item.label"
                :value="item.value"/>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="监控点名称" prop="monitorPoints" v-if="form.deviceType==3">
              <el-input class="w100" v-model="form.monitorPoints" placeholder="请输入监控点名称" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="监控点编码" prop="monitorCode" v-if="form.deviceType==3">
              <el-input class="w100" v-model="form.monitorCode" placeholder="请输入监控点编码" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <!-- <el-form-item label="控制器对应的控制类型" prop="controllerType" v-if="form.deviceType==1">
              <el-select class="w100" v-model="form.controllerType" placeholder="请选择控制器对应的控制类型">
                <el-option
                v-for="(item,index) in controllerList"
                :key="index"
                :label="item.controllerTypeName"
                :value="item.id"/>
              </el-select>
            </el-form-item> -->
            <el-form-item label="控制器字段" prop="controllerField" v-if="form.gatewayType==1 && form.deviceType == 1">
              <el-input class="w100" v-model="form.controllerField" placeholder="请输入设备名称" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="传感器对应的环境类型" prop="envType" v-if="form.deviceType==2">
              <el-select class="w100" v-model="form.envType" placeholder="请输入环境类型">
                <el-option
                v-for="(item,index) in envTypeList"
                :key="index"
                :label="item.envTypeName"
                :value="item.id"/>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="关闭指令" prop="closeInstruction" v-if="form.gatewayType == 2 && form.deviceType == 1">
              <el-input v-model="form.closeInstruction" placeholder="请输入关闭指令" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="开启指令" prop="openInstruction" v-if="form.gatewayType == 2 && form.deviceType == 1">
              <el-input v-model="form.openInstruction" placeholder="请输入开启指令" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="备注" prop="remarks">
              <el-input v-model="form.remarks" placeholder="请输入备注" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-table
      v-if="form.gatewayType == 2 && form.deviceType == 2"
      :data="form.slaveDevices">
        <el-table-column label="序号" align="center" width="60">
          <template slot-scope="{ $index }">
            {{ ($index+1) }}
          </template>
        </el-table-column>
        <el-table-column label="设备名称" align="center" prop="deviceName" >
          <template slot="header">
            <span style="color: red;">*</span>
            <span>设备名称</span>
          </template>
          <template v-slot="{ row }">
            <el-input placeholder="请输入设备名称" v-model="row.deviceName"></el-input>
          </template>
        </el-table-column>
        <el-table-column label="环境类型" align="center" prop="envType" >
          <template slot="header">
            <span style="color: red;">*</span>
            <span>环境类型</span>
          </template>
          <template v-slot="{ row }">
            <el-select class="w100" v-model="row.envType" placeholder="请先选择所属商户">
              <el-option
              v-for="(item,index) in envTypeList"
              :key="index"
              :label="item.envTypeName"
              :value="item.id"/>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="200">
          <template v-slot="{ $index }">
            <el-popconfirm title="确定删除吗？" @confirm="form.slaveDevices.splice($index,1)">
              <el-button slot="reference" type="text">删除</el-button>
            </el-popconfirm>
          </template>
        </el-table-column>
        <div slot="empty">
          <EmptyTable />
        </div>
      </el-table>
      <div class="setting-btn-area" v-if="form.gatewayType == 2 && form.deviceType == 2" @click="form.slaveDevices.push({})">
        <i style="font-size: 14px;" class="el-icon-plus"></i>
        <div class="buttonText">添加设备</div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 环境数据弹窗 -->
    <el-dialog title="环境数据" v-if="envDataVisible" :visible.sync="envDataVisible" width="900px" v-dialogDrag append-to-body>
      <div id="envDataECharts" style="width: 100%; height: 500px;">
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="closeEnvDataDialog">关 闭</el-button>
      </div>
    </el-dialog>

    <!-- 监控 -->
    <el-dialog title="监控" v-if="monitorVisible" :visible.sync="monitorVisible" width="900px" v-dialogDrag append-to-body>
      <Monitor :monitorUrl="monitorUrl" :playerId="playerId" @refresh="refreshPreviewUrl"/>
      <div slot="footer" class="dialog-footer">
        <el-button @click="closeMonitorDialog">关 闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import * as echarts from 'echarts';
import { getBusinessNameList } from '@/api/basic/businessInfo';
import { createDeviceInfo, updateDeviceInfo, deleteDeviceInfo, getDeviceInfo, getDeviceInfoPage, exportDeviceInfoExcel , changeEnabled , changeSwitch } from "@/api/iot/deviceInfo";
import { getAllEnvType } from '@/api/iot/envType';
import { getAVGEnvDatasByTypeIds } from '@/api/iot/envData';
import { getMonitorPreviewURL } from '@/api/iot/deviceInfo';
import SearchInfo from "@/components/Customer/SearchForm/index.vue"
import EmptyTable from '@/components/EmptyTable';
import Monitor from '@/components/Monitor';
const getXDayAgo = (dayNum) => {
  const dates = [];
  // 获取当前日期
  const now = new Date();
  // 循环获取最近 dayNum 天的日期
  for (let i = dayNum - 1; i >= 0; i--) {
    // 获取当前日期的时间戳
    const timestamp = now.getTime();

    // 计算 i 天前的时间戳
    const dayTimestamp = 24 * 60 * 60 * 1000; // 一天的毫秒数
    const iDayAgoTimestamp = timestamp - i * dayTimestamp;

    // 转换为日期对象
    const date = new Date(iDayAgoTimestamp);

    // 格式化日期为 "yyyy-MM-dd" 的字符串并存入数组
    const year = date.getFullYear();
    const month = ("0" + (date.getMonth() + 1)).slice(-2);
    const day = ("0" + date.getDate()).slice(-2);
    dates.push(year + "-" + month + "-" + day);
  }
  return dates;
}

export default {
  name: "DeviceInfo",
  components: {
    SearchInfo,
    EmptyTable,
    Monitor,
  },
  data() {
    return {
      // 遮罩层
      loading: true,
      // 导出遮罩层
      exportLoading: false,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 设备信息列表
      list: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNo: 1,
        pageSize: 10,
        deviceName: null,
        landId: null,
        gatewayType: null,
        deviceType: null,
        envType: null,
        controllerType: null,
        monitorPoints: null,
        monitorCode: null,
        enabled: null,
        switchOn: null,
        closeInstruction: null,
        openInstruction: null,
        remarks: null,
        belongBusinessId: null,
        belongBusinessName: null,
        createTime: [],
        landName: null,
      },
      // 搜索工作栏参数
      dataSource: [
        {
          key:'belongBusinessId',
          itemType:'select',
          label:'商户',
          placeholder:'请选择',
          options: [],
          isNet: true,
        },
        {
          key:'deviceName',
          itemType:'input',
          label:'设备名称',
          placeholder:'请输入',
          onEnterKeyUp:this.handleQuery
        },
        {
          key:'gatewayType',
          itemType:'select',
          label:'网关类型',
          placeholder:'请输入',
          options: [
            {
              label:'必联',
              value:'1',
            },
            {
              label:'有人',
              value:'2',
            },
          ],
        },
        {
          key:'deviceType',
          itemType:'select',
          label:'设备类型',
          placeholder:'请输入',
          options: [
            {
              label:'控制器',
              value:'1',
            },
            {
              label:'传感器',
              value:'2',
            },
            {
              label:'监控',
              value:'3',
            },
          ],
        },
      ],
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        deviceType: [{ required: true, message: "设备类型： 1：控制器  2：传感器  3：监控不能为空", trigger: "change" }],
        enabled: [{ required: true, message: "是否启用不能为空", trigger: "blur" }],
        switchOn: [{ required: true, message: "开关是否开启不能为空", trigger: "blur" }],
        belongBusinessId: [{ required: true, message: "所属商户id不能为空", trigger: "blur" }],
        belongBusinessName: [{ required: true, message: "所属商户名称不能为空", trigger: "blur" }],
        deviceName: [{ required: true, message: "设备名称不能为空", trigger: "blur" }],
        gatewayType: [{ required: true, message: "网关类型不能为空", trigger: "blur" }],
      },
      businessNameList:[],
      gatewayTypeOptions:[
        {
          label:'必联',
          value:'1',
        },
        {
          label:'有人',
          value:'2',
        },
      ],
      deviceTypeOptions:[
        {
          label:'控制器',
          value:'1',
        },
        {
          label:'传感器',
          value:'2',
        },
        {
          label:'监控',
          value:'3',
        },
      ],
      controllerList: [],
      envTypeList: [],
      isDisable: false,

      envDatasObj: {},
      // 显示环境数据
      envDataVisible: false,
      // 图表实例对象
      echartsInstance: null,
      // 图表配置信息
      eChartsOption: {
        title: {
          text: '环境数据信息',
        },
        tooltip: {
          trigger: 'axis',
          show: true
        },
        legend: {
          left: '25%',
          top: '1%',
          data: [],
        },
        // x轴
        xAxis: {
          type: 'category',
          data: getXDayAgo(7), // 每格的下标
        },
        // y轴
        yAxis: {},
        series: [
          {
            data: [],
            type: 'line',
            smooth: true
          }
        ]
      },

      // 显示监控
      monitorVisible: false,
      monitorUrl: '',
      currentMonitorCode: '',
    };
  },
  created() {
    this.getList();
    this.initDate();
  },
  methods: {
    // 初始化数据
    async initDate(){
      let res = await getBusinessNameList();
      res.data.map(item=>{
        item.label = item.businessName;
        item.value = item.id;
      });
      this.dataSource[0].options = res.data;
      this.businessNameList = res.data;

      const { data } = await getAllEnvType();
      if(data){
        this.envTypeList = data;
      }
    },

    /** 查询列表 */
    getList() {
      this.loading = true;
      // 执行查询
      getDeviceInfoPage(this.queryParams).then(response => {
        this.list = response.data.list;
        this.total = response.data.total;
        this.loading = false;
      });
    },
    /** 取消按钮 */
    cancel() {
      this.open = false;
      this.reset();
    },
    /** 表单重置 */
    reset() {
      this.form = {
        id: undefined,
        deviceName: undefined,
        landId: undefined,
        gatewayType: undefined,
        deviceType: undefined,
        envType: undefined,
        controllerType: undefined,
        monitorPoints: undefined,
        monitorCode: undefined,
        enabled: undefined,
        switchOn: undefined,
        closeInstruction: undefined,
        openInstruction: undefined,
        remarks: undefined,
        belongBusinessId: undefined,
        belongBusinessName: undefined,
        controllerField: undefined,
        slaveDevices: [],
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNo = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm","searchForm");
      this.handleQuery();
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "添加设备信息";
      this.isDisable = false;
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      const id = row.id;
      getDeviceInfo(id).then(res => {
        let data = JSON.parse(JSON.stringify(res.data));
        data.gatewayType = String(data.gatewayType);
        data.deviceType = String(data.deviceType);
        data.controllerType = Number(data.controllerType);
        data.envType = Number(data.envType);
        this.form = data;
        this.open = true;
        this.title = "修改设备信息";
        this.isDisable = true;
      });
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (!valid) {
          return;
        }
        if( this.form.deviceType == 3 && !this.form.monitorPoints ){
          this.$message.error("设备为监控时，监控点名称不能为空");
          return;
        }
        if( this.form.deviceType == 3 && !this.form.monitorCode ){
          this.$message.error("设备为监控时，监控编码不能为空");
          return;
        }
        if( this.form.deviceType == 1 && !this.form.controllerField ){
          this.$message.error("设备为控制器时，控制器字段不能为空");
          return;
        }
        if( this.form.deviceType == 2 && !this.form.envType ){
          this.$message.error("设备为传感器时，传感器对应的环境类型不能为空");
          return;
        }
        if( this.form.gatewayType == 2 && this.form.deviceType == 2 ){
          if( this.form.slaveDevices.length == 0 ){
            this.$message.error("传感器列表不能为空");
            return;
          }
          let isTip = false;
          this.form.slaveDevices.map(item=>{
            if(!item.deviceName || !item.envType) isTip = true;
          });
          if(isTip){
            this.$message.error("传感器列表的设备名称和环节类型不能为空");
            return;
          }
        }
        // 修改的提交
        if (this.form.id != null) {
          updateDeviceInfo(this.form).then(response => {
            this.$modal.msgSuccess("修改成功");
            this.open = false;
            this.getList();
          });
          return;
        }
        // 添加的提交
        createDeviceInfo(this.form).then(response => {
          this.$modal.msgSuccess("新增成功");
          this.open = false;
          this.getList();
        });
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const id = row.id;
      this.$modal.confirm('是否确认删除设备信息编号为"' + id + '"的数据项?').then(function() {
          return deleteDeviceInfo(id);
        }).then(() => {
          this.getList();
          this.$modal.msgSuccess("删除成功");
        }).catch(() => {});
    },
    /** 导出按钮操作 */
    handleExport() {
      // 处理查询参数
      let params = {...this.queryParams};
      params.pageNo = undefined;
      params.pageSize = undefined;
      this.$modal.confirm('是否确认导出所有设备信息数据项?').then(() => {
          this.exportLoading = true;
          return exportDeviceInfoExcel(params);
        }).then(response => {
          this.$download.excel(response, '设备信息.xls');
          this.exportLoading = false;
        }).catch(() => {});
    },
    changeBusiness(e){
      this.$nextTick(()=>{
        this.form.belongBusinessName = this.$refs.business.selected.label;
      });
    },
    changeLandInfo(e){
      this.$nextTick(async ()=>{
        this.form.landName = this.$refs.landInfo.selected.label;
      });
    },
    changeDeviceType(e){
      this.form.envType = "";
      this.form.controllerType = "";
      this.form.monitorPoints = "";
      this.form.monitorCode = '';
    },
    async changeEnabled(id,enabled){
      const loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });
      let res = await changeEnabled({id,enabled});
      if(res.data){
        this.$message.success("修改成功");
      }
      loading.close();
    },
    async changeSwitchOn(id,switchOn){
      const loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });
      let res = await changeSwitch({id,switchOn}).catch(() => {
        loading.close();
      });
      if(res.data){
        this.$message.success("修改成功");
      }
      loading.close();
    },

    async openEnvDataDialog(row) {
      // 获得设备信息
      const { data: { slaveDevices } } = await getDeviceInfo(row.id);
      // slaveDevices envType
      const typeIds = slaveDevices.map(device => device.envType);
      // 获取环境数据
      const params = {
        landId: row.landId,
        typeIds: typeIds.join(','),
      }
      const { data } = await getAVGEnvDatasByTypeIds(params);
      typeIds.map(id => {
        this.envDatasObj[id] = []; // 初始化所选的每种环境数据的数据值
      });
      data.map(item => {
        this.envDatasObj[item.envTypeId].push(item);
      });

      this.envDataVisible = true;
      this.rendECharts(typeIds);
    },

    // 渲染图表
    rendECharts(typeIds) {
      const seletedEnvTypes = this.envTypeList.filter(env => typeIds.indexOf(env.id) != -1);
      // 设置
      this.eChartsOption.legend.data = seletedEnvTypes.map(item => item.envTypeName);
      // 设置数值
      this.eChartsOption.series = seletedEnvTypes.map(item => {
        // 设置每种类型的数值
        const data = [];
        const { data: dateDatas } = this.eChartsOption.xAxis;
        const envDatasObj = this.envDatasObj[item.id];
        // 可能存在空值的情况
        if(envDatasObj) {
          dateDatas.map((date, index) => {
            envDatasObj.map(env => {
              const envDate = new Date(env.createTime);
              if(this.parseTime(envDate).substr(0, 10) == date) {
                data.push(env.value);
              }
            });
            if(data.length != index + 1) {
              data.push('0');// 如果取不到，这里直接补位
            }
          });
        } else {
          dateDatas.map(() => {
            data.push('0');
          });
        }
        return {
          name: item.envTypeName,
          data,
          type: 'line',
          smooth: true
        }
      });
      // 延时加载图表，避免dom未刷新获取不到
      setTimeout(() => {
        // 初始化图表
        const chartDom = document.getElementById('envDataECharts');
        this.echartsInstance = echarts.init(chartDom);
        this.echartsInstance.setOption(this.eChartsOption);
      }, 50);
    },

    closeEnvDataDialog() {
      this.echartsInstance?.dispose();// 销毁原来的实例
      this.echartsInstance = null;
      this.envDataVisible = false;
    },

    openMonitorDialog({ monitorCode }) {
      this.currentMonitorCode = monitorCode;
      // 生产type需改为wss
      getMonitorPreviewURL({ monitorCode, type: 'wss' }).then(({ data }) => {
        const { monitorCode, url } = data;
        this.monitorUrl = url;
        this.playerId = monitorCode;
        this.monitorVisible = true;
      });
    },

    closeMonitorDialog() {
      this.monitorVisible = false;
    },

    refreshPreviewUrl() {
      getMonitorPreviewURL({ monitorCode: this.currentMonitorCode, type: 'wss' }).then(({ data }) => {
        const { monitorCode, url } = data;
        this.monitorUrl = url;
        this.playerId = monitorCode;
      });
    },
  },
};
</script>
