<template>
  <div class="app-container video-camera">
    <el-form
      :model="queryParams"
      ref="queryForm"
      :inline="true"
      label-width="85px"
    >
      <el-form-item label="选择站点" prop="siteId">
        <select-input
          psize="mini"
          ref="querySelectInput"
          @EventResult="eventResult($event)"
        ></select-input>
      </el-form-item>
      <el-form-item label="摄像头名称" prop="videoName">
        <el-input
          v-model="queryParams.videoName"
          placeholder="请输入摄像头名称"
          clearable
          size="mini"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="摄像头通道" prop="devChannel">
        <el-input
          v-model="queryParams.devChannel"
          placeholder="请输入站点通道"
          clearable
          size="mini"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <!-- <el-form-item label="状态" prop="videoStatus">
        <el-select
          v-model="queryParams.videoStatus"
          placeholder="请选择站点状态"
          size="mini"
          clearable
        >
          <el-option
            v-for="dict in statusOptions"
            :key="dict.dictValue"
            :label="dict.dictLabel"
            :value="dict.dictValue"
          />
        </el-select>
      </el-form-item> -->

      <el-form-item>
        <el-button
          type="primary"
          icon="el-icon-search"
          size="mini"
          @click="handleQuery"
          >搜索</el-button
        >
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
          >重置</el-button
        >
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          v-hasPermi="['iot:info:add']"
          >新增</el-button
        >
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="danger"
          icon="el-icon-delete"
          size="mini"
          :disabled="multiple"
          @click="handleDelete"
          v-hasPermi="['iot:info:remove']"
          >删除</el-button
        >
      </el-col>
      <!-- <el-col :span="1.5">
        <el-button
          type="info"
          icon="el-icon-upload2"
          size="mini"
          @click="handleImport"
          v-hasPermi="['iot:info:edit']"
          >导入</el-button
        >
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="warning"
          icon="el-icon-download"
          size="mini"
          @click="handleExport"
          v-hasPermi="['iot:info:export']"
          >导出</el-button
        >
      </el-col> -->
    </el-row>

    <el-table
      v-loading="loading"
      :data="infoList"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column
        label="摄像头名称"
        align="left"
        width="200"
        prop="deviceName"
      />
      <el-table-column label="站点名称" align="left" width="210" prop="siteName" />

      <el-table-column label="站点通道" align="left" width="200" prop="devId" />
      <el-table-column
        label="摄像头通道"
        align="left"
        width="200"
        prop="devChannel"
      />
      <el-table-column
        label="摄像头地址"
        prop="videoAddress"
        align="left"
      >
        <template slot-scope="scope">
          <span class="lay-table-textarea">{{ scope.row.videoAddress || '--'}}</span>
        </template>
      </el-table-column>

      <!-- <el-table-column
        label="状态"
        align="center"
        width="100"
        prop="videoStatus"
      >
        <template slot-scope="scope">
          <el-tag :type="scope.row.videoStatus === '1' ? 'success' : 'info'">{{
            scope.row.videoStatus === "1" ? "在线" : "离线"
          }}</el-tag>
        </template>
      </el-table-column> -->

      <!-- <el-table-column
        label="是否录制"
        align="center"
        width="100"
        prop="videoReplay"
      >
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.videoReplay"
            @change="changeVideoReplay(scope.row.videoReplay, scope.row)"
            active-value="1"
            inactive-value="0"
          >
          </el-switch>
        </template>
      </el-table-column> -->

      <el-table-column
        label="操作"
        align="center"
        width="230"
        class-name="small-padding fixed-width"
      >
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
            v-hasPermi="['iot:info:edit']"
            >修改</el-button
          >
          <el-button
            size="mini"
            type="text"
            icon="el-icon-s-custom"
            @click="handleDistri(scope.row)"
            v-hasPermi="['iot:info:edit']"
            >修改标签</el-button
          >
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
            v-hasPermi="['iot:info:remove']"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 添加或修改监控详情对话框 -->
    <el-dialog
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      class="n-dialog"
      :title="title"
      :visible.sync="open"
      width="750px"
    >
      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="摄像头名称" prop="videoName">
              <el-input
                :disabled="tempType === 'distri'"
                v-model="form.videoName"
                type="text"
                maxlength="30"
                placeholder="请输入摄像头名称"
                suffix-icon="el-icon-arrow-down"
                @focus="openTableSelectDeviceDialog()"
              />
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="站点名称" prop="siteName">
              <el-input
                v-model="form.siteName"
                :disabled="tempType === 'distri'"
                placeholder="点击选择站点"
                suffix-icon="el-icon-arrow-down"
                @focus="openTableSelectDialog()"
              />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20" v-if="tempType !== 'distri'">
          <el-col :span="12">
            <el-form-item label="摄像头通道" prop="devChannel">
              <el-input
                v-model="form.devChannel"
                :disabled="true"
                placeholder="请输入摄像头通道"
              />
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="站点通道" prop="devId">
              <el-input
                v-model="form.devId"
                disabled
                placeholder="请输入站点通道"
              />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="接入方式" prop="joinType">
              <el-select
                :disabled="tempType === 'distri'"
                v-model="form.joinType"
                placeholder="请选择接入方式"
                style="width: 100%"
              >
                <el-option
                  v-for="(itemKey, itemVal) in joinTypeOpt"
                  :key="itemKey"
                  :label="itemKey"
                  :value="itemVal"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="排序" prop="sortNum">
              <el-input v-model="form.sortNum" placeholder="请输入排序" />
            </el-form-item>
          </el-col>
          <!-- <el-col :span="12">
            <el-form-item label="服务类型" prop="serverType">
              <el-select
                :disabled="tempType === 'distri'"
                v-model="form.serverType"
                placeholder="请选择服务类型"
                style="width: 100%"
              >
                <el-option
                  v-for="(itemKey, itemVal) in serverTypeOpt"
                  :key="itemKey"
                  :label="itemKey"
                  :value="itemVal"
                />
              </el-select>
            </el-form-item>
          </el-col> -->
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="标签" prop="remark">
              <el-input v-model="form.remark" placeholder="请输入标签" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="类型" prop="videoType">
              <el-select
                v-model="form.videoType"
                :disabled="tempType === 'distri'"
                placeholder="请选择类型"
                style="width: 100%"
              >
                <el-option
                  v-for="dict in typeOption"
                  :key="dict.dictValue"
                  :label="dict.dictLabel"
                  :value="dict.dictValue"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20" v-if="tempType !== 'distri'">
          <el-col :span="12">
            <el-form-item label="摄像头纬度" prop="videoLat">
              <el-input
                v-model="form.videoLat"
                disabled
                placeholder="请输入摄像头纬度"
              />
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="摄像头经度" prop="videoLng">
              <el-input
                v-model="form.videoLng"
                disabled
                placeholder="请输入摄像头经度"
              />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row v-if="tempType !== 'distri'">
          <el-col :span="24">
            <el-form-item label="摄像头地址" prop="videoAddress">
              <el-input
                v-model="form.videoAddress"
                @blur="mapAddressFromPoint"
                :disabled="tempType === 'distri'"
                placeholder="请输入站点地址"
              >
                <el-popover
                  slot="suffix"
                  placement="left-start"
                  title="地图选择坐标"
                  width="730"
                  trigger="manual"
                  v-model="visible"
                >
                  <i
                    slot="reference"
                    class="el-icon-map-location"
                    @click="mapClick"
                  ></i>
                  <!-- 地图模块选择和设置 -->
                  <slot>
                    <el-row>
                      <el-col :span="7">
                        <span>经度：{{ mapForm.lng }}</span>
                      </el-col>
                      <el-col :span="7">
                        <span>纬度：{{ mapForm.lat }}</span>
                      </el-col>
                      <el-col :span="10">
                        <span>地址：{{ mapForm.address }}</span>
                      </el-col>
                    </el-row>

                    <shop-location
                      v-if="visible === true"
                      style="height: 300px"
                      :mapCenter="mapCenter"
                      :draggable="true"
                      @mapEvent="mapEvent"
                      :zoom="zoom"
                    />

                    <div
                      style="
                        width: 100%;
                        height: 50px;
                        display: flex;
                        align-items: center;
                        justify-content: flex-end;
                        margin-top: 5px;
                      "
                    >
                      <el-button type="primary" @click="mapSureClick"
                        >确 定</el-button
                      >
                      <el-button @click="visible = false">取 消</el-button>
                    </div>
                  </slot>
                </el-popover>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <!-- <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="分配角色">
              <el-select
                style="width: 100%"
                v-model="roleIds"
                multiple
                placeholder="请选择"
              >
                <el-option
                  v-for="item in roleOptions"
                  :key="item.roleId"
                  :label="item.roleName"
                  :value="item.roleId"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row> -->

        <!-- <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="选择用户" prop="videoLat">
              <el-select
                v-model="form.tenantId"
                style="width: 100%"
                filterable
                placeholder="请选择"
              >
                <el-option
                  v-for="item in tenantList"
                  :key="item.tenantId"
                  :label="item.tenantName"
                  :value="item.tenantId"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row> -->
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" size="mini" @click="submitForm"
          >确 定</el-button
        >
        <el-button @click="cancel" size="mini">取 消</el-button>
      </div>
    </el-dialog>

    <el-dialog
      :title="selectDialogTitle"
      :visible.sync="selectTableShow"
      width="75%"
      top="10vh"
      class="select-table-dialog"
      :close-on-click-modal="false"
    >
      <select-table-wrap
        v-if="selectTableShow"
        :tableOption="tableSelectOption.tableOpt"
        :queryOption="tableSelectOption.queryOpt"
        :tableList="tableSelectOption.tableList"
        @parentGetList="childGetList($event)"
        :otherOption="tableSelectOption.otherOption"
        @returnEvent="returnEvent($event)"
      />

      <div slot="footer" class="dialog-footer">
        <el-button size="mini" type="primary" @click="resuleClick"
          >确 定</el-button
        >
        <el-button
          size="mini"
          @click="
            () => {
              selectTableShow = false;
            }
          "
          >取 消</el-button
        >
      </div>
    </el-dialog>

    <!-- 摄像头导入对话框 -->
    <el-dialog
      :title="upload.title"
      :visible.sync="upload.open"
      width="400px"
      :close-on-click-modal="false"
      append-to-body
    >
      <el-upload
        ref="upload"
        :limit="1"
        accept=".xlsx, .xls"
        :headers="upload.headers"
        :action="upload.url + '?updateSupport=' + upload.updateSupport"
        :disabled="upload.isUploading"
        :on-progress="handleFileUploadProgress"
        :on-success="handleFileSuccess"
        :auto-upload="false"
        drag
      >
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">
          将文件拖到此处，或
          <em>点击上传</em>
        </div>
        <div class="el-upload__tip" slot="tip">
          <el-checkbox
            v-model="upload.updateSupport"
          />是否更新已经存在的用户数据
          <el-link
            type="info"
            style="font-size: 12px; color: #1890ff"
            @click="importTemplate"
            >下载模板</el-link
          >
        </div>
        <div class="el-upload__tip" style="color: red" slot="tip">
          提示：仅允许导入“xls”或“xlsx”格式文件！
        </div>
      </el-upload>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitFileForm">确 定</el-button>
        <el-button @click="upload.open = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { listInfo, getInfo, delInfo, addInfo, updateInfo, unbindVideoDev } from "@/api/video/camera";
import { getUser } from "@/api/system/user";
import { listSite } from "@/api/iot/site";
import { initMap, gjzCode } from "@/utils/latlngFromAddress";
import { listTenant } from "@/api/system/tenant";

import SelectTableWrap from "@/components/SelectTable/index";
import ShopLocation from "@/components/Amap/components/shopLocation/index";
import SelectInput from "../profile/SelectInput/index";
import { getToken } from "@/utils/auth";
// import {
//   listDevice,
// } from "@/api/iot/device";

const joinTypeOpt = {
  CAMERA: "摄像头直连",
  NVR: "NVR连接",
};
const serverTypeOpt = {
  SRS: "SRS",
  QI_NIU: "七牛",
};

export default {
  name: "Info",
  components: {
    SelectTableWrap,
    ShopLocation,
    SelectInput,
  },
  data() {
    return {
      joinTypeOpt,
      serverTypeOpt,
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 总条数
      total: 0,
      // 监控详情表格数据
      infoList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      statusOptions: [
        {
          dictValue: "0",
          dictLabel: "离线",
        },
        {
          dictValue: "1",
          dictLabel: "在线",
        },
      ],
      upload: {
        // 是否显示弹出层（用户导入）
        open: false,
        // 弹出层标题（用户导入）
        title: "",
        // 是否禁用上传
        isUploading: false,
        // 是否更新已经存在的用户数据
        updateSupport: 0,
        // 设置上传的请求头部
        headers: {
          Authorization: "Bearer " + getToken(),
        },
        // 上传的地址
        url: process.env.VUE_APP_BASE_API + "/iot/info/importData",
      },
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        videoStatus: undefined,
        videoName: undefined,
        siteId: undefined,
        devId: undefined,
        createTime: undefined,
        updateTime: undefined,
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        devId: [
          { required: true, message: "站点通道不能为空", trigger: "blur" },
          {
            pattern: /^[0-9]{20}$/,
            message: "格式不正确; 纯数字 组合20个字符",
          },
        ],
        devChannel: [
          { required: true, message: "通道不能为空", trigger: "blur" },
          {
            pattern: /^[0-9]{20}$/,
            message: "格式不正确; 纯数字 组合20个字符",
          },
        ],
        videoName: [
          {
            required: true,
            message: "摄像头名称不能为空, 请选择",
            trigger: "blur",
          },
        ],
        siteName: [{ required: true, message: "站点不能为空, 请选择", trigger: "blur" }],
        videoProtocol: [{ required: true, message: "接入协议不能为空", trigger: "blur" }],
        videoLng: [{ required: true, message: "经度不能为空", trigger: "blur" }],
        videoLat: [{ required: true, message: "纬度不能为空", trigger: "blur" }],
        // serverType: [{ required: true, message: "服务类型不能为空", trigger: "blur" }],
        joinType: [{ required: true, message: "接入方式不能为空", trigger: "blur" }],
      },
      selectTableShow: false,
      tableSelectOption: {},
      selectResult: {},
      // 地图 弹窗
      visible: false,
      BMap: null,
      mapCenter: {
        lng: 119.459889,
        lat: 25.98974,
      },
      zoom: 15,
      mapForm: {},
      tenantList: [],
      tempType: "create",
      typeOption: [
        {
          dictLabel: "球机",
          dictValue: "BALL_MACHINE",
        },
        {
          dictLabel: "枪机",
          dictValue: "GUN_MACHINE",
        },
      ],
      // 角色列表
      roleOptions: [],
      roleIds: [],
      selectDialogTitle: ''
    };
  },
  created() {
    this.getList();
    this.getRole();
  },
  methods: {
    eventResult(...data) {
      this.queryParams.siteId = data[0].val;
      this.getList();
    },
    // 获取所有用户信息
    getTenantList() {
      this.tenantList = [];
      listTenant().then((response) => {
        this.tenantList = response.rows;
      });
    },
    // 地图方法
    handler({ BMap, map }) {
      //地图
      this.BMap = BMap;
      this.map = map;
      this.mapLoading = false;
      // this.getPointByIp()
    },
    mapEvent(data) {
      this.mapForm.lng = data.lng;
      this.mapForm.lat = data.lat;
      this.mapForm.address = data.address;
      console.log('map-event--', data)
      this.$forceUpdate();
    },
    // 使用地图方式定位
    mapClick() {
      if (this.form.videoLng && this.form.videoLat) {
        this.mapCenter.lng = this.form.videoLng;
        this.mapCenter.lat = this.form.videoLat;
        this.mapForm.lng = this.form.videoLng;
        this.mapForm.lat = this.form.videoLat;
        this.mapForm.address = this.form.videoAddress;
      } else {
        this.mapCenter = {
          lng: 119.459889,
          lat: 25.98974,
        };
        this.mapForm.lng = 119.459889;
        this.mapForm.lat = 25.98974;
        this.mapForm.address = "";
      }
      this.visible = !this.visible;
    },
    // 地图显示窗口 确认
    mapSureClick() {
      // 确认的时候将值赋值给form表单并且关闭地图
      this.form.videoAddress = this.mapForm.address
        ? this.mapForm.address
        : this.form.videoAddress;
      this.form.videoLng = this.mapForm.lng;
      this.form.videoLat = this.mapForm.lat;
      this.visible = false;
    },
    // 地图地址选择
    mapAddressFromPoint() {
      if (this.form.videoAddress) {
        // geoCode(this.form.videoAddress, this, { form: 'form', lat: 'shopLat', lng: 'shopLng' })
        gjzCode(this.form.videoAddress, this, {
          form: "form",
          lat: "shopLat",
          lng: "shopLng",
        });
      }
    },
    /**
     * 选择摄像头设备
     */
    openTableSelectDeviceDialog() {
      this.selectResult = {};
      this.selectDialogTitle = '选择设备'
      this.tableSelectOption = {
        otherOption: {
          tableType: "device",
        },
        queryOpt: {
          disable: false,
          labelWidth: "68px",
          params: {
            deviceName: "",
            deviceType: "VIDEO_MONITOR",
          },
          page: {
            pageSize: 10,
            pageNum: 1,
            total: 0,
          },
          inline: true,
          queryChilds: [
            {
              style: "",
              placeholder: "设备名称",
              clearable: true,
              label: "设备名称",
              type: "input",
              key: "deviceName",
              size: "small",
              value: "",
            },
          ],
        },
        tableOpt: {
          loading: false,
          rowKey: "recordId",
          selection: false,
          maxHeight: "45vh",
          childs: [
            {
              style: "",
              label: "设备名称",
              type: "",
              prop: "deviceName",
              align: "center",
              width: "200",
              "show-overflow-tooltip": false,
              tempType: "span",
            },
            {
              style: "",
              label: "站点通道",
              type: "",
              prop: "deviceId",
              align: "center",
              width: "",
              "show-overflow-tooltip": false,
              tempType: "tagStatus",
            },
            {
              style: "",
              label: "设备Key",
              type: "",
              prop: "deviceKey",
              align: "left",
              width: "200",
              "show-overflow-tooltip": false,
              tempType: "span",
            },
            {
              style: "",
              label: "设备类型",
              type: "",
              prop: "deviceTypeName",
              align: "left",
              width: "120",
              "show-overflow-tooltip": false,
              tempType: "span",
            },
            {
              style: "",
              label: "创建时间",
              type: "",
              prop: "createTime",
              align: "center",
              width: "",
              "show-overflow-tooltip": false,
              tempType: "span",
            },
          ],
          tableList: {
            type: Array,
          },
        },
        tableList: [],
      };
      this.selectTableShow = true;
    },
    // 开启 筛选表格
    openTableSelectDialog() {
      this.selectResult = {};
      this.selectDialogTitle = '选择站点'
      this.tableSelectOption = {
        otherOption: {
          tableType: "site",
        },
        queryOpt: {
          disable: false,
          labelWidth: "68px",
          params: {
            siteName: "",
            siteStatus: "0",
          },
          page: {
            pageSize: 10,
            pageNum: 1,
            total: 0,
          },
          inline: true,
          queryChilds: [
            {
              style: "",
              placeholder: "站点名称",
              clearable: true,
              label: "站点名称",
              type: "input",
              key: "siteName",
              size: "small",
              value: "",
            },
          ],
        },
        tableOpt: {
          loading: false,
          rowKey: "recordId",
          selection: false,
          maxHeight: "45vh",
          childs: [
            {
              style: "",
              label: "站点名称",
              type: "",
              prop: "siteName",
              align: "left",
              width: "",
              "show-overflow-tooltip": false,
              tempType: "span",
            },
            {
              style: "",
              label: "项目名称",
              type: "",
              prop: "projectName",
              align: "left",
              width: "",
              "show-overflow-tooltip": false,
              tempType: "span",
            },
            {
              style: "",
              label: "状态",
              type: "",
              prop: "siteStatus",
              align: "center",
              width: "",
              "show-overflow-tooltip": false,
              tempType: "tagStatus",
            },
            {
              style: "",
              label: "创建时间",
              type: "",
              prop: "createTime",
              align: "center",
              width: "",
              "show-overflow-tooltip": false,
              tempType: "span",
            },
          ],
          tableList: {
            type: Array,
          },
        },
        tableList: [],
      };
      this.selectTableShow = true;
    },
    // 查询回调
    childGetList(data) {
      if (data.otherOption.tableType === "site") {
        this.getSiteChildList(data);
      } else if (data.otherOption.tableType === "device") {
        this.getDeviceChildList(data);
      }
    },
    // 查詢 设备列表 接口
    getDeviceChildList(data) {
      unbindVideoDev(Object.assign(JSON.parse(JSON.stringify(data.page)), JSON.parse(JSON.stringify(data.param)))).then(res => {
        this.tableSelectOption.tableList = res.rows;
        this.tableSelectOption.queryOpt.page.total = Number(res.total);
      })
    },
    // 查询站点列表接口
    getSiteChildList(data) {
      listSite(data.page, data.param).then((response) => {
        this.tableSelectOption.tableList = response.rows;
        this.tableSelectOption.queryOpt.page.total = Number(response.total);
      });
    },
    // 点击或者双击数据回调
    returnEvent(data) {
      this.selectResult = {};
      if (data.type === "dblclick") {
        if (data.otherOption.tableType === "site") {
          this.form.siteId = data.value.recordId;
          this.form.devId = data.value.devId;
          this.form.videoLng = data.value.siteLng;
          this.form.videoLat = data.value.siteLat;
          this.form.videoAddress = data.value.siteAddress;
          this.form.siteName = data.value.siteName;
        } else if (data.otherOption.tableType === "device") {
          this.form.videoName = data.value.deviceName;
          this.form.devChannel = data.value.deviceKey;
          // this.form.device = data.value.deviceKey;
        }
        this.selectTableShow = false;
      } else if (data.type === "click") {
        if (data.otherOption.tableType === "site") {
          this.selectResult = {
            siteId: data.value.recordId,
            devId: data.value.devId,
            videoLng: data.value.videoLng,
            videoLat: data.value.videoLat,
            videoAddress: data.value.siteAddress,
            siteName: data.value.siteName,
          };
        } else if (data.otherOption.tableType === "device") {
          this.selectResult = {
            videoName: data.value.deviceName,
            devChannel:  data.value.deviceKey,
          }
        }
        this.selectResult.tableType = data.otherOption.tableType;
      }
    },
    // 点击确定按钮
    resuleClick() {
      if (this.selectResult.tableType === "site") {
        this.form.siteId = this.selectResult.siteId;
        this.form.devId = this.selectResult.devId;
        this.form.videoLng = this.selectResult.videoLng;
        this.form.videoLat = this.selectResult.videoLat;
        this.form.videoAddress = this.selectResult.videoAddress;
        this.form.siteName = this.selectResult.siteName;
      } else if (this.selectResult.tableType === "device") {
        this.form.videoName = this.selectResult.videoName;
        this.form.devChannel = this.selectResult.deviceKey;
      }
      this.selectTableShow = false;
    },
    /** 查询监控详情列表 */
    getList() {
      this.loading = true;
      if (this.queryParams.videoStatus === "") {
        this.queryParams.videoStatus = null;
      }
      listInfo(this.queryParams).then((response) => {
        this.infoList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        videoId: undefined,
        videoName: undefined,
        siteId: undefined,
        devId: undefined,
        videoCode: undefined,
        videoAddress: undefined,
        videoLat: undefined,
        videoLng: undefined,
        remark: undefined,
        siteName: "",
        videoType: "BALL_MACHINE",
        videoRole: "",
        // serverType: "SRS",
        joinType: "CAMERA",
      };
      this.roleIds = [];
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      if(this.$refs.querySelectInput) {
        this.$refs.querySelectInput.close();
      }
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map((item) => item.recordId);
      this.single = selection.length != 1;
      this.multiple = !selection.length;
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      // this.getTenantList();
      this.open = true;
      this.tempType = "create";
      this.title = "添加监控设备";
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.tempType = "update";
      this.reset();
      // this.getTenantList();
      const recordId = row.recordId || this.ids;
      getInfo(recordId).then((response) => {
        this.form = response.data;
        if (this.form.videoRole) {
          let list = this.form.videoRole.split(",");
          for (let i = 0; i < list.length; i++) {
            list[i] = Number(list[i]);
          }
          this.roleIds = list;
          console.log(this.form, "form");
        }
        this.open = true;
        this.title = "修改监控设备";
      });
    },
    // 分配用户
    handleDistri(row) {
      this.tempType = "distri";
      this.reset();
      // this.getTenantList();
      const recordId = row.recordId
      getInfo(recordId).then((response) => {
        this.form = response.data;
        this.open = true;
        this.title = "修改标签";
      });
    },
    /** 提交按钮 */
    submitForm: function () {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          this.form.videoRole = this.roleIds.join(",");
          if (this.form.recordId != undefined) {
            updateInfo(this.form).then((response) => {
              if (response.code === 200) {
                this.msgSuccess("修改成功");
                this.open = false;
                this.getList();
              }
            });
          } else {
            addInfo(this.form).then((response) => {
              if (response.code === 200) {
                this.msgSuccess("新增成功");
                this.open = false;
                this.getList();
              }
            });
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const recordIds = row.recordId || this.ids;
      this.$confirm(
        // '是否确认删除监控详情编号为"' + videoIds + '"的数据项?',
        "是否删除该选项",
        "警告",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(function () {
          return delInfo(recordIds);
        })
        .then(() => {
          this.getList();
          this.msgSuccess("删除成功");
        })
        .catch(function () {});
    },
    /** 上传摄像头数据 */
    handleImport() {
      this.upload.title = "摄像头导入";
      this.upload.open = true;
    },

    // 文件上传中处理
    handleFileUploadProgress(event, file, fileList) {
      this.upload.isUploading = true;
    },
    // 文件上传成功处理
    handleFileSuccess(response, file, fileList) {
      this.upload.open = false;
      this.upload.isUploading = false;
      this.$refs.upload.clearFiles();
      this.$alert(response.msg, "导入结果", {
        dangerouslyUseHTMLString: true,
      });
      this.getList();
    },
    // 提交上传文件
    submitFileForm() {
      this.$refs.upload.submit();
    },
    /** 下载魔板的操作 */
    importTemplate() {
      this.download("iot/info/importTemplate", {}, `video_info_template.xlsx`);
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download(
        "iot/info/export",
        {
          ...this.queryParams,
        },
        `iot_info.xlsx`
      );
    },
    // 切换录制功能
    changeVideoReplay(videoReplay, row) {
      let { videoId } = row;
      let params = {
        videoId,
        videoReplay,
      };
      updateInfo(params).then((response) => {
        if (response.code === 200) {
          this.msgSuccess("修改成功");
          this.getList();
        }
      });
    },
    /** 查询角色 */
    getRole() {
      getUser().then((res) => {
        this.roleOptions = res.roles;
        this.roleOptions.splice(0, 1);
      });
    },
  },
};
</script>
<style lang="scss">
.video-camera {
  .n-dialog {
    .el-dialog__body {
      padding: 20px;
      padding-bottom: 0px;
    }
    .el-dialog__header {
      border-bottom: 1px solid #747373;
    }
    .el-dialog__footer {
      border-top: 1px solid #747373;
    }
  }
  .list-row {
    .notice-item {
      display: inline-block;
      width: 6px;
      height: 6px;
      border-radius: 6px;
    }
    .on {
      background: rgb(77, 189, 218);
    }
    .online {
      background: rgb(99, 194, 112);
    }
    .outline {
      background: #e55130;
    }
    .undeloda {
      background: #d3d5d5;
    }
    .notice-text {
      margin-left: 6px;
      margin-right: 8px;
    }
  }
}
</style>
