<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" :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">
              <el-select
                multiple
                v-model="scope.row.patrolTypeId"
                :placeholder="
                  $t('share.PleaseChoose') +
                  $t('site_management.InspectionType')
                "
                disabled
              >
                <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 class="intelligenceType">设置</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-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.patrolTypeId"
            multiple
            filterable
            allow-create
            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>

    <!-- 绑定可见光监测点 -->
    <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";
import {
  getTreeAreaDeviceSelect,
  getMonitor,
  getPatroltypeList,
  pointImptLevel,
  postAdd,
  edit,
  editItem,
  postRemove,
} from "@/api/point/site_management";

export default {
  name: "SiteManagement",
  components: {
    videoPlayer,
  },
  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: [
        {
          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",
      },
      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,
    };
  },
  mounted() {
    getTreeAreaDeviceSelect().then((res) => {
      if (res.code == 200) {
        this.treeData = res.data;
      }
    }),
      getPatroltypeList().then((res) => {
        if (res.code == 200) {
          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) => {
            let id = item.algSubtypeIds.split(",");
            item.patrolTypeId = id.map(Number);
          });
        }
      });
    },

    changeCurrentRow(row) {
      this.currentRowId = row.id; // 更新当前点击的行ID
      this.RightBtnShow=false
      this.rowStyle(row);
    },
    // 更改选中行背景色
    rowStyle(row) {
      console.log(row, 1111111111);
      if (this.name === row.name) {
        return { "background-color": "#F7EDED", cursor: "pointer" };
      }
      return { cursor: "pointer" };
    },
    tabsClick() {},
    add() {
      this.type = 0;
      this.monitorPointDialogVisible = true;
      this.monitorPointTitle = this.$t("site_management.AddMonitoringPoints");
    },
    monitorPointHandleClose() {
      this.monitorPointDialogVisible = false;
    },
    monitorPointEdit(data) {
      this.type = 1;
      this.monitorPointDialogVisible = true;
      this.monitorPointTitle = this.$t(
        "site_management.ModifyMonitoringPoints"
      );
      this.monitorPointForm = data;
      // this.tableData.forEach((item) => {
      //   if (item.patrolpointId == data.patrolpointId) {
      //     // console.log(item, 11111111111111);
      //     editItem(item.patrolpointId).then((res) => {
      //       console.log(res, 111111111);
      //     });
      //   }
      // });
    },
    // 关闭绑定可见光监测点弹窗
    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
      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.patrolTypeId.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);
        }
      });
    },
  },
};
</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>
