<template>
  <div>
    <el-dialog
      :title="title"
      :visible.sync="details"
      :before-close="cancel"
      width="60%"
      text-align="left"
      :style="processType ? 'left: 13%' : ''"
      class="detailsDialog"
      :close-on-click-modal="false"
      ref="upload"
      :modal="false"
      append-to-body
    >
      <div class="dialogStyleBox">
        <div class="dialogLine"></div>
        <div class="dialogCloseButton"></div>
      </div>
      <div class="videoDialogBox">
        <div
          style="display: none"
          class="processButton"
          @click="openProcess()"
          :class="processType ? 'el-icon-s-fold' : 'el-icon-s-unfold'"
        >
          预警处置
        </div>
        <div class="dialogBg">
          <div style="padding: 6px 0">事发时抓图或录像</div>
          <!-- <video :src="eventForm.videoUrl" controls muted loop fluid></video> -->
          <div class="picBox">
            <swiper
              class="swiper gallery-top"
              :options="swiperOptionTop"
              ref="swiperTop"
              v-show="eventFormDetail.iconUrlList.length >= 1"
            >
              <!-- slides -->
              <swiper-slide
                v-for="(item, index) in eventFormDetail.iconUrlList"
                :key="index"
                :class="'slide-' + index"
              >
                <video
                  :src="item.imgUrl"
                  :poster="item.imgUrl"
                  v-if="index == 0"
                  @click="openPicDialog(eventFormDetail)"
                  class="leftVideo"
                  autoplay
                  muted
                  loop
                ></video>
                <img
                  :src="item.imgUrl"
                  style="width: 100%; height: 100%"
                  v-if="index != 0"
                  @click="clickImg(item.imgUrl)"
                />
              </swiper-slide>
              <!-- <div class="swiper-scrollbar"   slot="scrollbar"></div> -->
            </swiper>
            <swiper
              class="swiper gallery-thumbs"
              :options="swiperOptionThumbs"
              ref="swiperThumbs"
              v-show="eventFormDetail.iconUrlList.length >= 1"
            >
              <swiper-slide
                v-for="(item, index) in eventFormDetail.iconUrlList"
                :key="index"
                :class="'slide-' + index"
              >
                <video
                  :src="item.imgUrl"
                  :poster="item.imgUrl"
                  v-if="index == 0"
                  autoplay
                  muted
                  loop
                ></video>
                <img
                  :src="item.imgUrl"
                  style="width: 100%; height: 100%"
                  v-if="index != 0"
                />
              </swiper-slide>
              <div class="swiper-button-prev" slot="button-prev"></div>
              <div class="swiper-button-next" slot="button-next"></div>
            </swiper>
            <div
              v-show="eventFormDetail.iconUrlList.length < 1"
              style="width: 100%; height: 300px"
            >
              <el-image
                style="width: 100%; height: 100%"
                :src="noPic"
                :fit="contain"
              >
              </el-image>
            </div>
          </div>
        </div>
        <div class="dialogBg dialogBg2">
          <div style="padding: 6px 0">
            实时视频<span>(事发位置最近的监控视频)</span>
          </div>
          <div class="picBox">
            <el-carousel
              trigger="click"
              :autoplay="false"
              v-if="videoList.length >= 1"
            >
              <el-carousel-item
                v-for="(item, index) in videoList"
                :key="index"
                v-show="item.liveUrl != null"
              >
                <videoPlayer
                  v-show="item.liveUrl != null && item.liveUrl != ''"
                  :rtsp="item.liveUrl"
                  :open="cameraPlayer"
                ></videoPlayer>
              </el-carousel-item>
            </el-carousel>
            <el-image
              v-show="videoList.length < 1"
              :src="noDataUrl"
              :fit="contain"
            >
            </el-image>
          </div>

          <!-- 现场用这个 -->
          <!-- <video
            id="h5sVideo1"
            class="h5video_"
            controls
            muted
            loop
            autoplay
            webkit-playsinline
            playsinline
            disablePictureInPicture="true"
            controlslist="nodownload noplaybackrate noremoteplayback"
            style="width: 100%; height: 290px; object-fit: cover; z-index: -100"
          ></video> -->
        </div>
      </div>
      <div class="dialogForm">
        <el-form
          ref="eventFormDetail"
          :model="eventFormDetail"
          label-width="80px"
          :rules="rules"
        >
          <el-row style="display: flex; flex-wrap: wrap">
            <el-col :span="8">
              <el-form-item label="告警来源" prop="eventSource">
                <el-select
                  v-model="eventFormDetail.eventSource"
                  disabled
                  placeholder="请选择告警来源"
                  style="width: calc(100% - 10px)"
                >
                  <el-option
                    v-for="item in fromList"
                    :key="item.dictValue"
                    :label="item.dictLabel"
                    :value="item.dictValue"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="告警时间" prop="eventTime">
                <el-date-picker
                  clearable
                  size="small"
                  disabled
                  v-model="eventFormDetail.eventTime"
                  type="datetime"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  placeholder="选择告警时间"
                  style="width: calc(100% - 10px)"
                  :picker-options="setDisabled"
                >
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="持续时长" prop="endTime">
                <!-- <el-date-picker
                  @change="changeEndTime"
                  clearable
                  size="small"
                  v-model="eventFormDetail.endTime"
                  type="datetime"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  placeholder="选择预计解除时间"
                  style="width: calc(100% - 10px)"
                >
                </el-date-picker> -->
                <el-input
                  v-model="eventFormDetail.continuedTime"
                  readonly
                  style="width: calc(100% - 10px)"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="所属隧道" prop="tunnelName">
                <el-select
                  v-model="eventFormDetail.tunnelName"
                  placeholder="请选择所属隧道"
                  clearable
                  size="small"
                  disabled
                  style="width: calc(100% - 10px)"
                  @change="getReservePlanData"
                >
                  <el-option
                    v-for="item in tunnelList"
                    :key="item.tunnelId"
                    :label="item.tunnelName"
                    :value="item.tunnelId"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-row>
                <el-col :span="15">
                  <el-form-item label="事件起点" prop="stakeNum1">
                    <el-row class="inputNumStyle">
                      <el-col :span="22" style="margin-right: 2px">
                        <el-input
                          v-model="eventFormDetail.stakeNum1"
                          placeholder="Km"
                          oninput="value=value.replace(/[^\d]/g,'')"
                          width="100%"
                        >
                          <template slot="prepend">K</template>
                        </el-input>
                      </el-col>
                      <el-col :span="1"> +</el-col>
                    </el-row>
                  </el-form-item>
                </el-col>
                <el-col :span="9">
                  <el-form-item prop="stakeNum2" label-width="0px">
                    <el-row>
                      <el-col :span="22">
                        <el-input
                          v-model="eventFormDetail.stakeNum2"
                          placeholder="m"
                          oninput="value=value.replace(/[^\d]/g,'')"
                          width="100%"
                        />
                      </el-col>
                    </el-row>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-col>
            <el-col :span="8">
              <el-form-item label="事件终点">
                <el-row class="inputNumStyle">
                  <el-col :span="11">
                    <el-input
                      v-model="eventFormDetail.stakeEndNum1"
                      placeholder="Km"
                      oninput="value=value.replace(/[^\d]/g,'')"
                      width="100%"
                    >
                      <template slot="prepend">K</template>
                    </el-input>
                  </el-col>
                  <el-col :span="1">+</el-col>
                  <el-col :span="11">
                    <el-input
                      v-model="eventFormDetail.stakeEndNum2"
                      placeholder="m"
                      oninput="value=value.replace(/[^\d]/g,'')"
                      width="100%"
                    />
                  </el-col>
                </el-row>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="影响方向" prop="direction">
                <el-select
                  v-model="eventFormDetail.direction"
                  placeholder="方向"
                  clearable
                  size="small"
                  style="width: calc(100% - 10px)"
                  @change="getReservePlanData"
                >
                  <el-option
                    v-for="item in directionList"
                    :key="item.dictValue"
                    :label="item.dictLabel"
                    :value="item.dictValue"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="影响车道" prop="laneNo">
                <el-select
                  v-model="eventFormDetail.laneNo"
                  placeholder="车道"
                  clearable
                  size="small"
                  multiple
                  collapse-tags
                  style="width: calc(100% - 10px)"
                >
                  <el-option
                    v-for="(item, index) in chezhiLaneList"
                    :key="index"
                    :label="item.dictLabel"
                    :value="item.dictValue"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="事件车辆" prop="confidenceList">
                <el-input
                  v-model="eventFormDetail.confidenceList"
                  placeholder=""
                  style="width: calc(100% - 10px)"
                />
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="影响描述" prop="eventDescription">
                <el-input
                  v-model="eventFormDetail.eventDescription"
                  placeholder="影响描述"
                  style="width: calc(100% - 10px)"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="预估类型" prop="eventTypeId">
                <el-select
                  v-model="eventFormDetail.eventTypeId"
                  clearable
                  size="small"
                  style="width: 100%"
                  @change="getReservePlanData"
                >
                  <el-option
                    v-for="(item, index) in eventTypeData"
                    :key="index"
                    :label="item.simplifyName"
                    :value="item.id"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="预估等级" prop="eventGrade">
                <el-select
                  v-model="eventFormDetail.eventGrade"
                  clearable
                  size="small"
                  style="width: calc(100% - 10px)"
                  @change="getReservePlanData"
                >
                  <el-option
                    v-for="(item, index) in eventGradeList"
                    :key="index"
                    :label="item.dictLabel"
                    :value="item.dictValue"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="复核结果" prop="eventState">
                <el-radio-group
                  v-model="eventFormDetail.eventState"
                  @input="eventStateChange"
                >
                  <el-radio :label="4"> 确认(已处理) </el-radio>
                  <el-radio :label="2"> 挂起(稍后处理) </el-radio>
                  <el-radio :label="5"> 误报 </el-radio>
                  <el-radio :label="0"> 突发事件处置 </el-radio>
                </el-radio-group>
                <span style="color: #c59105">(请根据复核判定结果选择)</span>
              </el-form-item>
            </el-col>
            <div style="width: 100%">
              <el-col :span="24" v-show="eventFormDetail.eventState == 4">
                <el-form-item prop="reviewRemark">
                  <el-checkbox-group
                    v-model="eventFormDetail.reviewRemark"
                    class="checkBox"
                  >
                    <el-checkbox-button
                      label="已线下处理"
                      value="已线下处理"
                    ></el-checkbox-button>
                    <el-checkbox-button
                      label="车辆已驶离"
                      value="车辆已驶离"
                    ></el-checkbox-button>
                    <el-checkbox-button
                      label="施工车辆"
                      value="施工车辆"
                    ></el-checkbox-button>
                    <el-checkbox-button
                      label="正常施工作业"
                      value="正常施工作业"
                    ></el-checkbox-button>
                    <el-checkbox-button
                      label="其他"
                      value="其他"
                    ></el-checkbox-button>
                  </el-checkbox-group>
                </el-form-item>
              </el-col>
              <el-col :span="24" v-show="eventFormDetail.eventState == 2">
                <el-form-item prop="reviewRemark">
                  <el-checkbox-group
                    v-model="eventFormDetail.reviewRemark"
                    class="checkBox"
                  >
                    <el-checkbox-button
                      label="稍后处理"
                      value="稍后处理"
                    ></el-checkbox-button>
                    <el-checkbox-button
                      label="持续跟踪，事态发展情况"
                      value="持续跟踪，事态发展情况"
                    ></el-checkbox-button>
                    <el-checkbox-button
                      label="已通知高警现场处理"
                      value="已通知高警现场处理"
                    ></el-checkbox-button>
                    <el-checkbox-button
                      label="已通知路政现场处理"
                      value="已通知路政现场处理"
                    ></el-checkbox-button>
                    <el-checkbox-button
                      label="其他"
                      value="其他"
                    ></el-checkbox-button>
                  </el-checkbox-group>
                </el-form-item>
              </el-col>
              <el-col :span="24" v-show="eventFormDetail.eventState == 5">
                <el-form-item prop="reviewRemark">
                  <el-checkbox-group
                    v-model="eventFormDetail.reviewRemark"
                    class="checkBox"
                  >
                    <el-checkbox-button
                      label="系统误报"
                      value="系统误报"
                    ></el-checkbox-button>
                    <el-checkbox-button
                      label="误报或涉事车辆已驶离"
                      value="误报或涉事车辆已驶离"
                    ></el-checkbox-button>
                    <el-checkbox-button
                      label="无法复核事发情况"
                      value="无法复核事发情况"
                    ></el-checkbox-button>
                    <el-checkbox-button
                      label="其他"
                      value="其他"
                    ></el-checkbox-button>
                  </el-checkbox-group>
                </el-form-item>
              </el-col>
              <el-col
                :span="24"
                v-if="
                  eventFormDetail.eventState == 0 &&
                  eventFormDetail.prevControlType == 0
                "
              >
                <el-form-item prop="currencyId">
                  <el-select
                    v-model="eventFormDetail.currencyId"
                    placeholder="请选择预案"
                    style="width: 30%"
                  >
                    <el-option
                      v-for="item in ReservePlanList"
                      :key="item.id"
                      :label="item.planName"
                      :value="item.id"
                    ></el-option>
                  </el-select>
                  <el-button
                    size="small"
                    v-show="eventFormDetail.currencyId"
                    @click="openDoor(eventFormDetail)"
                    >查看</el-button
                  >
                  <span style="color: #c59105"
                    >(事件处置预案根据事件类型、事件等级智能推荐,处置过程中允许升级及更改预案)</span
                  >
                </el-form-item>
              </el-col>
              <el-col
                :span="24"
                v-if="
                  eventFormDetail.eventState == 0 &&
                  eventFormDetail.prevControlType == 1
                "
              >
                <el-form-item prop="currencyId">
                  <el-select
                    v-model="eventFormDetail.currencyId"
                    placeholder="请选择预案"
                  >
                    <el-option
                      v-for="item in ReservePlanList"
                      :key="item.id"
                      :label="item.planName"
                      :value="item.id"
                    ></el-option>
                  </el-select>
                  <el-button
                    size="small"
                    type="primary"
                    v-show="eventFormDetail.currencyId"
                    @click="openDoor(eventFormDetail)"
                    >查看</el-button
                  >
                  <span style="color: #c59105"
                    >(事件处置预案根据事件类型、事件等级智能推荐,处置过程中允许升级及更改预案)</span
                  >
                </el-form-item>
              </el-col>
              <el-col
                v-show="
                  eventIsShow(
                    eventFormDetail.reviewRemark,
                    eventFormDetail.eventState
                  )
                "
              >
                <el-form-item prop="otherContent">
                  <el-input
                    placeholder="请输入其他原因内容"
                    v-model="eventFormDetail.otherContent"
                  ></el-input>
                </el-form-item>
              </el-col>
            </div>
          </el-row>
        </el-form>
        <div class="dialogFooterButton">
          <div @click="submitDialog" v-hasPermi="['system:event:check']">复核提交</div>
          <!-- <div
            @click="openProcess(1, eventFormDetail.id)"
          >
            处置
          </div> -->
        </div>
      </div>
    </el-dialog>
    <!-- 视频展示 -->
    <el-dialog
      :visible.sync="picUrlDialog"
      width="70%"
      title="事件视频"
      class="videoDialog"
    >
    <div class="dialogStyleBox">
      <div class="dialogLine"></div>
      <div class="dialogCloseButton"></div>
    </div>
      <div class="videoDialogClass">
        <video :src="videoUrl" controls muted loop fluid autoplay></video>
      </div>
    </el-dialog>
    <!-- 图片展示 -->
    <el-dialog
      title="抓图详情"
      :visible.sync="dialogVisibleImg"
      width="60%"
      :before-close="handleCloseImg"
    >
    <div class="dialogStyleBox">
      <div class="dialogLine"></div>
      <div class="dialogCloseButton"></div>
    </div>
      <img :src="alongImgUrl" style="width: 100%" />
      <!-- <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisibleImg = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisibleImg = false"
          >确 定</el-button
        >
      </span> -->
    </el-dialog>
    <!-- 复核详情展示 -->
    <el-dialog
      title="设备详情"
      :visible.sync="dialogVisibleDevice"
      width="50%"
      :before-close="handleClose"
      class="explain-table"
    >
      <div class="dialogStyleBox">
        <div class="dialogLine"></div>
        <div class="dialogCloseButton"></div>
      </div>
      <div>
        <el-tabs v-model="activeName" @tab-click="handleClickDevice">
          <el-tab-pane
            v-for="(item, index) in DeviceDetail"
            :key="index"
            :label="item.tableName"
            :name="item.tableName"
          ></el-tab-pane>
        </el-tabs>
      </div>
      <div
        v-for="(item, index) in DeviceDetail"
        :key="index"
        v-show="deviceIndexShow == index"
      >
        <el-table :data="item.devicesList" style="width: 100%" :key="tableKey">
          <el-table-column prop="eqName" label="设备名称" align="center">
          </el-table-column>
          <el-table-column prop="pile" label="桩号" align="center">
          </el-table-column>
          <el-table-column prop="stateName" label="修改后状态" align="center">
          </el-table-column>
        </el-table>
      </div>
      <!-- <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisibleDevice = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisibleDevice = false">确 定</el-button>
      </span> -->
    </el-dialog>
  </div>
</template>

<script>
import $ from "jquery";
import { mapState } from "vuex";
import { displayH5sVideoAll } from "@/api/icyH5stream";

import bus from "@/utils/bus";
import { loadPicture } from "@/api/equipment/type/api.js";
import {
  image,
  video,
  userConfirm,
  getEventCamera,
} from "@/api/eventDialog/api.js";
import {
  listEventType,
  getTodayEventCount,
  getEventDetail,
  handleStrategy,
} from "@/api/event/eventType";
import {
  getTunnelList,
  getTunnelLane,
  updateEvent,
  listEvent,
  eventFlowList,
  getEvent,
  getReservePlanData,
} from "@/api/event/event";
import { examineDeviceDetail, getStrategyData } from "@/api/event/reservePlan";
import { listTunnels } from "@/api/equipment/tunnel/api";
import {
  listDevices,
  videoStreaming,
  getDeviceById,
} from "@/api/equipment/eqlist/api";
import videoPlayer from "@/views/event/vedioRecord/myVideo.vue";
export default {
  name: "eventDialog",
  // props: ["eventId"],
  components: {
    videoPlayer,
    // Swiper,
    // SwiperSlide,
  },
  data() {
    return {
      tableKey: 0,
      rules: {
        otherContent: [
          { max: 100, message: "最长输入100个字符", trigger: "blur" },
        ],
        stakeNum1: [
          {
            required: true,
            message: "请输入事件起点",
            trigger: "change",
          },
        ],
        stakeNum2: [
          {
            required: true,
            message: "请输入事件起点",
            trigger: "change",
          },
        ],
        direction: [
          {
            required: true,
            message: "请选择影响车道",
            trigger: "change",
          },
        ],
        eventTypeId: [
          {
            required: true,
            message: "请选择预估类型",
            trigger: "change",
          },
        ],
        eventGrade: [
          {
            required: true,
            message: "请选择预估等级",
            trigger: "change",
          },
        ],
        currencyId: [
          {
            required: true,
            message: "请选择预案",
            trigger: "change",
          },
        ],
        confidenceList: [
          {
            required: false,
            validator: this.confidenceListRules,
            trigger: "blur",
          },
        ],
      },
      processDialog: "false",
      deviceIndexShow: 0,
      activeName: "",
      dialogVisibleDevice: false,
      DeviceDetail: [],
      alongImgUrl: "",
      dialogVisibleImg: false,
      picUrlDialog: false,
      queryParams1: {
        pageNum: 1,
        pageSize: 10,
        faultType: null,
        faultDescription: "",
        tunnelId: "",
      },
      noPic: require("@/assets/image/noPic.png"),
      noDataUrl: require("@/assets/image/noVideo.png"),
      contain: "contain",
      noPic: require("@/assets/image/noPic.png"),
      prevControlType: "",
      details: false,
      urls: [],
      videoUrl: "",
      row11: null,
      // event: [{}],
      eventMes: {},
      eventTypeData: [],
      eventId: "",
      video1: "",
      video2: "",
      title: "",
      processType: false,
      // 详情弹窗内
      eventFormDetail: {
        stakeNum1: "",
        stakeNum2: "",
        stakeEndNum1: "",
        stakeEndNum2: "",
        iconUrlList: [],
        reviewRemark: [],
        eventState: "4",
      },
      swiperOptionTop: {
        loop: false,
        loopedSlides: 5, // looped slides should be the same
        spaceBetween: 10,
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
      },
      swiperOptionThumbs: {
        loop: false,
        loopedSlides: 5, // looped slides should be the same
        spaceBetween: 10,
        centeredSlides: true,
        slidesPerView: "auto",
        touchRatio: 0.2,
        slideToClickedSlide: true,
      },
      eventForm: {
        stakeNum1: "",
        stakeNum2: "",
        stakeEndNum1: "",
        stakeEndNum2: "",
        iconUrlList: [],
        reviewRemark: [],
        eventState: "1",
      },
      iconUrlListAll: [],
      ReservePlanList: [],
      detailsButtonType: 1,
      eventGradeList: "", //事件等级
      detailsDisabled: false,
      videoList: [],
      // 表单校验
      // rules: {
      //   /*  tunnelId: [{required: true, message: '请选择隧道名称', trigger: 'blur'}], */
      //   eventTitle: [
      //     { required: true, message: "请输入事件标题", trigger: "blur" },
      //   ],
      //   eventTypeId: [
      //     { required: true, message: "请选择事件类型", trigger: "change" },
      //   ],
      //   eventGrade: [
      //     { required: true, message: "请选择事件级别", trigger: "change" },
      //   ],
      //   eventLocation: [
      //     { required: true, message: "请输入位置", trigger: "blur" },
      //   ],
      //   eventDescription: [
      //     { required: true, message: "请输入内容", trigger: "blur" },
      //   ],
      //   faultLevel: [
      //     { required: true, message: "请选择故障等级", trigger: "faultLevel" },
      //   ],
      //   faultLocation: [
      //     {
      //       required: true,
      //       message: "请填写故障位置",
      //       trigger: "faultLocation",
      //     },
      //   ],
      //   faultType: [
      //     {
      //       required: true,
      //       message: "请选中故障类型",
      //       trigger: "faultType",
      //     },
      //   ],
      //   faultFxtime: [
      //     { required: true, message: "请填写发现时间", trigger: "faultFxtime" },
      //   ],
      //   faultCxtime: [
      //     { required: true, message: "请填写持续时间", trigger: "faultCxtime" },
      //   ],
      //   eqId: [{ required: true, message: "请填写设备名称", trigger: "eqId" }],
      //   eqStatus: [
      //     {
      //       required: true,
      //       message: "请选中设备填报状态",
      //       trigger: "eqStatus",
      //     },
      //   ],
      //   falltRemoveStatue: [
      //     {
      //       required: true,
      //       message: "请选中消除状态",
      //       trigger: "falltRemoveStatue",
      //     },
      //   ],
      //   falltRemoveStatu: [
      //     {
      //       required: true,
      //       message: "请选中消除状态",
      //       trigger: "falltRemoveStatue",
      //     },
      //   ],
      //   tunnelId: [
      //     {
      //       required: true,
      //       message: "请选中所在路段隧道",
      //       trigger: "tunnelId",
      //     },
      //   ],
      // },
      fromList: [],
      setDisabled: {
        disabledDate(time) {
          return time.getTime() > Date.now(); // 可选历史天、可选当前天、不可选未来天
        },
      },
      tunnelList: [],
      directionList: [],
      chezhiLaneList: [],
      chezhiLaneList1: [],
      chezhiLaneList2: [],
      chezhiLaneList3: [],
      radioList: [
        { label: "确认(已确认)", value: "4" },
        { label: "挂起(稍后处理)", value: "2" },
        { label: "误报", value: "5" },
        { label: "突发事件处置", value: "0" },
      ],
      manageStation: this.$cache.local.get("manageStation"),
      manageStationSelect: this.$cache.local.get("manageStationSelect"),
      evtWebsoktList: [],
    };
  },
  watch: {
    "$store.state.manage.manageStationSelect": function (newVal, oldVal) {
      this.manageStationSelect = newVal;
      // this.queryParams.tunnelId = newVal;
      // this.queryParams.eventTypeId = "";
      this.getTunnelLane();
    },
  },
  created() {},
  mounted() {
    bus.$on("getPicId", (e) => {
      console.log(e, "e");
      this.eventId = typeof e == "String" ? Number(e) : e;
      this.init(e);
    });
    this.getTunnel();
    this.getEventTypeList();
    // 事件来源
    this.getDicts("sd_event_source").then((data) => {
      this.fromList = data.data;
    });
    this.getDicts("sd_direction").then((response) => {
      this.directionList = response.data;
    });
    this.getDicts("sd_event_grade").then((response) => {
      this.eventGradeList = response.data;
    });
    this.getDicts("sd_lane_one").then((data) => {
      this.chezhiLaneList2 = data.data;
    });
    // 三车道
    this.getDicts("sd_lane_two").then((data) => {
      this.chezhiLaneList3 = data.data;
    });
  },
  beforeCreate() {},
  destroy() {
    bus.$off("getPicId");
  },
  methods: {
    confidenceListRules(rule, value, callback) {
      console.log(value, "value");
      if (value) {
        const plateNumber =
          /^([京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}(([0-9]{5}[DF])|([DF]([A-HJ-NP-Z0-9])[0-9]{4})))|([京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}[A-HJ-NP-Z0-9]{4}[A-HJ-NP-Z0-9挂学警港澳]{1})$/;
        if (plateNumber.test(value)) {
          callback();
        } else {
          callback(new Error("请输入正确的车牌号，字母大写"));
        }
      }else{
        callback();
      }
    },
    getFrom(from) {
      for (let item of this.fromList) {
        if (from == item.dictValue) {
          return item.dictLabel;
        }
      }
    },
    init(id) {
      if (id) {
        const param = {
          id: id,
        };
        getEvent(id).then((res) => {
          console.log(res.data, "事件详情数据");
          this.prevControlType = res.data.prevControlType;
          this.detailsButton(res.data);
        });
      }
      this.details = true;
    },
    //详情弹窗
    detailsButton(item) {
      // 获取对应事件
      this.getEventType(item);
      console.log(item, "点击弹窗");
      this.imgUrlList = [];
      this.iconUrlListAll = [];
      this.miniDialog = true;
      this.detailsDisabled = true;
      item.reviewRemark = [];
      this.eventTypeId = item.eventTypeId;
      this.evtId = item.id;
      this.tunnelId = item.tunnelId;

      this.direction = item.direction;
      this.details = true;
      this.eventFormDetail = { ...item };
      console.log(this.eventFormDetail, "11111111111");
      console.log(this.eventFormDetail.continuedTime, "0000000000");
      this.eventFormDetail.eventState = 4;
      // if (item.prevControlType == 1) {
      //   this.getStrategyData(item);
      // } else {
      //   this.getReservePlanData();
      // }
      this.getReservePlanData();

      this.$nextTick(() => {
        if (this.$refs.swiperTop) {
          const swiperTop = this.$refs.swiperTop.$el.swiper;
          const swiperThumbs = this.$refs.swiperThumbs.$el.swiper;
          swiperTop.controller.control = swiperThumbs;
          swiperThumbs.controller.control = swiperTop;
          swiperThumbs.activeIndex = 0;
          swiperTop.activeIndex = 0;
        }
      });
      // this.getEventList();
      if (item.stakeNum) {
        let stake = "";

        let letterCount = this.countLetters(item.stakeNum.split("+")[0]);
        console.log("字母数量：" + letterCount);
        console.log(item.stakeNum.split("+")[0]);
        if (letterCount >= 2) {
          stake = item.stakeNum.split("+")[0].substr(2);
        } else if (letterCount >= 1) {
          stake = item.stakeNum.split("+")[0].substr(1);
        } else {
          stake = item.stakeNum.split("+")[0];
        }
        this.$set(this.eventFormDetail, "stakeNum1", stake);
        this.$set(
          this.eventFormDetail,
          "stakeNum2",
          item.stakeNum.split("+")[1]
        );
      }
      if (item.stakeEndNum) {
        this.$set(
          this.eventFormDetail,
          "stakeEndNum1",
          item.stakeEndNum.split("+")[0].substr(1)
        );
        this.$set(
          this.eventFormDetail,
          "stakeEndNum2",
          item.stakeEndNum.split("+")[1]
        );
      }
      this.title = item.eventTitle;
      // 获取车道
      this.getTunnelLane();
      // 获取实时视频
      this.getVideoUrl(item);
      // 获取实时视频截图
      this.getImgUrl(item);
      // this.getImgUrls(item);
    },
    getStrategyData(item) {
      console.log(item);
      let param = {
        tunnelId: item.tunnelId,
        direction: item.direction,
        eventType: item.eventTypeId,
      };
      getStrategyData(param).then((res) => {
        console.log(res.data, "策略列表");
        this.strategyList = res.data;
        this.eventFormDetail.currencyId = res.data[0].id;
      });
    },
    // 获取车道数
    getTunnelLane() {
      getTunnelLane(this.tunnelId).then((res) => {
        this.chezhiLaneList = [];
        if (res.data.lane == 1) {
          this.chezhiLaneList = this.chezhiLaneList1;
        } else if (res.data.lane == 2) {
          this.chezhiLaneList = this.chezhiLaneList2;
        } else if (res.data.lane == 3) {
          this.chezhiLaneList = this.chezhiLaneList3;
        }
      });
    },
    /** 所属隧道 */
    getTunnel() {
      // if (!this.queryParams.deptId) {
      listTunnels().then((response) => {
        this.tunnelList = response.rows;
      });
      // }
    },
    // 查询方向
    getDirection(num) {
      for (var item of this.directionList) {
        if (item.dictValue == num) {
          return item.dictLabel;
        }
      }
    },
    countLetters(string) {
      var pattern = /[A-Za-z]/g; // 匹配所有字母的正则表达式
      var match = string.match(pattern);
      return match ? match.length : 0;
    },
    eventIsShow(value, state) {
      if (value != null) {
        if (state != "0" && value.includes("其他")) {
          return true;
        }
      } else {
        return false;
      }
    },
    // 复核弹窗内单选改变事件
    eventStateChange() {
      if (this.eventFormDetail.eventState != 0) {
        this.eventFormDetail.currencyId = "";
      } else {
        if (this.ReservePlanList.length > 0) {
          this.eventFormDetail.currencyId = this.ReservePlanList[0].id;
        } else {
          this.eventFormDetail.currencyId = "";
        }
      }
      this.eventFormDetail.reviewRemark = [];
    },
    // 复核提交
    submitDialog() {
      console.log(this.eventFormDetail, "1123123");
      this.$refs["eventFormDetail"].validate((valid) => {
        if (valid) {
          this.$cache.local.set("currencyId", this.eventFormDetail.currencyId);
          const loading = this.$loading({
            lock: true,
            text: "Loading",
            spinner: "el-icon-loading",
            background: "rgba(0, 0, 0, 0.7)",
            target: ".hitchDialog",
          });
          if (
            this.eventFormDetail.stakeNum1 &&
            this.eventFormDetail.stakeNum2
          ) {
            this.eventFormDetail.stakeNum =
              "K" +
              this.eventFormDetail.stakeNum1 +
              "+" +
              this.eventFormDetail.stakeNum2;
          }
          if (
            this.eventFormDetail.stakeEndNum1 &&
            this.eventFormDetail.stakeEndNum2
          ) {
            this.eventFormDetail.stakeEndNum =
              "K" +
              this.eventFormDetail.stakeEndNum1 +
              "+" +
              this.eventFormDetail.stakeEndNum2;
          }
          if (this.eventFormDetail.reviewRemark.includes("其他")) {
            this.eventFormDetail.reviewRemark =
              this.eventFormDetail.reviewRemark.toString() +
              ":" +
              this.eventFormDetail.otherContent;
          } else {
            this.eventFormDetail.reviewRemark =
              this.eventFormDetail.reviewRemark.toString();
          }

          const currencyId = this.eventFormDetail.currencyId;
          if (this.eventFormDetail.laneNo) {
            this.eventFormDetail.laneNo =
              this.eventFormDetail.laneNo.toString();
          }
          updateEvent(this.eventFormDetail).then((response) => {
            this.processDialog = false;
            this.closeProcessDialog = false;
            this.processType = false;
            this.details = false;
            this.cameraPlayer = false;
            this.$modal.msgSuccess("修改成功");
            if (
              this.evtWebsoktList.length > 0 &&
              this.evtWebsoktList[0].ids == this.eventFormDetail.id
            ) {
              console.log("点复核提交 关弹窗");
              bus.$emit("closeDialog");
            }
            //主动安全
            //策略不为空
            // if (
            //   this.eventFormDetail.prevControlType == 1 &&
            //   currencyId &&
            //   this.eventFormDetail.eventState == 0
            // ) {
            //   let id = currencyId;
            //   handleStrategy(id).then((res) => {
            //     console.log(res);
            //     this.$modal.msgSuccess("下发指令成功");
            //   });
            // }
            loading.close();

            // 1.预案不为空
            // 2.当前状态为0
            // 3.普通事件
            if (currencyId && this.eventFormDetail.eventState == 0) {
              console.log("我跳转了啊~~");
              this.$router.push({
                path: "/emergency/administration/dispatch",
                query: { id: this.eventFormDetail.id },
              });
            }
            this.$cache.local.remove("currencyId");
          });
        }
      });
    },
    // 打开复核内详情
    openDoor(item) {
      // 点击查看按钮重置tab
      this.deviceIndexShow = 0;
      // this.activeName = "0";

      let lane = "";
      if (item.laneNo == null || item.laneNo.length == 0) {
        lane = "";
      } else {
        lane = item.laneNo.toString();
      }
      let query = {
        prevControlType: item.prevControlType,
        currencyId: item.currencyId,
        id: item.id,
        laneNo: lane,
      };
      examineDeviceDetail(query).then((res) => {
        console.log(res);
        this.DeviceDetail = res.data;
        this.activeName = res.data[0].tableName;
        this.dialogVisibleDevice = true;
      });
    },
    openProcess(type, id) {
      if (type && id) {
        this.processType = true;
        this.processDialog = true;
        const param = {
          id: id,
          eventState: 0,
        };
        updateEvent(param).then((res) => {
          this.$modal.msgSuccess("正在处理");
          this.evtHandle();
        });
      } else {
        if (this.processType == true) {
          this.processDialog = false;
          // this.details = true;
          // this.closeProcessDialog = false;
          this.processType = false;
        } else {
          this.processType = true;
          this.processDialog = true;
          // this.details = true;
          // this.closeProcessDialog = true;
        }
      }
    },
    // 复核内图片展示弹窗关闭事件
    handleCloseImg(done) {
      done();
    },
    reviewRemarkChange() {
      console.log(this.eventForm.reviewRemark);
    },
    /** 查询事件类型列表 */
    getEventTypeList() {
      listEventType().then((response) => {
        this.eventTypeData = response.rows;
      });
    },
    getEventTypeAll() {
      let prevControlType = {
        isUsable: "1",
      };
      listEventType(prevControlType).then((response) => {
        this.eventTypeDataList = [...response.rows];
      });
    },
    /** 查询事件类型列表 */
    getEventType(item) {
      let prevControlType = {
        isUsable: "1",
        prevControlType: item.prevControlType,
      };
      listEventType(prevControlType).then((response) => {
        this.eventTypeData = [...response.rows];
      });
    },
    getEvtType(num) {
      for (var item of this.eventTypeData) {
        if (num == item.id) {
          return item.eventType;
        }
      }
    },

    // 处置记录
    // getEventList() {
      // eventFlowList({ eventId: this.eventForm.id }).then((res) => {
      //   this.eventWarnList = res.rows;
      // });
    // },
    getReservePlanData() {
      this.ReservePlanList = [];
      this.eventFormDetail.currencyId = "";
      if (this.eventFormDetail.eventTypeId == 20) {
        this.eventFormDetail.laneNo = ["1", "2", "3"];
      }
      let data = {
        tunnelId: this.eventFormDetail.tunnelId,
        planTypeId: this.eventFormDetail.eventTypeId,
        direction: this.eventFormDetail.direction,
        eventGrade: this.eventFormDetail.eventGrade,
      };
      getReservePlanData(data).then((res) => {
        this.ReservePlanList = res.data;
        if (this.ReservePlanList.length > 0) {
          this.eventFormDetail.currencyId = this.ReservePlanList[0].id;
        } else {
          if (this.eventFormDetail.eventState == "0") {
            this.$modal.msgWarning("暂无相关预案");
          }
        }
      });
    },
    handleClickDevice(tab, event) {
      console.log(tab.index);
      this.deviceIndexShow = tab.index;
      this.tableKey = tab.index;
    },
    getImgUrl(item) {
      this.urlsList = [];
      this.urlsAll = [];
      const param = {
        businessId: item.id,
      };
      image(param).then((response) => {
        this.urls = response.data;
        if (response.data.length > 4) {
          this.arrowRight2 = true;
          for (let i = 0; i < this.urls.length; ) {
            this.urlsAll.push(this.urls.splice(0, 4));
          }
          this.urlsList = this.urlsAll[0];
          this.imgPage2 = 0;
        } else {
          this.arrowRight2 = false;
          this.urlsList = this.urls;
        }
      });
    },
    //关闭drawer
    handleClose(done) {
      done();
    },
    getVideoUrl(item) {
      this.cameraPlayer = false;
      console.log(item, "itemitem");
      // getEventCamera(item.tunnelId, item.stakeNum, item.direction).then((res)=>{
      //   getDeviceById(res.data[0].eqId).then((response)=>{
      //     console.log(response,"00000000000000000")
      //     displayH5sVideoAll(response.data.secureKey,'h5sVideo2',2);
      //   })
      // })

      this.videoList = [];
      getEventCamera(item.tunnelId, item.stakeNum, item.direction).then(
        (res) => {
          if (res.data) {
            // let videoId = res.data[0].eqId
            let videoId = "";
            for (let item of res.data) {
              videoId = item.eqId;
              videoStreaming(videoId).then((response) => {
                if (response.code == 200) {
                  console.log(response.data, "视频视频视频视频视频");
                  // return false;
                  if (response.data != null) {
                    this.videoList.push(response.data);
                    this.cameraPlayer = true;
                  }
                }
              });
            }
            console.log(this.videoList, " this.videoList");
          }
          console.log(this.videoList, "this.videoList");
        }
      );
    },
    // 点击缩略图
    clickImg(gImgUrl) {
      let imgurl = gImgUrl.substr(-3, 3);
      if (imgurl == "jpg") {
        this.alongImgUrl = gImgUrl;
        this.dialogVisibleImg = true;
      }
      console.log(imgurl);
    },
    getUrl(id) {
      const param3 = {
        businessId: id,
      };
      const param4 = {
        id: id,
      };
      image(param3).then((response) => {
        this.urls = response.data;
      });
      video(param4).then((response) => {
        if (response.data.videoUrl) {
          this.videoUrl = response.data.videoUrl;
        }
      });
    },
    changeEndTime() {
      let startTime = new Date(this.eventFormDetail.eventTime).getTime();
      let endTime = new Date(this.eventFormDetail.endTime).getTime();
      console.log(startTime, endTime);
      if (endTime < startTime) {
        this.$modal.msgWarning("结束时间必须大于开始时间");
        this.eventFormDetail.endTime = "";
      }
    },
    // 忽略事件
    handleIgnore(event) {
      if (event) {
        const param = {
          id: event.id,
          eventState: "2",
        };
        updateEvent(param).then((response) => {
          this.$modal.msgSuccess("已成功忽略");
        });
      }
      // this.$emit("closePicDialog");
      bus.$emit("closePicDialog");
      bus.$emit("forceUpdateTable", event.id);

      // bus.$emit("closeTableDialog");

      // this.eventPicDialog = false;
    },
    // 处理 跳转应急调度
    handleDispatch(event) {
      const param = {
        id: event.id,
        eventState: "0",
      };
      updateEvent(param).then(() => {
        this.$modal.msgSuccess("开始处理事件");
      });
      this.$router.push({
        path: "/emergency/administration/dispatch",
        query: { id: event.id },
      });
      if (this.eventMes.eventState == "3") {
        userConfirm(event.id).then(() => {});
      }
      // bus.$emit("closePicDialog");
      bus.$emit("closePicDialog");
      bus.$emit("closeDialog");
      // this.eventPicDialog = false;
    },
    // 弹摄像机弹窗
    openVideoDialog(id) {
      setTimeout(() => {
        bus.$emit("getVideoDialog", id);
      }, 200);
      bus.$emit("openVideoDialog");

      bus.$emit("closePicDialog");
    },
    closeDialogTable() {
      bus.$emit("closePicDialog");
      // this.eventPicDialog = false;
    },
    // 打开图片变视频弹窗
    openPicDialog(item) {
      console.log(item);
      if (!item.videoUrl && !item.imgUrl) {
        this.$message.warning("暂无视频");
      } else {
        this.videoUrl =
          item.videoUrl == undefined ? item.imgUrl : item.videoUrl;
        // this.videoUrl = item.videoUrl;
        this.picUrlDialog = true;
      }
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.details = false;
      this.cameraPlayer = false;
      this.processDialog = false;
      this.processType = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        currencyId: "",
        tunnelId: null,
        eventTypeId: null,
        eventTitle: null,
        eventTime: null,
        eventState: null,
        eventGrade: "0",
        eventLocation: null,
        eventDeath: null,
        eventInjured: null,
        eventDescription: null,
        reservePlanId: null,
        flowId: null,
        warningId: null,
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null,
        faultLocation: null,
        faultType: null,
        faultSource: null,
        faultFxtime: null,
        faultCxtime: null,
        eqTunnelId: null,
        faultTbr: null,
        faultTbtime: null,
        eqId: null,
        eqStatus: null,
        faultCode: null,
        faultLevel: null,
        falltRemoveStatue: null,
        faultDescription: null,
        faultStatus: 0,
      };
      this.fileList = [];
      this.removeIds = [];
      this.resetForm("form");
    },
  },
};
</script>

<style scoped lang="scss">
::v-deep .dialogForm .el-checkbox-button {
  // background: #052c4d;
}
.theme-dark .el-dialog .el-dialog__body .dialogForm .checkBox {
  display: unset !important;
  width: unset !important;
}
::v-deep .el-timeline-item__content {
  background-color: #022443;
}
.scrollbar_li {
  width: 145px;
  margin-right: 15px;
  display: inline-block;
  white-space: nowrap;
  video {
    width: 100%;
  }
}
::v-deep
  .el-table--striped
  .el-table__body
  tr.el-table__row--striped
  td.el-table__cell,
::v-deep .el-table tr {
  background: unset !important;
}
::v-deep .el-scrollbar__wrap {
  overflow-x: hidden;
}
::v-deep .el-scrollbar .el-scrollbar__wrap .el-scrollbar__view {
  white-space: nowrap;
}
::v-deep .el-carousel__arrow {
  background-color: rgba(31, 45, 61, 0.8);
}
::v-deep .el-carousel__arrow:hover {
  background-color: rgba(31, 45, 61, 0.8);
}
.gallery-thumbs {
  height: 56px;
  box-sizing: border-box;
  // padding: 10px 0;
}
.gallery-thumbs .swiper-slide {
  width: 25%;
  height: 100%;
  opacity: 0.4;
}
.gallery-thumbs .swiper-slide-active {
  opacity: 1;
}

.chuzhi {
  background: #05afe3;
}
.yzx {
  color: #45d20a;
}
.wzx {
  color: #666666;
}
.incHandBox {
  height: calc(100% - 40px);
  overflow: auto;
  .incHandContent {
    display: flex;
    // color: white;
    font-size: 12px;
    padding: 10px;
    .classification {
      .type {
        width: 50px;
        height: 50px;
        // background: rgba($color: #084e84, $alpha: 0.6);
        // border: 1px solid rgba($color: #39adff, $alpha: 0.6);
        text-align: center;
      }
      .yijian {
        color: white;
        width: 50px;
        background: linear-gradient(180deg, #1eace8 0%, #0074d4 100%);
        border: 1px solid #39adff;
        // padding: 10px;
        text-align: center;
      }
    }

    .heng1 {
      width: 20px;
      height: 1px;
      border-top: solid 1px #39adff;
    }
    .shu {
      width: 20px;
      border-left: solid 1px #39adff;
      border-bottom: solid 1px #39adff;
      margin-top: 20px;
    }
    .gxp {
      // margin-left: 20px;
      width: 77%;
      .contentList {
        display: block;
        margin-top: 4px;
        line-height: 40px;
        padding: 0 20px;
        border-radius: 3px;
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        img {
          width: 18px;
          height: 18px;
        }
      }
    }

    .contentList:nth-of-type(1) {
      margin-top: 0;
    }
  }
}
.formStyle {
  .el-form-item {
    margin-bottom: 1vh;
  }
}
::v-deep .el-form-item--medium .el-form-item__label {
  font-size: 0.7vw;
}
::v-deep .el-form-item--medium .el-form-item__content {
  font-size: 0.7vw;
}
::v-deep .el-tabs__header {
  margin: 0 0 8px !important;
}
.contentListBox {
  width: 100%;
  word-wrap: break-word;
  word-break: normal;
  overflow-y: auto;
  overflow-x: hidden;
  height: 68vh;
  //display: flex;
  .contentBox {
    display: inline-flex;
    margin-right: 0.5vw;
    margin-bottom: 10px;
    position: relative;
    border-radius: 2px;
    // width:24.6%;
    .video {
      width: 40%;
      height: 100%;
      float: left;
      text-align: center;
      font-size: 0.7vw;
      // color: #2aa6ff;
      .eventBox {
        display: flex;
        justify-content: space-between;
        align-items: center;
        .eventType {
          background: rgba(228, 14, 14, 0.4);
          font-size: 0.675rem;
          font-weight: 600;
          color: #fff;
          // padding:5px 10px;
          width: 60%;
          height: 3vh;
          line-height: 3vh;
        }
        div {
          background: rgba(228, 14, 14, 0.2);
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          font-size: 0.675rem;
          font-weight: 400;
          color: #fff;
          padding: 2px 10px;
          width: 40%;
        }
      }

      video {
        width: 100%;
        height: 100px;
        margin-top: 2px;
        float: left;
      }
      img {
        // width: 100%;
        height: 10vh;
        margin-top: 2px;
      }
    }

    .contentText {
      margin-top: 10px;
      font-size: 0.7vw;
      // color: #0087e7;
      margin-right: 20px;
      width: 60%;
      float: right;
      margin-left: 2px;
      .stateTab {
        position: absolute;
        top: -27px;
        right: -17px;
      }
      div {
        padding: 0.6vh 0;
        span {
          padding-left: 6px;
          font-weight: bold;
        }
      }
      .contentButton {
        display: flex;
        justify-content: space-between;
        width: 150px;
        div {
          width: 65px;
          height: 2vh;
          border-radius: 14px;
          color: white;
          display: flex;
          justify-content: center;
          align-items: center;
          cursor: pointer;
        }
        div:nth-of-type(1) {
          background: linear-gradient(180deg, #ba8400 0%, #fed11b 100%);
        }
        div:nth-of-type(2) {
          background: linear-gradient(180deg, #1eace8 0%, #0074d4 100%);
        }
      }
    }
  }
  .contentBox:nth-of-type(4n) {
    margin-right: 0px;
  }
}

.videoDialogBox {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  .swiper-slide {
    video {
      width: 100%;
      height: 100%;
    }
  }
  .processButton {
    position: absolute;
    top: 20px;
    right: -15px;
    width: 25px;
    height: 100px;
    cursor: pointer;
    background: #39adff;
    text-align: center;
    line-height: 18px;
    color: #fff;
  }
  .processButton::before {
    font-size: 14px;
    color: #fff;
  }
  .dialogBg2 {
    width: 59% !important;
    padding: 0px 10px 10px 10px !important;
    margin-left: 10px;
    // ::v-deep .el-carousel__container{
    //   height:378px;
    // }
    .picBox {
      height: 304px;
    }
    ::v-deep .el-image {
      height: 300px;
      width: 100%;
      image {
        width: 100%;
        height: 100%;
      }
    }
  }
  .dialogBg {
    background: #f7f7f7;
    height: 100%;
    width: 41%;
    color: #0087e7;
    padding: 0px 10px 10px 10px;
    span {
      color: #767676 !important;
      padding-left: 10px;
    }
    .leftVideo {
      width: 100%;
      height: 240px;
    }
    .picBox {
      width: 100%;
      // height: calc(24% - 25px);
      margin-top: 5px;
      // border: solid 1px red;
      // display: flex;
      // justify-content: center;
      // align-items: center;
      .picList {
        width: 100%;
        height: 100%;
        // display: flex;
        // justify-content: left;
        > div {
          overflow: hidden;
          margin-left: 10px;
          width: 21%;
          height: 100%;
          display: inline-block;
          > .el-image {
            width: auto;
            height: 100%;
            overflow: hidden;
            // border: solid 1px blue;
            margin: 0 auto;
          }
        }
      }
      .turnPages {
        width: 20px !important;
        height: 20px !important;
        border: solid 1px #0087e7;
        border-radius: 10px;
        text-align: center;
        cursor: pointer;
        caret-color: rgba(0, 0, 0, 0);
      }
      .turnPages:hover {
        background: #0087e7;
        color: #fff;
      }
      .noPic {
        border: solid 1px #0087e7;
        display: flex;
        justify-content: center;
        align-items: center;
        img {
          width: 50%;
        }
      }
    }
  }
}
.dialogForm {
  width: 100%;
  height: calc(44% - 50px);
  background: #f7f7f7;
  padding: 10px 10px 0;
  overflow-y: auto;
  overflow-x: hidden;
  margin-top: 10px;
  .el-input {
    width: 100%;
    .el-input--medium .el-input__inner {
      width: 93px;
    }
  }
  .el-form-item {
    margin-bottom: 16px !important;
  }
  .evtCarStyle {
    width: calc(100% - 10px);
    height: 40px;
    padding: 10px;
    overflow-y: auto;
    padding-bottom: 0;
    border-radius: 4px;
    > div {
      display: flex;
      margin-bottom: 5px;
      .evtNum {
        width: 35px;
        height: 35px;
        // border: solid 1px #ccc;
        text-align: center;
        line-height: 35px;
      }
      div {
        margin-left: 5px;
      }
    }
  }
}
.dialogFooterButton {
  width: 100%;
  height: 30px;
  display: flex;
  justify-content: right;
  margin-bottom: 15px;
  div {
    margin-right: 20px;
    width: 80px;
    height: 28px;
    border-radius: 14px;
    text-align: center;
    line-height: 28px;
    color: white;
    cursor: pointer;
  }
  div:nth-of-type(1) {
    background: linear-gradient(180deg, #ba8400 0%, #fed11b 100%);
  }
  div:nth-of-type(2) {
    background: linear-gradient(180deg, #1eace8 0%, #0074d4 100%);
  }
  div:nth-of-type(3) {
    background: linear-gradient(180deg, #1eace8 0%, #0074d4 100%);
  }
}
.el-dialog__headerbtn {
  z-index: 3;
}

::v-deep .detailsDialog {
  width: 60%;
  position: absolute;
  left: 20%;
  .el-dialog:not {
    margin-top: 0px !important;
  }
}
::v-deep .detailsDialog .el-dialog {
  // height: calc(100% - 8vh) !important;
  .el-dialog__body {
    // max-height: 88vh;
    padding: 0 !important;
  }
}

.animationDialog {
  z-index: 2008 !important;
  height: 92%;
  width: 480px;
  // transform: translateX(1330px);
  animation: mymove 0.3s linear;
  position: absolute;
  left: 66%;
}
@keyframes mymove {
  0% {
    left: 60%;
  }
  100% {
    left: 69%;
  }
}
.el-select-dropdown {
  z-index: 2010 !important;
}
.eventTypeButton {
  height: 2.6vh;
  line-height: 2.6vh;
  border-radius: 2px;
  cursor: pointer;
  padding: 0px 10px;
  font-size: 0.7vw;
}
// ::v-deep .vue-treeselect__control {
//   height: 4vh;
// }
// ::v-deep .vue-treeselect__placeholder,
// .vue-treeselect__single-value {
//   line-height: 4vh;
// }
// ::v-deep .el-input--small .el-input__inner {
//   line-height: 3vh;
//   height: 4vh;
//   font-size: 0.7vw;
// }
// ::v-deep .el-input--medium .el-input__inner {
//   line-height: 3vh;
//   height: 4vh;
//   font-size: 0.7vw;
// }
.butBox {
  width: 280px;
  display: flex;
  padding: 4px 4px;
  background: #9ecced;
  border-radius: 10px;
  margin-bottom: 10px;
  font-size: 14px;
  // justify-content: space-between;
  div {
    padding: 6px 10px;
    color: #fff;
    letter-spacing: 1px;
    cursor: pointer;
  }

  .xz {
    background: #285b8d;
    border-radius: 10px;
  }
}
.incHandContent {
  display: flex;
  color: #333333;
  font-size: 12px;
  padding: 10px;
  .classification {
    .type {
      width: 50px;
      height: 50px;
      // background: #f2f8ff;
      border: 1px solid #39adff;
      text-align: center;
      color: #fff;
    }
    .yijian {
      width: 50px;
      background: linear-gradient(180deg, #1eace8 0%, #0074d4 100%);
      border: 1px solid #39adff;
      color: #fff;
      text-align: center;
      transform: translateY(-2px);
      cursor: pointer;
    }
    .hulue {
      width: 50px;
      background: linear-gradient(180deg, #e5a535 0%, #ffbd49 100%);
      border: 1px solid #ebab3a;
      color: #fff;
      text-align: center;
      transform: translateY(-2px);
      cursor: pointer;
    }
  }

  .heng1 {
    width: 20px;
    height: 1px;
    border-top: solid 1px #39adff;
  }
  .shu {
    width: 20px;
    border-left: solid 1px #39adff;
    border-bottom: solid 1px #39adff;
    margin-top: 20px;
  }
  .contentList {
    display: block;
    margin-top: 4px;
    line-height: 40px;
    padding: 0 20px;
    // background: #f2f8ff;
    color: #fff;
    border: solid 1px #39adff;
    border-radius: 3px;
    width: 300px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    img {
      width: 18px;
      height: 18px;
    }
  }
  .contentList:nth-of-type(1) {
    margin-top: 0;
  }
}
.addClass {
  .el-select {
    width: 250px;
  }

  .el-input {
    width: 250px !important;
  }

  .el-date-editor.el-input,
  .el-date-editor.el-input__inner {
    width: 250px !important;
  }
}

.circle {
  width: 10px;
  height: 10px;
  border-radius: 5px;
  display: inline-block;
}

.detailsText {
  display: inline-block;
  margin-left: 20px;
  line-height: 40px;
  width: 100px;
}

hr {
  border: solid 1px #ddd;
}

.rowClass {
  border-top: solid 1px #ddd;
  border-bottom: solid 1px #ddd;
  height: 40px;
  margin-top: 10px;
}

.eventClass {
  height: 30px;
  border-right: solid 1px #ddd;
  width: 100%;
  text-align: center;
  margin-top: 5px;
  line-height: 30px;
}

.eventTitleClass {
  height: 40px;
  background-color: #eeeeee;
  line-height: 40px;
  text-align: center;
}

.video {
  height: 300px;
  border-radius: 0;
  padding: 10px;
  margin-top: 0;
}

.image3 {
  padding: 5px;
  height: 49%;
  // border: solid 1px green;
  width: 100%;
}

.card-box {
  width: 30%;
  text-align: center;
  font-weight: bold;
}

.EquipStatistics {
  width: 200px;
  height: 40px;
  background-image: url(../../assets/cloudControl/shebeiWarning.png);
  color: white;
  text-align: center;
  line-height: 40px;
  font-weight: 400;
  font-size: 16px;
  margin-left: 14px;

  > span {
    font-size: 24px;
    font-weight: 600;
    vertical-align: middle;
  }
}

.warningStatistics {
  line-height: 60px;
  font-size: 14px;
  // color: #606266;
  font-weight: 700;
}

.eventTitle {
  padding: 15px 0;
  font-size: 18px;
  font-weight: 400;
  color: #303133;
}

.card {
  position: relative;
  width: 100%;
  padding: 20px;
  margin-top: 20px;
  border-radius: 10px;
  background-color: #f0f0f0;
  .card-col {
    margin-top: 10px;
    display: flex;
    color: #79949c;
    div {
      width: 33%;
      span {
        color: black;
        margin-left: 10px;
      }
    }
  }
  .card-cols {
    margin-top: 10px;
    display: flex;
    div {
      width: 50%;
    }
    .col-test {
      text-align: right;
      color: #79949c;
    }
    img {
      width: 100px;
      margin-left: 20px;
    }
  }

  .icon {
    position: absolute;
    top: 0;
    right: 30px;
    background-image: url(../../assets/icons/svg/u954.svg);
    background-size: 100%;
  }
}

.disabledButton {
  cursor: no-drop;
  pointer-events: none;
}
::-webkit-scrollbar {
  width: 6px;
}
// .videoDialog {
//   height: 92%;
// }
.videoDialogClass {
  width: 100%;
  height: 100%;

  video {
    width: 100%;
    height: auto;
    max-height:550px;
  }
}
.el-carousel {
  height: 100%;
}
::v-deep .el-carousel__indicators {
  display: none;
}
.topTxt {
  margin-left: 7px;
  margin-top: 10px;
  font-size: 16px;
  background-image: url(../../assets/cloudControl/cardTitle.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  text-align: center;
  width: 139px;
  height: 30px;
  line-height: 30px;
}
.searchSafeWarn {
  top: 6% !important;
  right: 0.8% !important;
  width: 453px !important;
  .el-checkbox + .el-checkbox {
    margin-left: 0 !important;
  }
}
.hitchDialog {
  ::v-deep .el-dialog__body {
    height: 70vh !important;
    overflow: auto !important;
  }
  ::v-deep .el-card {
    margin-bottom: 10px !important;
  }
}
.evtInfo {
  ::v-deep .el-dialog__body {
    max-height: 70vh;
    overflow: auto;
  }
}
.detailsDialog {
  ::v-deep .el-dialog__body {
    max-height: 90vh;
    overflow: auto;
  }
}
::v-deep .explain-table {
  .el-dialog__body {
    max-height: 78vh;
    overflow: auto;
  }
}
::v-deep .inputNumStyle {
  .el-input-group__prepend {
    padding: 0 0px 0 16px;
  }
  .el-input__inner {
    padding: 0 15px 0 10px;
  }
}
</style>
