<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="$t('share.prompt')"
          type="info"
          :description="$t('site_management.promptMsg') + ';'"
          show-icon
        >
        </el-alert>
        <div class="tableOperate">
          <div class="btnBox">
            <el-button type="primary" @click="add">{{
              $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"
          >
            <template slot-scope="scope">
              <el-input
                :placeholder="
                  $t('share.PleaseEnter') + $t('site_management.PointName')
                "
              ></el-input>
            </template>
          </el-table-column>
          <el-table-column
            :label="$t('site_management.MonitoringContent')"
            width="150"
            align="center"
          >
          </el-table-column>
          <el-table-column :label="$t('site_management.purpose')">
          </el-table-column>
          <el-table-column
            :label="$t('site_management.MonitoringNumber')"
            width="200"
            align="center"
            :render-header="addRedStar"
          >
            <template slot-scope="scope">
              <el-input
                :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">
              <el-select
                :placeholder="
                  $t('share.PleaseChoose') +
                  $t('site_management.InspectionType')
                "
              >
                <!-- <el-option label="区域一" value="shanghai"></el-option>
                <el-option label="区域二" value="beijing"></el-option> -->
              </el-select>
            </template>
          </el-table-column>
          <el-table-column
            :label="$t('site_management.ImportantLevel')"
            width="150"
            align="center"
            :render-header="addRedStar"
          >
            <el-select
              :placeholder="
                $t('share.PleaseChoose') + $t('site_management.ImportantLevel')
              "
            >
              <!-- <el-option label="区域一" value="shanghai"></el-option>
              <el-option label="区域二" value="beijing"></el-option> -->
            </el-select>
          </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)"></el-input>
                <el-input placeholder="y(66)"></el-input>
                <el-input placeholder="z(-6,20)"></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"
          >
          </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)"
                >{{ $t("share.new") }}</el-button
              >
              <el-button
                size="mini"
                type="text"
                @click="handleDelete(scope.row)"
                >{{ $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"
                >{{
                  $t("site_management.BindVisibleLightMonitoringPoints")
                }}</el-button
              >
              <el-button
                @click="bindingMonitorBtn(1)"
                style="margin-top: 10px"
                >{{
                  $t("site_management.BindThermalImagingMonitoringPoints")
                }}</el-button
              >
            </div>
          </el-tab-pane>
          <el-tab-pane :label="$t('site_management.tabsTwo')" name="second">
            <div class="tabsBtn">
              <el-button @click="InspectionBtn">{{
                $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
        v-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="MonitoringPointName"
        >
          <el-input
            v-model="monitorPointForm.MonitoringPointName"
            :placeholder="
              $t('share.PleaseEnter') +
              $t('site_management.MonitoringPointName')
            "
          ></el-input>
        </el-form-item>
        <el-form-item
          :label="$t('site_management.MonitoringPointNumber')"
          prop="MonitoringPointNumber"
        >
          <el-input
            v-model="monitorPointForm.MonitoringPointNumber"
            :placeholder="
              $t('share.PleaseEnter') +
              $t('site_management.MonitoringPointNumber')
            "
          ></el-input>
        </el-form-item>
        <el-form-item
          :label="$t('site_management.MonitoringContent')"
          prop="MonitoringContent"
        >
          <el-input
            v-model="monitorPointForm.MonitoringContent"
            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="InspectionType"
        >
          <el-select
            v-model="monitorPointForm.InspectionType"
            multiple
            filterable
            allow-create
            default-first-option
            :placeholder="
              $t('share.PleaseChoose') + $t('site_management.InspectionType')
            "
            style="width: 100%"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          :label="$t('site_management.ImportantLevel')"
          prop="ImportantLevel"
        >
          <el-select
            v-model="monitorPointForm.ImportantLevel"
            :placeholder="
              $t('share.PleaseChoose') + $t('site_management.ImportantLevel')
            "
          >
            <!-- <el-option label="重要等级" value="重要等级"> </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')
            "
          ></el-input>
        </el-form-item>

        <el-form-item :label="$t('site_management.coordinate') + ' x'">
          <el-input-number
            v-model="monitorPointForm.name"
            :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.name"
            :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.name"
            :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="monitorPointHandleClose">{{
          $t("share.confirm")
        }}</el-button>
      </span>
    </el-dialog>

    <!-- 绑定可见光监测点 -->
    <el-dialog
      :title="bindingMonitorPointTitle"
      :visible.sync="bindingMonitorPointDialogVisible"
      width="70%"
      :before-close="bindingMonitorPointClose"
    >
      <el-row :gutter="20">
        <el-col :span="5">
          <div class="bindingMonitorPointTree">
            <el-tree :data="treeData" :props="defaultProps"></el-tree>
          </div>
        </el-col>
        <el-col :span="13">
          <div class="bindingMonitorPointDiv">
            <videoPlayer />
          </div>
        </el-col>
        <el-col :span="6">
          <div style="background: #eee; padding: 5px">
            {{ $t("site_management.PTZ") }}
          </div>
          <div class="PTZ-content">
            <img src="@/assets/images/PTZImg.png" alt="" class="PTZImg" />
            <div class="r-ti2-pos">
              <div></div>
              <div></div>
              <div></div>
              <div></div>
              <div></div>
              <div></div>
              <div></div>
              <div></div>
            </div>
          </div>
          <div class="r-ti3">
            <div class="r-ti3-d1">
              <img src="@/assets/images/searchImg.png" alt="" />
              <div class="r-ti3-d2">
                <div></div>
                <div></div>
              </div>
            </div>
            <div class="r-ti3-d1">
              <img src="@/assets/images/r2Img.png" alt="" />
              <div class="r-ti3-d2">
                <div></div>
                <div></div>
              </div>
            </div>
            <div class="r-ti3-d1">
              <img src="@/assets/images/r3Img.png" alt="" />
              <div class="r-ti3-d2">
                <div></div>
                <div></div>
              </div>
            </div>
          </div>
          <div class="r-ti4">
            <div style="display: flex">
              <el-select
                v-model="value"
                :placeholder="$t('site_management.PleaseSelectAPresetPoint')"
              >
                <el-option label="item.label" value="item.value"> </el-option>
              </el-select>
              <img src="@/assets/images/playImg.png" alt="" />
              <img src="@/assets/images/addImg.png" alt="" />
            </div>
            <div style="display: flex; margin-top: 20px">
              <el-input
                :placeholder="$t('site_management.PleaseEnterTheContent')"
              ></el-input>
              <img src="@/assets/images/setImg.png" alt="" />
            </div>
          </div>
        </el-col>
      </el-row>
      <el-table
        :data="bindingMonitorPointTableData"
        style="width: 100%"
        @header-click="clickFun"
      >
        <el-table-column
          prop="date"
          :label="$t('site_management.ActionType')"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="name"
          :label="$t('site_management.RecordingDuration')"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="address"
          :label="$t('site_management.NumberOfPhotosTaken')"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="address"
          :label="$t('site_management.PhotoInterval')"
          align="center"
        >
        </el-table-column>
        <el-table-column
          align="center"
          :render-header="(h, obj) => renderHeader(h, obj, $t('share.addTo'))"
        >
          <template slot-scope="scope">
            <span>{{ $t("share.delete") }}</span>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>

    <!-- 绑定巡检设备 -->
    <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="date"
        min-width="130px"
        :label="$t('equipment.EquipmentName')"
        align="center"
        fixed="left"
      >
      </el-table-column>
      <el-table-column
        prop="name"
        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>
  </div>
</template>

<script >
import videoPlayer from "@/components/videoPlayer/index.vue";
import { getToken } from "@/utils/auth";
export default {
  name: "SiteManagement",
  components: {
    videoPlayer,
  },
  data() {
    return {
      treeData: [
        {
          label: "一级 1",
          type: 1,
          children: [
            {
              label: "二级 1-1",
              children: [
                {
                  label: "三级 1-1-1",
                  children: [
                    {
                      label: "四级 1-1-1-1",
                      type: 4,
                    },
                    {
                      label: "四级 1-1-1-2",
                      type: 4,
                    },
                  ],
                },
              ],
            },
          ],
        },
      ],
      defaultProps: {
        children: "children",
        label: "label",
      },
      tableData: [],
      activeName: "first",
      monitorPointDialogVisible: false,
      monitorPointForm: {},
      rules: {
        MonitoringPointName: [
          {
            required: true,
            message:
              this.$t("share.PleaseEnter") +
              this.$t("site_management.MonitoringPointName"),
            trigger: "blur",
          },
        ],
        MonitoringPointNumber: [
          {
            required: true,
            message:
              this.$t("share.PleaseEnter") +
              this.$t("site_management.MonitoringPointNumber"),
            trigger: "blur",
          },
        ],
        MonitoringContent: [
          {
            required: true,
            message:
              this.$t("share.PleaseEnter") +
              this.$t("site_management.MonitoringContent"),
            trigger: "blur",
          },
        ],
        InspectionType: [
          {
            required: true,
            message:
              this.$t("share.PleaseEnter") +
              this.$t("site_management.InspectionType"),
            trigger: "blur",
          },
        ],
        ImportantLevel: [
          {
            required: true,
            message:
              this.$t("share.PleaseEnter") +
              this.$t("site_management.ImportantLevel"),
            trigger: "blur",
          },
        ],
      },
      monitorPointTitle: "添加监控点位",

      options: [
        {
          value: "HTML",
          label: "HTML",
        },
        {
          value: "CSS",
          label: "CSS",
        },
        {
          value: "JavaScript",
          label: "JavaScript",
        },
      ],
      bindingMonitorPointTitle: "绑定可见光监控点",
      bindingMonitorPointDialogVisible: false,
      bindingMonitorPointTableData: [],
      InspectionDialogVisible: false,
      queryParams: {},
      InspectionTableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
        },
      ],
      upload: {
        // 是否显示弹出层（用户导入）
        open: false,
        // 弹出层标题（用户导入）
        title: "",
        // 是否禁用上传
        isUploading: false,
        // 是否更新已经存在的用户数据
        updateSupport: 0,
        // 设置上传的请求头部
        headers: { Authorization: "Bearer " + getToken() },
        // 上传的地址
        // url: import.meta.env.VITE_APP_BASE_API + "/zhxx/device/import",
      },
    };
  },
  mounted() {},
  methods: {
    // 给表头加必填符号*
    addRedStar(h, { column }) {
      return [
        h("span", { style: "color: red" }, "*"),
        h("span", " " + column.label),
      ];
    },
    handleNodeClick() {},

    changeCurrentRow(row) {
      this.currentRowId = row.id; // 更新当前点击的行ID
      rowStyle(row);
    },
    // 更改选中行背景色
    rowStyle({ row }) {
      if (this.name === row.name) {
        return { "background-color": "#F7EDED", cursor: "pointer" };
      }
      return { cursor: "pointer" };
    },
    tabsClick() {},
    add() {
      this.monitorPointDialogVisible = true;
      this.monitorPointTitle = this.$t("site_management.AddMonitoringPoints");
    },
    monitorPointHandleClose() {
      this.monitorPointDialogVisible = false;
    },
    monitorPointEdit() {
      this.monitorPointDialogVisible = true;
      this.monitorPointTitle = this.$t(
        "site_management.ModifyMonitoringPoints"
      );
    },
    // 关闭绑定可见光监测点弹窗
    bindingMonitorPointClose() {
      this.bindingMonitorPointDialogVisible = false;
    },
    bindingMonitorBtn(type) {
      if (type == 0) {
        this.bindingMonitorPointTitle = this.$t(
          "site_management.BindVisibleLightMonitoringPoints"
        );
      } else {
        this.bindingMonitorPointTitle = this.$t(
          "site_management.BindThermalImagingMonitoringPoints"
        );
      }

      this.bindingMonitorPointDialogVisible = true;
    },
    clickFun() {},
    renderHeader(h, { column, $index }, type) {
      let that = this;
      return h("div", [
        // 列名称
        h("span", column.label),
        // 按钮
        h(
          "el-button",
          {
            props: {
              type: "text",
              size: "small",
            },
            style: "margin-left: 5px;",
            on: {
              click: function () {
                that.clickButton(type);
              },
            },
          },
          this.$t("share.addTo")
        ),
      ]);
    },
    clickButton(type) {
      console.log("我点击了" + type + "的列");
    },
    InspectionHandleClose() {
      this.InspectionDialogVisible = false;
    },
    InspectionBtn() {
      this.InspectionDialogVisible = true;
    },
    InspectionChangeCurrentRow(row) {
      this.currentRowId = row.id; // 更新当前点击的行ID
      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;
    },
  },
};
</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;
  }
}
</style>
