<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col :span="4">
        <div class="qurey">
          <el-input
            :placeholder="
              $t('share.PleaseEnter') +
              $t('site_management.PleaseEnterTheContent')
            "
            v-model="input3"
            class="input-with-select"
          >
            <el-button
              slot="append"
              icon="el-icon-search"
              type="primary"
            ></el-button>
          </el-input>
        </div>
        <el-tree
          :data="treeData"
          :props="defaultProps"
          @node-click="handleNodeClick"
        ></el-tree>
      </el-col>
      <el-col :span="14">
        <el-alert
          title="提示"
          type="info"
          :description="$t('site_management.promptMsg') + ';'"
          show-icon
        >
        </el-alert>
        <div class="tableOperate">
          <div class="btnBox">
            <el-button type="primary" @click="add" :disabled="deviceIdShow">{{
              $t("share.addTo")
            }}</el-button>
            <el-button type="danger">{{ $t("share.delete") }}</el-button>
            <el-button @click="upDataBtn">{{
              $t("site_management.RobotPointUpload")
            }}</el-button>
          </div>
          <div class="tableSearch">
            <el-input
              :placeholder="
                $t('share.PleaseEnter') +
                $t('site_management.PleaseEnterTheContent')
              "
              v-model="input3"
              class="input-with-select"
            >
              <el-button
                slot="append"
                icon="el-icon-search"
                type="primary"
              ></el-button>
            </el-input>
          </div>
        </div>
        <el-table
          :data="tableData"
          @row-click="changeCurrentRow"
          highlight-current-row
        >
          <el-table-column type="selection" width="55" fixed="left">
          </el-table-column>
          <el-table-column
            :label="$t('site_management.MonitoringPointLocation')"
            width="200"
            fixed="left"
            align="center"
            :render-header="addRedStar"
            prop="patrolpointName"
          >
            <template slot-scope="scope">
              <el-input
                v-model="scope.row.patrolpointName"
                :placeholder="
                  $t('share.PleaseEnter') + $t('site_management.PointName')
                "
                disabled
              ></el-input>
            </template>
          </el-table-column>

          <el-table-column
            :label="$t('site_management.MonitoringContent')"
            width="150"
            align="center"
            prop="patrolContent"
          >
          </el-table-column>
          <el-table-column
            :label="$t('site_management.purpose')"
            prop="purpose"
          >
          </el-table-column>
          <el-table-column
            :label="$t('site_management.MonitoringNumber')"
            width="200"
            align="center"
            :render-header="addRedStar"
            prop="patrolpointCode"
          >
            <template slot-scope="scope">
              <el-input
                v-model="scope.row.patrolpointCode"
                disabled
                :placeholder="
                  $t('share.PleaseEnter') +
                  $t('site_management.MonitoringPointNumber')
                "
              ></el-input>
            </template>
          </el-table-column>

          <el-table-column
            :label="$t('site_management.InspectionType')"
            width="150"
            align="center"
            :render-header="addRedStar"
          >
            <template slot-scope="scope">
              {{ patrolTypeNameFn(scope.row.patrolTypeIds) }}
              <el-select
                multiple
                v-model="scope.row.patrolTypeIds"
                :placeholder="
                  $t('share.PleaseChoose') +
                  $t('site_management.InspectionType')
                "
              >
                <el-option
                  v-for="item in InspectionTypeData"
                  :key="item.patrolTypeId"
                  :label="item.patrolTypeName"
                  :value="item.patrolTypeId"
                >
                </el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column
            :label="$t('site_management.ImportantLevel')"
            width="150"
            align="center"
            :render-header="addRedStar"
          >
            <template slot-scope="scope">
              <el-select
                :placeholder="
                  $t('share.PleaseChoose') +
                  $t('site_management.ImportantLevel')
                "
                v-model="scope.row.pointImptLevel"
                disabled
              >
                <el-option
                  v-for="item in pointImptLevelData"
                  :key="item.dictValue"
                  :label="item.dictLabel"
                  :value="item.dictValue"
                >
                </el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column
            :label="$t('site_management.3DCoordinates')"
            width="270"
            align="center"
          >
            <template slot-scope="scope">
              <div class="tableXYZ">
                <el-input
                  placeholder="x(-20,20)"
                  v-model="scope.row.positionX"
                  disabled
                ></el-input>
                <el-input
                  placeholder="y(66)"
                  v-model="scope.row.positionY"
                  disabled
                ></el-input>
                <el-input
                  placeholder="z(-6,20)"
                  v-model="scope.row.positionZ"
                  disabled
                ></el-input>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            :label="$t('site_management.ReportIdentificationType')"
            width="220"
            align="center"
          >
          </el-table-column>
          <el-table-column
            :label="$t('site_management.IntelligentRecognitionType')"
            width="220"
            align="center"
          >
            <template slot-scope="scope">
              <span
                v-if="scope.row.algSubtypeName == null"
                class="intelligenceType"
                >设置</span
              >
              <span v-else class="intelligenceType">{{
                scope.row.algSubtypeName
              }}</span>
            </template>
          </el-table-column>
          <el-table-column
            :label="$t('site_management.DiscriminantBenchmarkImage')"
            width="220"
            align="center"
          >
          </el-table-column>
          <el-table-column
            :label="$t('share.operate')"
            fixed="right"
            align="center"
            width="100"
          >
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                @click="monitorPointEdit(scope.row)"
                >修改</el-button
              >
              <el-button
                size="mini"
                type="text"
                @click="handleDelete(scope.row.patrolpointId)"
                >{{ $t("share.delete") }}</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </el-col>
      <el-col :span="6">
        <div class="cameraImgDiv">
          <img src="@/assets/images/camera.png" class="cameraImg" />
          <div>{{ $t("site_management.ClickOnTheLeftSide") }}</div>
        </div>
        <el-tabs v-model="activeName" @tab-click="tabsClick" :stretch="true">
          <el-tab-pane :label="$t('site_management.tabsOne')" name="first">
            <div class="tabsBtn">
              <el-button
                @click="bindingMonitorBtn(0)"
                style="margin-top: 10px"
                :disabled="RightBtnShow"
                >{{
                  $t("site_management.BindVisibleLightMonitoringPoints")
                }}</el-button
              >
              <el-button
                @click="bindingMonitorBtn(1)"
                style="margin-top: 10px"
                :disabled="RightBtnShow"
                >{{
                  $t("site_management.BindThermalImagingMonitoringPoints")
                }}</el-button
              >
            </div>
            <el-table
              :data="presetList"
              :header-cell-style="{ 'text-align': 'center' }"
              :cell-style="{ 'text-align': 'center' }"
              style="margin-top: 10px"
            >
              <el-table-column label="设备名称"> </el-table-column>
              <el-table-column label="预置点名称" prop="presetPosName">
              </el-table-column>
              <el-table-column label="操作">
                <template slot-scope="scope">
                  <el-button
                    size="mini"
                    type="text"
                    @click="presetDotEdit(scope.row)"
                    >解绑</el-button
                  >
                  <el-button
                    size="mini"
                    type="text"
                    @click="presetDotImg(scope.row.channelImg)"
                  >
                    查看快照
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-tab-pane>
          <el-tab-pane :label="$t('site_management.tabsTwo')" name="second">
            <div class="tabsBtn">
              <el-button @click="InspectionBtn" :disabled="RightBtnShow">{{
                $t("site_management.BindMonitoringDevices")
              }}</el-button>

              <el-table style="margin-top: 10px" v-if="false">
                <el-table-column :label="$t('site_management.EquipmentName')">
                </el-table-column>
                <el-table-column :label="$t('site_management.EquipmentCode')">
                </el-table-column>
                <el-table-column :label="$t('share.operate')">
                  <template slot-scope="scope">
                    <el-button size="mini" type="text">{{
                      $t("site_management.Unbind")
                    }}</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </el-tab-pane>
        </el-tabs>
      </el-col>
    </el-row>

    <!-- 添加监控点位 -->
    <el-dialog
      :title="monitorPointTitle"
      :visible.sync="monitorPointDialogVisible"
      width="60%"
      :before-close="monitorPointHandleClose"
    >
      <el-form
        :model="monitorPointForm"
        label-position="right"
        label-width="190px"
        style="padding-right: 10%"
        :rules="rules"
        ref="ruleForm"
      >
        <el-form-item
          :label="$t('site_management.MonitoringPointName')"
          prop="patrolpointName"
        >
          <el-input
            v-model="monitorPointForm.patrolpointName"
            :placeholder="
              $t('share.PleaseEnter') +
              $t('site_management.MonitoringPointName')
            "
          ></el-input>
        </el-form-item>
        <el-form-item
          :label="$t('site_management.MonitoringPointNumber')"
          prop="patrolpointCode"
        >
          <el-input
            v-model="monitorPointForm.patrolpointCode"
            :placeholder="
              $t('share.PleaseEnter') +
              $t('site_management.MonitoringPointNumber')
            "
          ></el-input>
        </el-form-item>
        <el-form-item
          :label="$t('site_management.MonitoringContent')"
          prop="patrolContent"
        >
          <el-input
            v-model="monitorPointForm.patrolContent"
            type="textarea"
            maxlength="200"
            :placeholder="
              $t('share.PleaseEnter') + $t('site_management.MonitoringContent')
            "
          ></el-input>
        </el-form-item>

        <el-form-item
          :label="$t('site_management.InspectionType')"
          prop="patrolTypeId"
        >
          <el-select
            v-model="monitorPointForm.patrolTypeIds"
            multiple
            filterable
            default-first-option
            :placeholder="
              $t('share.PleaseChoose') + $t('site_management.InspectionType')
            "
            style="width: 100%"
          >
            <el-option
              v-for="item in InspectionTypeData"
              :key="item.patrolTypeId"
              :label="item.patrolTypeName"
              :value="item.patrolTypeId"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          :label="$t('site_management.ImportantLevel')"
          prop="pointImptLevel"
        >
          <el-select
            v-model="monitorPointForm.pointImptLevel"
            :placeholder="
              $t('share.PleaseChoose') + $t('site_management.ImportantLevel')
            "
          >
            <el-option
              v-for="item in pointImptLevelData"
              :key="item.dictValue"
              :label="item.dictLabel"
              :value="item.dictValue"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('site_management.purpose')">
          <el-input
            v-model="monitorPointForm.purpose"
            :placeholder="
              $t('share.PleaseEnter') + $t('site_management.purpose')
            "
            disabled
          ></el-input>
        </el-form-item>

        <el-form-item :label="$t('site_management.coordinate') + ' x'">
          <el-input-number
            v-model="monitorPointForm.positionX"
            :min="-20"
            :max="20"
            label=""
            :step="0.1"
          ></el-input-number>
          <span> {{ $t("site_management.coordinateXPrompt") }}</span>
        </el-form-item>
        <el-form-item :label="$t('site_management.coordinate') + ' y'">
          <el-input-number
            v-model="monitorPointForm.positionY"
            :min="66"
            :max="80"
            label=""
            :step="0.1"
          ></el-input-number>
          <span> {{ $t("site_management.coordinateYPrompt") }}</span>
        </el-form-item>
        <el-form-item :label="$t('site_management.coordinate') + ' z'">
          <el-input-number
            v-model="monitorPointForm.positionZ"
            :min="-6"
            :max="20"
            label=""
            :step="0.1"
          ></el-input-number>
          <span>{{ $t("site_management.coordinateZPrompt") }}</span>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="monitorPointHandleClose">{{
          $t("share.cancel")
        }}</el-button>
        <el-button type="primary" @click="submitForm">{{
          $t("share.confirm")
        }}</el-button>
      </span>
    </el-dialog>
    <siteVideoDialog
      :pointDialogDataName="pointDialogDataName"
      :pointDialogShow="pointDialogShow"
      :dialogProp="dialogProp"
      @site_videoDialogClose="site_videoDialogClose"
      @site_saveDot1="site_saveDot1"
      :typeVideoDialog="typeVideoDialog"
    />

    <!-- 绑定巡检设备 -->
    <el-dialog
      :title="$t('site_management.SelectInspectionEquipment')"
      :visible.sync="InspectionDialogVisible"
      width="70%"
      :before-close="InspectionHandleClose"
    >
      <el-form :inline="true" :model="queryParams" class="demo-form-inline">
        <el-form-item :label="$t('equipment.DeviceType')">
          <el-select
            v-model="queryParams.region"
            :placeholder="$t('share.PleaseChoose') + $t('equipment.DeviceType')"
          >
            <!-- <el-option label="区域一" value="shanghai"></el-option>
          <el-option label="区域二" value="beijing"></el-option> -->
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('equipment.EquipmentName')">
          <el-input
            v-model="queryParams.user"
            :placeholder="
              $t('share.PleaseEnter') + $t('equipment.EquipmentName')
            "
          ></el-input>
        </el-form-item>
        <el-form-item :label="$t('equipment.EquipmentCode')">
          <el-input
            v-model="queryParams.user"
            :placeholder="
              $t('share.PleaseEnter') + $t('equipment.EquipmentCode')
            "
          ></el-input>
        </el-form-item>
        <el-form-item :label="$t('equipment.Manufacturer')">
          <el-input
            v-model="queryParams.user"
            :placeholder="
              $t('share.PleaseEnter') + $t('equipment.Manufacturer')
            "
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini">{{
            $t("share.search")
          }}</el-button>
          <el-button icon="el-icon-refresh" size="mini">{{
            $t("share.reset")
          }}</el-button>
        </el-form-item>
      </el-form>
      <el-table
        :data="InspectionTableData"
        style="width: 100%"
        @row-click="InspectionChangeCurrentRow"
        highlight-current-row
      >
        <el-table-column
          type="selection"
          width="55"
          align="center"
          fixed="left"
        />
        <el-table-column
          prop="patroldeviceName"
          min-width="130px"
          :label="$t('equipment.EquipmentName')"
          align="center"
          fixed="left"
        >
        </el-table-column>
        <el-table-column
          prop="patroldeviceCode"
          min-width="130px"
          :label="$t('equipment.EquipmentCode')"
          align="center"
          fixed="left"
        >
        </el-table-column>
        <el-table-column
          prop="address"
          min-width="150px"
          :label="$t('equipment.VideoNVREncoding')"
          align="center"
          fixed="left"
        >
        </el-table-column>
        <el-table-column
          prop="address"
          min-width="110px"
          :label="$t('equipment.Manufacturer')"
          align="center"
          fixed="left"
        >
        </el-table-column>
        <el-table-column
          prop="address"
          min-width="150px"
          :label="$t('equipment.MainSystemNumber')"
          align="center"
          fixed="left"
        >
        </el-table-column>
        <el-table-column
          prop="address"
          min-width="140px"
          :label="$t('equipment.SubstationName')"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="address"
          min-width="140px"
          :label="$t('equipment.SubstationCode')"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="address"
          min-width="140px"
          :label="$t('equipment.areaName')"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="address"
          min-width="110px"
          :label="$t('equipment.DeviceType')"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="address"
          min-width="130px"
          :label="$t('equipment.EquipmentModel')"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="address"
          min-width="110px"
          :label="$t('equipment.UnitOfUse')"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="address"
          min-width="140px"
          :label="$t('equipment.EquipmentSource')"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="address"
          min-width="150px"
          :label="$t('equipment.dateOfManufacture')"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="address"
          min-width="130px"
          :label="$t('equipment.factoryNumber')"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="address"
          min-width="150px"
          :label="$t('equipment.IsItARotatingWheel')"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="address"
          min-width="100px"
          :label="$t('equipment.UseType')"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="address"
          min-width="100px"
          :label="$t('equipment.VideoType')"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="address"
          min-width="150px"
          :label="$t('equipment.InstallationPosition')"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="address"
          min-width="130px"
          :label="$t('equipment.BelongingRobot')"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="address"
          min-width="100px"
          :label="$t('equipment.ipAddress')"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="address"
          min-width="100px"
          :label="$t('equipment.port')"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="address"
          :label="$t('equipment.user')"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="address"
          min-width="100px"
          :label="$t('equipment.password')"
          align="center"
        >
        </el-table-column>
      </el-table>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <!-- 机器人点位上传 -->
    <el-dialog
      :title="$t('site_management.upload')"
      :visible.sync="upload.open"
      width="30%"
      :before-close="handleClose"
    >
      <div style="width: 100%; text-align: center">
        <el-upload
          ref="uploadRef"
          :limit="1"
          accept=".xlsx, .xls, .txt, .xml"
          :headers="upload.headers"
          :action="upload.url + '?updateSupport=' + upload.updateSupport"
          :disabled="upload.isUploading"
          :on-progress="handleFileUploadProgress"
          :on-success="handleFileSuccess"
          :auto-upload="false"
          drag
        >
          <el-icon class="el-icon--upload"><upload-filled /></el-icon>
          <div class="el-upload__text">
            {{ $t("site_management.uploadMsg") }}
          </div>
          <template #tip>
            <div class="el-upload__tip text-center">
              <!-- <span>仅允许导入xls、xlsx、xml、txt格式文件。</span> -->
              <!-- <el-link type="primary" :underline="false" style="font-size: 12px; vertical-align: baseline"
              @click="importTemplate">下载模板</el-link> -->
            </div>
          </template>
        </el-upload>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="upload.open = false">{{
          $t("share.cancel")
        }}</el-button>
        <el-button type="primary" @click="submitFileForm">{{
          $t("share.confirm")
        }}</el-button>
      </span>
    </el-dialog>
    <!-- 查看快照 -->
    <el-dialog
      title="查看快照"
      :visible.sync="dialogChannelImg"
      width="60%"
      :before-close="dialogChannelImgHandleClose"
    >
      <img :src="dialogChannelImgSrc" style="width: 100%; height: 80vh" />
    </el-dialog>
  </div>
</template>

<script >
import { getToken } from "@/utils/auth";
import {
  getTreeAreaDeviceSelect,
  getMonitor,
  getPatroltypeList,
  pointImptLevel,
  postAdd,
  edit,
  editItem,
  postRemove,
  getPresetList,
  presetRemove,
  eqpbookList,
  // vl,
  // listByEqIdAndChannelId
} from "@/api/point/site_management";
import siteVideoDialog from "./components/site_VideoDialog.vue";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";

export default {
  name: "SiteManagement",
  components: {
    siteVideoDialog,
    Treeselect,
  },
  data() {
    return {
      treeData: [],
      defaultProps: {
        children: "children",
        label: function (data) {
          return data.areaName || data.deviceName;
        },
      },
      tableData: [],
      activeName: "first",
      monitorPointDialogVisible: false,
      monitorPointForm: {},
      rules: {
        patrolpointName: [
          {
            required: true,
            message:
              this.$t("share.PleaseEnter") +
              this.$t("site_management.MonitoringPointName"),
            trigger: "blur",
          },
        ],
        patrolpointCode: [
          {
            required: true,
            message:
              this.$t("share.PleaseEnter") +
              this.$t("site_management.MonitoringPointNumber"),
            trigger: "blur",
          },
        ],
        patrolContent: [
          {
            required: true,
            message:
              this.$t("share.PleaseEnter") +
              this.$t("site_management.MonitoringContent"),
            trigger: "blur",
          },
        ],
        patrolTypeId: [
          {
            required: true,
            message:
              this.$t("share.PleaseEnter") +
              this.$t("site_management.InspectionType"),
            trigger: "blur",
          },
        ],
        pointImptLevel: [
          {
            required: true,
            message:
              this.$t("share.PleaseEnter") +
              this.$t("site_management.ImportantLevel"),
            trigger: "blur",
          },
        ],
      },
      monitorPointTitle: "添加监控点位",
      bindingMonitorPointTitle: "绑定可见光监控点",
      bindingMonitorPointDialogVisible: false,
      bindingMonitorPointTableData: [],
      InspectionDialogVisible: false,
      queryParams: {},
      InspectionTableData: [],
      upload: {
        // 是否显示弹出层（用户导入）
        open: false,
        // 弹出层标题（用户导入）
        title: "",
        // 是否禁用上传
        isUploading: false,
        // 是否更新已经存在的用户数据
        updateSupport: 0,
        // 设置上传的请求头部
        headers: { Authorization: "Bearer " + getToken() },
        // 上传的地址
        // url: import.meta.env.VITE_APP_BASE_API + "/zhxx/device/import",
      },
      InspectionTypeData: [],
      pointImptLevelData: [
        {
          value: "I",
          label: "I类",
        },
        {
          value: "II",
          label: "II类",
        },
        {
          value: "III",
          label: "III类",
        },
      ],
      input3: null,
      value: null,
      deviceIdShow: true,
      TreeItem: {},
      type: 0,
      RightBtnShow: true,
      // dialogPointTree:[],
      // defaultPropsMonitor: {
      //   children: "children",
      //   label: "name",
      // },
      // listByEqIdAndChanneData: [],
      pointDialogDataName: "",
      pointDialogShow: false,
      dialogProp: {},
      presetList: [],
      changeCurrentRowData: {},
      dialogChannelImg: false,
      dialogChannelImgSrc: "",
      eqpbookListQuery: {
        pageNum: 1,
        pageSize: 10,
      },
      typeVideoDialog:0
    };
  },
  mounted() {
    getTreeAreaDeviceSelect().then((res) => {
      if (res.code == 200) {
        this.treeData = res.data;
      }
    }),
      getPatroltypeList().then((res) => {
        if (res.code == 200) {
          console.log(res.rows, 1111111111);
          this.InspectionTypeData = res.rows;
        }
      });
    pointImptLevel().then((res) => {
      this.pointImptLevelData = res.data;
    });
  },
  methods: {
    // 给表头加必填符号*
    addRedStar(h, { column }) {
      return [
        h("span", { style: "color: red" }, "*"),
        h("span", " " + column.label),
      ];
    },
    handleNodeClick(data, e) {
      this.TreeItem = data;
      this.RightBtnShow = true;
      this.monitorPointForm.areaId = data.areaId;
      this.monitorPointForm.deviceId = data.deviceId;
      if (data.deviceId) {
        this.deviceIdShow = false;
      } else {
        this.deviceIdShow = true;
      }
      let obj = {
        areaId: data.areaId,
      };
      if (data.deviceId) {
        obj.deviceId = data.deviceId;
      }
      getMonitor(obj).then((res) => {
        if (res.code == 200) {
          this.tableData = res.rows;
          this.tableData.forEach((item) => {
            // item.patrolTypeIds = item.patrolTypeId.split(",");
            // item.patrolTypeIds = item.patrolTypeId.split(",").map(Number)||[];
            item.patrolTypeIds = (item.patrolTypeId || "")
              .split(",")
              .map(Number)
              .filter(Boolean);
            let id = item.algSubtypeIds.split(",");
            item.patrolTypeId = id.map(Number);
          });
        }
      });
    },

    changeCurrentRow(row) {
      this.dialogProp = row;
      this.currentRowId = row.id; // 更新当前点击的行ID
      this.RightBtnShow = false;
      this.rowStyle(row);
      this.changeCurrentRowData = {
        patrolpointId: row.patrolpointId,
      };
      this.getPresetListFn();
    },
    getPresetListFn() {
      getPresetList(this.changeCurrentRowData).then((res) => {
        if (res.code == 200) {
          this.presetList = res.data;
          if (res.data.length != 0) {
            this.RightBtnShow = true;
          }
        }
      });
    },

    // 更改选中行背景色
    rowStyle(row) {
      if (this.name === row.name) {
        return { "background-color": "#F7EDED", cursor: "pointer" };
      }
      return { cursor: "pointer" };
    },
    tabsClick() {},
    add() {
      this.monitorPointForm={}
      this.type = 0;
      this.monitorPointDialogVisible = true;
      this.monitorPointTitle = this.$t("site_management.AddMonitoringPoints");
    },
    monitorPointHandleClose() {
      this.monitorPointDialogVisible = false;
    },
    monitorPointEdit(data) {
      this.monitorPointForm={}
      this.type = 1;
      this.monitorPointDialogVisible = true;
      this.monitorPointTitle = this.$t(
        "site_management.ModifyMonitoringPoints"
      );
      this.monitorPointForm = {
        ...data,
        patrolTypeIds: data.patrolTypeIds || [],
      };
    },
    // 关闭绑定可见光监测点弹窗
    bindingMonitorPointClose() {
      this.bindingMonitorPointDialogVisible = false;
    },
    bindingMonitorBtn(type) {
      this.typeVideoDialog = type;
      if (type == 0) {
        // 绑定可见光监测点
        // this.bindingMonitorPointTitle = this.$t(
        //   "site_management.BindVisibleLightMonitoringPoints"
        // );
        // vl().then(res=>{
        //   if(res.code==200){
        //     this.dialogPointTree=res.data;
        //   }
        // })
        this.pointDialogDataName = this.$t(
          "site_management.BindVisibleLightMonitoringPoints"
        );
      } else {
        // this.bindingMonitorPointTitle = this.$t(
        //   "site_management.BindThermalImagingMonitoringPoints"
        // );
        this.pointDialogDataName = this.$t(
          "site_management.BindThermalImagingMonitoringPoints"
        );
      }
      this.pointDialogShow = true;
      // this.bindingMonitorPointDialogVisible = true;
    },
    site_videoDialogClose() {
      this.pointDialogShow = false;
    },
    InspectionHandleClose() {
      this.InspectionDialogVisible = false;
    },
    InspectionBtn() {
      this.InspectionDialogVisible = true;
      eqpbookList(this.eqpbookListQuery).then((res) => {
        console.log(res, 1111);
        if (res.code == 200) {
          this.InspectionTableData = res.rows;
        }
      });
    },
    InspectionChangeCurrentRow(row) {
      this.currentRowId = row.id; // 更新当前点击的行ID
      this.rowStyle(row);
    },
    /**文件上传中处理 */
    handleFileUploadProgress(event, file, fileList) {
      upload.isUploading = true;
    },
    /** 文件上传成功处理 */
    handleFileSuccess(response, file, fileList) {
      upload.open = false;
      upload.isUploading = false;
      proxy.$refs["uploadRef"].handleRemove(file);
      proxy.$alert(
        "<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" +
          response.msg +
          "</div>",
        "导入结果",
        { dangerouslyUseHTMLString: true }
      );
      // getList();
    },
    /** 提交上传文件 */
    submitFileForm() {
      proxy.$refs["uploadRef"].submit();
    },
    upDataBtn() {
      console.log(111);
      this.upload.open = true;
    },
    handleClose() {},
    // 新增点位
    submitForm() {
      this.$refs["ruleForm"].validate((valid) => {
        if (valid) {
          this.monitorPointForm.patrolTypeId =
            this.monitorPointForm.patrolTypeIds.toString();
          if (this.type == 0) {
            postAdd(this.monitorPointForm).then((res) => {
              if (res.code == 200) {
                this.$message({
                  type: "success",
                  message: "添加成功!",
                });
                this.monitorPointDialogVisible = false;
                this.handleNodeClick(this.TreeItem);
              }
            });
          } else {
            edit(this.monitorPointForm).then((res) => {
              if (res.code == 200) {
                this.$message({
                  type: "success",
                  message: "修改成功!",
                });
                this.monitorPointDialogVisible = false;
                this.handleNodeClick(this.TreeItem);
              }
            });
          }
        }
      });
    },
    // 删除
    handleDelete(id) {
      postRemove(id).then((res) => {
        if (res.code == 200) {
          this.$message({
            type: "success",
            message: "删除成功!",
          });
          this.handleNodeClick(this.TreeItem);
        }
      });
    },

    // // 绑定可见光监测点点击树事件
    // handleMonitor(e) {
    //   if (e.eqpbookId) {
    //     // console.log(e,'点击了')
    //     listByEqIdAndChannelId({
    //       channelCode: e.channelCode,
    //       patroldeviceCode: e.patroldeviceCode,
    //     }).then((res) => {
    //       console.log(e, "摄像头列表");
    //       if (res.code == 200) {
    //         this.listByEqIdAndChanneData = res.data;
    //       }
    //     });
    //   }
    // },
    // 解绑
    presetDotEdit(row) {
      this.$confirm("确定解绑预置点吗？", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          presetRemove(row.presetPosId).then((res) => {
            if (res.code == 200) {
              this.getPresetListFn();
              this.$message({
                type: "success",
                message: "解绑成功!",
              });
            } else {
              this.$message({
                type: "error",
                message: res.msg,
              });
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "取消解绑",
          });
        });
    },
    site_saveDot1() {
      this.getPresetListFn();
    },
    // 查看快照
    presetDotImg(channelImg) {
      this.dialogChannelImg = true;
      this.dialogChannelImgSrc = channelImg;
    },
    dialogChannelImgHandleClose() {
      this.dialogChannelImg = false;
    },
    patrolTypeNameFn(arr) {
      // console.log(str, 1111111111);
      if (Array.isArray(arr) && arr.length > 0) {
        // return this.InspectionTypeData.filter(item => item.id == str)[0].name;
        console.log(this.InspectionTypeData, "存在", arr);
      }
    },
    // handleSelectPointCode(node, row) {
    //   row.patrolTypeId.push(node.id);
    //   console.log( row.patrolTypeId,2222222)
    //   return
    //   this.handleChangePointCode(row);
    // },
    // handleDeSelectPointCode(node, row) {
    //   if (row.patrolTypeId.indexOf(node.id) != -1) {
    //     row.patrolTypeId.splice(row.patrolTypeId.indexOf(node.id), 1);
    //     console.log( row.patrolTypeId,2222222)
    //     return
    //     this.handleChangePointCode(row);
    //   }
    // },
  },
};
</script>

<style lang="scss" scoped>
.qurey {
  margin-bottom: 10px;
  ::v-deep.el-button {
    background-color: #46a6ff !important;
    color: #fff !important ;
  }
}
.tableOperate {
  margin-top: 10px;
  margin-bottom: 10px;
  display: flex;
  justify-content: space-between;
  .tableSearch {
    ::v-deep.el-button {
      background-color: #46a6ff !important;
      color: #fff !important ;
    }
  }
}
.tableXYZ {
  display: flex;
}
.cameraImgDiv {
  text-align: center;
}
.cameraImg {
  width: 30%;
  margin-bottom: 10px;
}
.tabsBtn {
  text-align: center;
}
// .bindingMonitorPointTree {
//   width: 100%;
//   height: 37vh;
//   overflow-y: scroll;
// }
// .bindingMonitorPointDiv {
//   width: 100%;
//   height: 40vh;
//   // background: red;
// }
// .PTZ-content {
//   width: 170px;
//   margin: 10px auto;
//   position: relative;
//   img {
//     width: 100%;
//   }
// }
// .r-ti2-pos {
//   position: absolute;
//   top: 0;
//   left: 0;
//   width: 100%;
//   height: 100%;
//   div {
//     position: absolute;
//     z-index: 999;
//     width: 20px;
//     height: 15px;
//     cursor: pointer;
//   }
//   div:first-child {
//     top: 32px;
//     left: 75px;
//   }
//   div:nth-child(2) {
//     top: 50px;
//     left: 102px;
//   }
//   div:nth-child(3) {
//     top: 77px;
//     right: 30px;
//   }
//   div:nth-child(4) {
//     bottom: 56px;
//     left: 102px;
//   }
//   div:nth-child(5) {
//     bottom: 36px;
//     left: 75px;
//   }
//   div:nth-child(6) {
//     bottom: 56px;
//     right: 100px;
//   }
//   div:nth-child(7) {
//     bottom: 80px;
//     left: 30px;
//   }
//   div:nth-child(8) {
//     top: 50px;
//     right: 102px;
//   }
// }
// .r-ti3 {
//   width: 100%;
//   display: flex;
//   padding-top: 10px;
//   -webkit-box-pack: justify;
//   justify-content: space-between;
// }
// .r-ti3-d1 {
//   width: 76px;
//   position: relative;
//   img {
//     width: 100%;
//   }
//   .r-ti3-d2 {
//     position: absolute;
//     top: 0;
//     left: 0;
//     width: 100%;
//     height: 100%;
//     div:first-child {
//       width: 50%;
//       height: 100%;
//       position: absolute;
//       top: 0;
//       left: 0;
//       cursor: pointer;
//     }
//     div:nth-child(2) {
//       width: 50%;
//       height: 100%;
//       position: absolute;
//       top: 0;
//       right: 0;
//       cursor: pointer;
//     }
//   }
// }
// .r-ti4 {
//   padding-top: 20px;
//   img {
//     width: 24px;
//     height: 24px;
//     position: relative;
//     top: 6px;
//     cursor: pointer;
//   }
// }
.intelligenceType {
  cursor: pointer;
  color: #409eff;
}
</style>
