<template>
  <div class="wrapper">
    <div style="position: relative">
      <div id="container" class="map"></div>
    </div>
    <div v-if="yjhhList.length > 0" v-drag class="yjhhDialog">
      <div class="yjhhTitle" style="color: #FFF; font-size: 18px;">一键喊话列表</div>
      <div class="yjhhCard">
        <div class="yjhhContent" v-for="(item,index) in yjhhList" :key="index">
          <div class="yjhhName">{{ item.name || item.cameraName }}</div>
          <img @click="delList(item,index)" class="yjhhImg" src="@/assets/index/marker_close.png">
        </div>
      </div>
      <div class="yjhhHand">
        <div class="yjhhButton" v-if="yjhhButton" @click="yjhhList = [];">取消</div>
        <div class="yjhhButton" v-if="yjhhButton" @click="openYjhh">开始喊话</div>
        <div class="yjhhButton" v-if="!yjhhButton" @click="closeYjhh">关闭喊话</div>
      </div>
    </div>
    <div v-if="show" class="dialog" @click="closeBox">
      <div class="dialog_wrapper">
        <div class="dialog_body" @click="stopPropagation">
          <div class="dialog_header">
            <div class="hed_left">
              <img src="@/assets/index/marker_event.png" alt="" />
              <p>{{ detailData.cameraAddress }}</p>
            </div>
            <img style="cursor: pointer" src="@/assets/index/marker_close.png" alt="" @click="closeBox" />
          </div>
          <div class="dialog_content" v-if="detailData.id">
            <div>
              <div class="cell">
                <p class="label">事件编号</p>
                <p class="value">{{ detailData.id }}</p>
              </div>
              <div class="cell">
                <p class="label">事件类型</p>
                <p class="value">{{ detailData.kindName }}</p>
              </div>
              <div class="cell">
                <p class="label">发生位置</p>
                <p class="value">{{ detailData.cameraAddress }}</p>
              </div>
              <div class="cell">
                <p class="label">监控</p>
                <p class="value">{{ detailData.cameraName }}</p>
              </div>
              <div class="cell">
                <p class="label">发生时间</p>
                <p class="value">{{ detailData.createTime }}</p>
              </div>
              <div class="cell">
                <p class="label">处理人</p>
                <p class="value">{{ detailData.operator }}</p>
              </div>
              <div class="cell">
                <p class="label">处理时间</p>
                <p class="value">{{ detailData.finishTime }}</p>
              </div>
              <div class="cell">
                <p class="label">事件状态</p>
                <p class="value" style="color: #f4516c">
                  {{ detailData.operateStatusName }}
                </p>
              </div>
            </div>
            <div class="camera">
              <div>
                <div class="type">
                  <!-- <div class="dot org"></div> -->
                  <p>监控抓拍图</p>
                </div>
                <el-image style="width: 100%; height: 150px; margin-top: 10px" :src="detailData.picture">
                </el-image>
                <div class="btn-box">
                  <div @click="monitor(detailData)">
                    <img src="../../assets/index/ssjk.png" style="margin-right: 5px" alt="" />
                    实时监控
                  </div>
                  <div class="open" v-if="broadcast == true && detailData.isOpen == true"
                    @click="openBroadcast(detailData)">
                    <img src="../../assets/index/gbgj.png" style="margin-right: 5px" alt="" />人工喊话
                  </div>
                  <div class="close" v-if="broadcast != true && detailData.isOpen == true" @click="closeBroadcast()">
                    <img src="../../assets/index/gbz.png" style="margin-right: 5px" alt="" />广播中
                  </div>
                  <div class="open" v-if="detailData.isOpen == true" @click="addList(detailData)">
                    加入喊话列表
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="dialog_content nothing" v-else>暂无事件</div>
        </div>
      </div>
    </div>

    <div class="video-content" v-drag v-if="videoShow">
      <div class="closeVideo">
        <i class="el-icon-close" @click="videoClose(detailData)"></i>
      </div>
      <video ref="test" id="hls-video1" width="600" height="400" class="video-js vjs-default-skin vjs-big-play-centered"
        playsinline webkit-playsinline controls autoplay muted preload="auto" x-webkit-airplay="true"
        x5-video-player-fullscreen="true" x5-video-player-typ="h5" style="width: 100%; height: 100%"></video>
      <div class="bottom">
        <div class="address" :title="detailData.name || detailData.cameraAddress || detailData.address || '未知摄像头'">
          <img src="../../assets/index/address.png" alt="" />
          {{ detailData.name || detailData.cameraAddress || detailData.address || "未知摄像头" }}
        </div>
        <!-- <div class="caozuo">
          <div class="control" @click="shortScreen(detailData)">一键截图</div>
          <div class="control" @click="shangbao()">上报事件</div>
          <div class="control" @click="control()">
            <img src="../../assets/direction/9.png" style="width: 14px; height: 14px" alt="" />
            云控制台
          </div>
          <div class="open guangbo" v-if="broadcast == true && detailData.isOpen == true"
            @click="openBroadcast(detailData)">
            <img src="../../assets/index/gbgj.png" style="margin-right: 5px" alt="" />人工喊话
          </div>
          <div class="close guangbo" v-if="broadcast != true && detailData.isOpen == true" @click="closeBroadcast()">
            <img src="../../assets/index/gbz.png" style="margin-right: 5px" alt="" />广播中
          </div>
          <div class="control" v-if="detailData.isOpen == true" @click="addList(detailData)">
            加入喊话列表
          </div>
        </div> -->
      </div>
      <div class="bottom1" v-if="this.hasChildren == 1">
        <div class="direction">
          <div class="card1">
            <div class="button1" v-for="(item, index) in buttonList" :key="index" :title="item.name"
              @mousedown="mouseDown(item, detailData)" @mouseup="mouseUp(item, detailData)">
              <img v-if="item.state == 1" :src="item.url" alt="" />
              <img v-if="item.state == 2" :src="item.url1" alt="" />
              <!-- <div class="name" v-if="item.state == 1">{{ item.name }}</div>
              <div class="name1" v-if="item.state == 2">停止</div> -->
            </div>
          </div>
          <div class="card1 card2">
            <div class="button1" v-for="(item, index) in buttonList2" :key="index" :title="item.name"
              @mousedown="mouseDown(item, detailData)" @mouseup="mouseUp(item, detailData)">
              <img v-if="item.state == 1" :src="item.url" alt="" />
              <img v-if="item.state == 2" :src="item.url1" alt="" />
              <!-- <div class="name" v-if="item.state == 1">{{ item.name }}</div>
              <div class="name1" v-if="item.state == 2">停止</div> -->
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="radio-content" v-if="radioShow">
      <div class="top" style="
          width: 100%;
          display: flex;
          align-items: center;
          justify-content: space-between;
        ">
        <div class="name" v-if="hanhua == true">选择同时人工喊话的监控点位</div>
        <div class="name" v-if="hanhua == false">多监控点位，同时人工喊话</div>
        <i class="el-icon-close" @click="cancel"></i>
      </div>

      <div class="monitor" style="width: 100%; display: flex; align-items: center">
        监控点位：
        <!-- <el-cascader
          v-model="radioList"
          placeholder="选择监控点位"
          :show-all-levels="false"
          :props="prop"
          filterable
          clearable
        ></el-cascader> -->
        <el-select v-model="radioList" multiple filterable placeholder="选择监控点位">
          <el-option v-for="item in options" :key="item.cameraId" :label="item.typeName" :value="item.cameraId">
          </el-option>
        </el-select>
      </div>
      <div class="bottom" style="width: 40%; justify-content: space-around" v-if="hanhua == true">
        <el-button type="info" size="medium" @click="cancel">取消</el-button>
        <el-button type="primary" size="medium" @click="nextStep">一键喊话</el-button>
      </div>
      <div class="bottom" style="width: 40%; justify-content: space-around" v-if="hanhua == false">
        <el-button type="primary" size="medium" @click="backStep">一键关闭喊话</el-button>
      </div>
    </div>
    <div class="video-history" v-drag v-if="openHistoryShow">
      <div class="closeVideo">
        <i class="el-icon-close" @click="closeHistory"></i>
      </div>
      <video id="hls-video2" width="600" height="400" class="video-js vjs-default-skin vjs-big-play-centered"
        playsinline webkit-playsinline controls autoplay muted preload="auto" x-webkit-airplay="true"
        x5-video-player-fullscreen="true" x5-video-player-typ="h5" style="width: 100%; height: 100%"></video>
      <div class="bottom">
        <el-select v-model="historyMonitor" filterable size="small" placeholder="选择监控点位">
          <el-option v-for="item in options1" :key="item.cameraId" :label="item.typeName" :value="item.cameraId">
          </el-option>
        </el-select>
        <div class="time">
          <el-date-picker v-model="timeDate" type="datetimerange" size="small" range-separator="-"
            start-placeholder="开始时间" end-placeholder="结束时间">
          </el-date-picker>
        </div>
        <div class="playHistory">
          <el-button type="primary" plain size="small" @click="playHistory">播放</el-button>
        </div>
      </div>
    </div>
    <!-- <div
      :class="['switch-title', mockData.length == 1 ? 'switch-title1' : (mockData.length == 2 ? 'switch-title2' : (mockData.length == 3 ? 'switch-title3' : 'switch-title4'))]">
      <div style="display:flex;">
        <div :class="['card', act == item.typeId ? 'card1' : '']" @click="changeAct(item)"
          v-for="(item, index) in mockData" :key="index">
          <img :src="item.url" @mouseover="showNextMenu(item)" />
        </div>
      </div>

      <div :class="['card2', act == 4 ? 'card1' : '']" @click="changeAct({typeName: '智慧渣土车',typeId: 4})"
        style="margin-top:10px;border-radius: 20px;" v-if="showMenu">
        <img src="@/assets/index/title4.png" />
      </div>
    </div> -->
    <!-- <div :class="['switch-box', bottomVisib ? 'switch-box' : 'switch-box']">
      <el-checkbox-group v-model="selectList" @change="typeChange">
        <el-checkbox :label="1">有事件监控点位</el-checkbox>
        <el-checkbox :label="2">无事件监控点</el-checkbox>
        <el-checkbox :label="3">离线设备</el-checkbox>
        <el-checkbox :label="4" v-if="!bottomVisib">未绑定广播设备</el-checkbox>
      </el-checkbox-group>
    </div> -->
    <!-- <div :class="['switch-name', bottomVisib ? 'switch-name1' : 'switch-name']">
      <div class="name" @click="shout" v-if="!bottomVisib">多点位一键喊话</div>
      <div class="monitor" @click="openHistoryShow = true">监控回放</div>
    </div> -->
    <!-- 弹窗 -->
    <el-dialog title="上报事件" :visible.sync="dialogVisible" width="30%" :before-close="close1" :modal="false"
      :show-close="false">
      <div>
        事件类型:
        <el-select v-model="form.kind" size="small" placeholder="请选择">
          <el-option v-for="item in newOptions" :key="item.eventType" :label="item.typeName" :value="item.eventType">
          </el-option>
        </el-select>
      </div>
      <div class="upload">
        <span style="margin-right: 5px">事件图片:</span>
        <el-upload class="avatar-uploader" action="http://1.15.3.38:19500/event/feedback/api/image/upload"
          :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
          <img v-if="form.picture" :src="form.picture" class="avatar" />
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="close1">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import mapMarker from "@/assets/direction/9.png";
import AMap from "AMap";
import {
  getCameraVideo,
  personPlayOnList,
  stopPersonPlay,
  CameraShowOne,
  CameraShowNext,
  personPlayOnByList,
  cloud,
  cameraByType,
  playbackURLs,
  uploadEvent,
  eventTypeList
} from "@/api/api";
import html2canvas from 'html2canvas'

export default {
  name: "WarnMap",
  props: ["event", "cameraList", "changeJwdData"],
  watch: {
    cameraList: {
      immediate: true,
      deep: true,
      handler(val) {
        console.log('val---------', val)
        let _this = this;
        // 清空地图
        if (_this.map) {
          _this.map.remove(_this.markers);
        }
        // 遍历判断点位
        val.forEach((value) => {
          if (
            value.lng !== "0" &&
            value.lat !== "0" &&
            value.lng !== null &&
            value.lat !== null
          ) {
            let marker;
            // 普通点
            var normalMarker = new AMap.Marker({
              anchor: "bottom-center",
              // offset: [0, -15],
            });


            let icon = new AMap.Icon({
              size: new AMap.Size(26, 26),
              image: mapMarker,
              imageSize: new AMap.Size(26, 26),
            });
            // let labelOffset = new AMap.Pixel(0, -2);
            marker = new AMap.Marker({
              icon: icon,
              position: [value.lng, value.lat],
              offset: new AMap.Pixel(-13, -30),
              clickable: true,
              // label: {
              //   direction: "top",
              //   content: value.name,
              //   offset: labelOffset,
              // },
            });
            marker.on("mouseover", function () {
              var position = [Number(value.lng), Number(value.lat)];
              if (position) {
                if (value.name !== undefined) {
                  normalMarker.setContent(
                    '<div class="amap-info-window">' +
                    value.name +
                    '<div class="amap-info-sharp"></div>' +
                    "</div>"
                  );
                } else {
                  normalMarker.setContent(
                    '<div class="amap-info-window">' +
                    value.name +
                    '<div class="amap-info-sharp"></div>' +
                    "</div>"
                  );
                }
                normalMarker.setPosition(position);
                _this.map.add(normalMarker);
              }
            });
            marker.on("mouseout", function () {
              _this.map.remove(normalMarker);
            });
            AMap.event.addListener(marker, "click", function () {
              // this.markerClick(value)
              // console.log(value);
              _this.detailData = value;
              _this.monitor(value);
              _this.map.setCenter([value.lng, value.lat]);
              // _this.getPosition(event)
              //得到的数据
            });

            //添加marker点击事件
            // marker.on("click", this.markerClick(value));
            _this.markers.push(marker);
            // 最后一个
            marker.setMap(this.map);
            _this.map.setCenter([value.lng, value.lat]);
          }
        });
      },
    },
    changeJwdData: {
      immediate: true,
      deep: true,
      handler(val) {
        if (val && val.length > 0) {
          this.map.setCenter(val);
        }
      },
    }
  },
  data() {
    return {
      selectList: [1, 2, 3, 4],
      markers: [],
      dialogEvent: {},
      show: false,
      detailData: {},
      videoShow: false,
      nowPlayVideoUrl: "",
      player: null,
      broadcast: true,
      broMsg: "",
      map: null,
      mockData: [],
      act: 1,
      radioShow: false,
      hanhua: true,
      broMsg1: {},
      radioList: [],
      prop: {
        multiple: true,
        label: "typeName",
        value: "cameraId",
        emitPath: false,
        lazy: true,
        lazyLoad: (node, resolve) => {
          console.log("node---", node);
          if (node.level == 0) {
            let params = {
              typeName: "",
              typeId: Number(this.act + 1),
            };
            CameraShowOne(params).then((res) => {
              let options = res.data.map((item) => {
                item.leaf = item.hasChildren;
                return item;
              });
              return resolve(options);
            });
          }
          if (node.level != 0) {
            if (node.data.id) {
              CameraShowNext({
                id: node.data.id,
                typeId: Number(this.act + 1),
              }).then((res) => {
                console.log(res);
                let arr = res.data.map((item) => ({
                  leaf: item.hasChildren,
                  id: item.id ? item.id : "",
                  typeName: item.typeName,
                  cameraId: item.cameraId ? item.cameraId : "",
                }));
                return resolve(arr);
              });
            } else {
              return resolve([]);
            }
          }
        },
      },
      buttonList: [
        {
          url: require("../../assets/direction/5.png"),
          url1: require("../../assets/direction/1-5.png"),
          name: "左上",
          command: "LEFT_UP",
          state: 1,
        },
        {
          url: require("../../assets/direction/1.png"),
          url1: require("../../assets/direction/1-1.png"),
          name: "向上",
          command: "UP",
          state: 1,
        },
        {
          url: require("../../assets/direction/6.png"),
          url1: require("../../assets/direction/1-6.png"),
          name: "右上",
          command: "RIGHT_UP",
          state: 1,
        },
        {
          url: require("../../assets/direction/3.png"),
          url1: require("../../assets/direction/1-3.png"),
          name: "向左",
          command: "LEFT",
          state: 1,
        },
        {
          url: require("../../assets/direction/9.png"),
          url1: require("../../assets/direction/9.png"),
          state: 1,
        },
        {
          url: require("../../assets/direction/4.png"),
          url1: require("../../assets/direction/1-4.png"),
          name: "向右",
          command: "RIGHT",
          state: 1,
        },
        {
          url: require("../../assets/direction/7.png"),
          url1: require("../../assets/direction/1-7.png"),
          name: "左下",
          command: "LEFT_DOWN",
          state: 1,
        },
        {
          url: require("../../assets/direction/2.png"),
          url1: require("../../assets/direction/1-2.png"),
          name: "向下",
          command: "DOWN",
          state: 1,
        },
        {
          url: require("../../assets/direction/8.png"),
          url1: require("../../assets/direction/1-8.png"),
          name: "右下",
          command: "RIGHT_DOWN",
          state: 1,
        },
      ],
      buttonList2: [
        {
          url: require("../../assets/direction/bd1.png"),
          url1: require("../../assets/direction/bd2.png"),
          name: "焦距变大",
          command: "ZOOM_IN",
          state: 1
        },
        {
          url: require("../../assets/direction/bx1.png"),
          url1: require("../../assets/direction/bx2.png"),
          name: "焦距变小",
          command: "ZOOM_OUT",
          state: 1
        },
        {
          url: require("../../assets/direction/qy1.png"),
          url1: require("../../assets/direction/qy2.png"),
          name: "焦点前移",
          command: "FOCUS_NEAR",
          state: 1
        },
        {
          url: require("../../assets/direction/hy1.png"),
          url1: require("../../assets/direction/hy2.png"),
          name: "焦点后移",
          command: "FOCUS_FAR",
          state: 1
        },
        {
          url: require("../../assets/direction/kd1.png"),
          url1: require("../../assets/direction/kd2.png"),
          name: "光圈扩大",
          command: "IRIS_ENLARGE",
          state: 1
        },
        {
          url: require("../../assets/direction/sx1.png"),
          url1: require("../../assets/direction/sx2.png"),
          name: "光圈缩小",
          command: "IRIS_REDUCE",
          state: 1
        },
      ],
      params: {
        action: 0,
        cameraId: "",
        command: "",
      },
      hasChildren: null,
      options: [],
      options1: [],
      historyMonitor: "",
      timeDate: [],
      nowPlayVideoUrl1: "",
      player1: null,
      openHistoryShow: false,
      dialogVisible: false,
      form: {
        kind: 1,
        picture: "",
        cameraId: "",
      },
      // 事件类型
      newOptions: [],
      bottomVisib: false,
      yjhhList: [],
      yjhhButton: true,
      yjhhMsg: "",
      showMenu: false
    };
  },
  beforeDestroy() {
    if (this.map) {
      this.map.destory();
    }
  },
  created() {
    // let allocationList = JSON.parse(localStorage.getItem('accountInfo')).allocationList
    // this.mockData = allocationList.map((item) => {
    //   if (item.typeName == "路长") {
    //     item.url = require("@/assets/index/title1.png")
    //   } else if (item.typeName == "河长") {
    //     item.url = require("@/assets/index/title2.png")
    //     this.act = 2
    //   } else if (item.typeName == "库长") {
    //     item.url = require("@/assets/index/title3.png")
    //   } else if (item.typeName == "智慧渣土车") {
    //     item.url = require("@/assets/index/title4.png")
    //     this.act = 4
    //   }
    //   return item
    // })
    // if (JSON.parse(localStorage.getItem('accountInfo')).level == 0) {
    //   this.mockData.pop()
    //   this.changeAct(this.mockData[0])
    // } else {
    //   if (JSON.parse(localStorage.getItem('accountInfo')).level == 2) {
    //     this.changeAct(this.mockData[0])
    //     this.bottomVisib = true
    //   } else if (JSON.parse(localStorage.getItem('accountInfo')).level != 2) {
    //     this.changeAct(this.mockData[0])
    //     // this.bottomVisib = true
    //   } else {
    //     this.bottomVisib = false
    //   }
    // }

    console.log(this.mockData)
  },
  mounted() {
    this.map = new AMap.Map("container", {
      zoom: 16, // 级别
      center: [119.722281, 30.232712], // 中心点坐标
      viewMode: "3D", // 使用3D视图
      mapStyle: "amap://styles/darkblue",
    });
    this.init();
  },
  methods: {
    showNextMenu(item) {
      console.log(item)
      if (item.typeName == "路长" && JSON.parse(localStorage.getItem('accountInfo')).level == 0) {
        this.showMenu = true
      }

    },
    shangbao() {
      this.form.kind = null
      this.dialogVisible = true
      eventTypeList().then((res) => {
        if (res.success) {
          this.newOptions = res.data.slice(1)
        }
      })
    },
    addList(val) {
      if (this.yjhhButton == false) {
        this.$message({
          type: "warning",
          message: "请先关闭当前喊话再进行添加",
        });
        return
      }
      if (this.yjhhList.length > 0) {
        if (JSON.stringify(this.yjhhList).indexOf(JSON.stringify(val)) == -1) {
          this.yjhhList.push(val)
        } else {
          this.$message({
            type: "warning",
            message: "该点位已加入一键喊话列表",
          });
        }
      } else {
        this.yjhhList.push(val)
      }
    },
    delList(val, index) {
      if (this.yjhhButton == false) {
        this.$message({
          type: "warning",
          message: "请先关闭当前喊话再进行删除",
        });
        return
      }
      this.yjhhList.map((item) => {
        if (item.cameraId == val.cameraId) {
          this.yjhhList.splice(index, 1)
        }
      })
    },
    openYjhh() {
      let hhList = []
      this.yjhhList.map((item) => {
        hhList.push(item.cameraId)
      })
      // this.$confirm("确认开启一键喊话吗?", "提示", {
      //     confirmButtonText: "确定",
      //     cancelButtonText: "取消",
      //     type: "warning",
      //   })
      //     .then(() => {
      let params = {
        cameraId: hhList,
        eventType: "",
        broMsg: "",
      };
      personPlayOnByList(params).then((res) => {
        console.log(res);
        if (res.code == 200) {
          this.yjhhMsg = res.data;
          this.yjhhButton = false;
        } else {
          this.$message({
            type: "error",
            message: res.msg,
          });
        }
      });
      // })
      // .catch(() => {
      //   this.$message({
      //     type: "info",
      //     message: "已取消开启一键喊话",
      //   });
      // });
    },
    closeYjhh() {
      let params = {
        broMsg: this.yjhhMsg,
      };
      stopPersonPlay(params).then((res) => {
        console.log(res);
        this.yjhhButton = true
      });
    },

    init() {
      let params = {};
      params.deviceClassifyIds = [];
      params.name = '';
      cameraByType(params).then((res) => {
        if (res.code == 200) {
          this.options1 = res.data.dataList;
          res.data.dataList.map((item) => {
            if (item.isOpen == true) {
              this.options.push(item);
            }
          });
        }
      });
    },
    playHistory() {
      let start = new Date(this.timeDate[0]).getTime();
      let end = new Date(this.timeDate[1]).getTime();
      console.log(new Date(this.timeDate[0]).toISOString());
      console.log(new Date(this.timeDate[1]).toISOString());
      let a = new Date(this.timeDate[0]);
      let b = new Date(this.timeDate[1]);
      if (end - start <= 8 * 3600 * 1000) {
        let params = {};
        params.beginTime =
          a.getFullYear() +
          "-" +
          (a.getMonth() > 8 ? (a.getMonth() + 1) : ("0" + (a.getMonth() + 1))) +
          "-" +
          (a.getDate() > 9 ? (a.getDate()) : ("0" + (a.getDate()))) +
          "T" +
          (a.getHours() > 9 ? (a.getHours()) : ("0" + (a.getHours()))) +
          ":" +
          (a.getMinutes() > 9 ? (a.getMinutes()) : ("0" + (a.getMinutes()))) +
          ":" +
          (a.getSeconds() > 9 ? (a.getSeconds()) : ("0" + (a.getSeconds()))) +
          ".000+08:00";
        params.endTime =
          b.getFullYear() +
          "-" +
          (b.getMonth() > 8 ? (b.getMonth() + 1) : ("0" + (b.getMonth() + 1))) +
          "-" +
          (b.getDate() > 9 ? (b.getDate()) : ("0" + (b.getDate()))) +
          "T" +
          (b.getHours() > 9 ? (b.getHours()) : ("0" + (b.getHours()))) +
          ":" +
          (b.getMinutes() > 9 ? (b.getMinutes()) : ("0" + (b.getMinutes()))) +
          ":" +
          (b.getSeconds() > 9 ? (b.getSeconds()) : ("0" + (b.getSeconds()))) +
          ".000+08:00";
        params.cameraId = this.historyMonitor;
        playbackURLs(params).then((res) => {
          if (res.code == 200) {
            this.nowPlayVideoUrl1 = res.data;
            this.player1 = this.$Video("hls-video2"); // 关联video标签的id
            this.player1.src({
              src: this.nowPlayVideoUrl1,
              type: "application/x-mpegURL",
            });
            this.player1.play();
          } else {
            this.$message({
              type: "error",
              message: res.msg,
            });
          }
        });
      } else {
        this.$message({
          type: "error",
          message: "最大支持查看跨度八个小时的监控回放",
        });
      }
      // console.log(startTime)
    },
    closeHistory() {
      if (this.player1) {
        this.player1.dispose();
        this.player1 = null;
      }
      this.openHistoryShow = false
      this.timeDate = [],
        this.historyMonitor = ''
    },
    // 事件类型切换
    typeChange(e) {
      // 切换类型
      this.$emit("getList", e);
    },
    changeAct(item) {
      localStorage.setItem("typeId", JSON.stringify(item.typeId));
      this.yjhhList = []
      if (item.typeId == 4) {
        this.bottomVisib = true
      } else {
        this.bottomVisib = false
        this.showMenu = false
      }
      this.act = item.typeId;
      this.$emit("getAll", Number(item.typeId));
      let params = {};
      params.id = "";
      params.typeId = Number(item.typeId);
      params.cameraName = "";
      this.options = [];
      cameraByType(params).then((res) => {
        if (res.code == 200) {
          res.data.map((item) => {
            if (item.isOpen == true) {
              this.options.push(item);
            }
          });
          console.log(this.options);
        }
      });
    },
    // 获取地图监控信息
    stopPropagation(e) {
      e.stopPropagation();
    },
    marckClick(value) {
      console.log('------', value)
      this.show = true;
      this.detailData = value;
      console.log(this.detailData);
      this.map.setCenter([value.lng, value.lat]);
    },
    closeBox() {
      this.show = false;
      this.closeBroadcast();
    },
    videoClose(val) {
      if (this.player) {
        this.closeBroadcast();
        this.player.dispose();
        this.player = null;
      }
      this.videoShow = false;
      this.params.action = 0;
      this.params.command = "LEFT_UP"
      this.params.cameraId = val.cameraId;
      cloud(this.params).then((res) => {
        console.log(res);
        this.buttonList.map((item) => {
          item.state = 1;
        });
        this.buttonList2.map((item) => {
          item.state = 1;
        });
      });
      this.hasChildren = null;
    },
    mouseDown(item, val) {
      console.log('按下------', item)
      this.direction(item, val)
    },
    mouseUp(item, val) {
      console.log('松开------', item)
      setTimeout(() => {
        this.direction(item, val)
      }, 500);
    },
    direction(item, val) {
      if (item.command) {
        if (this.params.action == 1 && this.params.command == item.command) {
          this.params.action = 0;
          this.params.cameraId = val.cameraId;
          cloud(this.params).then((res) => {
            console.log(res);
            this.buttonList.map((item) => {
              item.state = 1;
            });
            this.buttonList2.map((item) => {
              item.state = 1;
            });
          });
        } else {
          this.params.action = 1;
          this.params.command = item.command;
          this.params.cameraId = val.cameraId;
          this.buttonList.map((item) => {
            item.state = 1;
          });
          this.buttonList2.map((item) => {
            item.state = 1;
          });
          cloud(this.params).then((res) => {
            console.log(res);
            if (res.success) {
              item.state = 2;
            } else {
              this.$message.error(res.msg || '系统繁忙');
            }
          });
        }
      }
      // if (item.command) {
      //   this.params.action = 1;
      //   this.params.command = item.command;
      //   this.params.cameraId = val.cameraId;
      //   this.buttonList.map((item) => {
      //     item.state = 1;
      //   });
      //   this.buttonList2.map((item) => {
      //     item.state = 1;
      //   });
      //   cloud(this.params).then((res) => {
      //     console.log(res);
      //     if (res.success) {
      //       item.state = 2;
      //       setTimeout(() => {
      //         item.state = 1;
      //       }, 2000)
      //     } else {
      //       this.$message.error(res.msg || '系统繁忙');
      //     }
      //   });
      // }
    },
    monitor(id) {
      this.form.cameraId = id.cameraId;
      this.detailData = id;
      this.videoShow = true;
      this.show = false;
      getCameraVideo({ cameraId: id.cameraId }).then((res) => {
        if (res.code === 200) {
          console.log(res);
          this.nowPlayVideoUrl = res.data;
          this.player = this.$Video("hls-video1"); // 关联video标签的id
          this.player.src({
            src: this.nowPlayVideoUrl,
            type: "application/x-mpegURL",
          });
          this.player.play();
        } else {
          this.$message({
            type: "error",
            message: res.msg,
          });
        }
      });
    },
    // 一件截图
    shortScreen(val) {
      console.log('-----------', val)
      console.log(this.$refs)
      const id = val.cameraId
      // 对视频进行截图
      html2canvas(this.$refs.test, { allowTaint: true, useCORS: true }).then(function (canvas) {
        let link = document.createElement("a");
        link.href = canvas.toDataURL();//下载链接
        link.setAttribute("download", `${id}.png`);
        link.style.display = "none";//a标签隐藏
        document.body.appendChild(link);
        link.click();
      }).catch(err => {
        console.log(err)
      })
    },
    handleAvatarSuccess(res) {
      this.form.picture = res.data.viewUrl;
    },
    beforeAvatarUpload(file) {
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isLt2M;
    },
    close1() {
      this.form = {
        kind: 1,
        picture: "",
        cameraId: "",
      };
      this.dialogVisible = false;
    },
    // 提交
    submit() {
      console.log(this.form)
      uploadEvent(this.form).then(res => {
        if (res.code === 200) {
          this.form = {
            kind: 1,
            picture: "",
            cameraId: "",
          }
          this.$message.success(res.data)
        } else {
          this.$message.error(res.msg)
        }
        this.dialogVisible = false;
      })
    },
    control() {
      if (this.hasChildren == null) {
        this.hasChildren = 1;
      } else {
        this.hasChildren = null;
      }
    },
    //开始广播
    openBroadcast(item) {
      console.log(item);
      let params = {
        cameraId: item.cameraId,
      };
      if (item.kind) {
        params.eventType = String(item.kind);
      }
      personPlayOnList(params).then((res) => {
        console.log("328res-------", res);
        if (res.code == 200) {
          this.broMsg = res.data;
          this.broadcast = false;
        } else {
          this.$message({
            type: "error",
            message: res.msg,
          });
        }
      });
    },
    //关闭广播
    closeBroadcast() {
      console.log(123);
      let params = {
        broMsg: this.broMsg,
      };
      stopPersonPlay(params).then((res) => {
        console.log(res);
        this.broadcast = true;
      });
    },
    // 多点位一键喊话
    shout() {
      this.radioShow = true;
    },
    cancel() {
      if (this.hanhua == false && this.radioList && this.radioList.length > 0) {
        console.log(123);
        this.$message({
          type: "error",
          message: "请先关闭喊话",
        });
      } else {
        this.radioShow = false;
        this.radioList = [];
      }
    },
    // 开启一键喊话
    nextStep() {
      console.log(this.radioList);
      if (this.radioList && this.radioList.length > 0) {
        this.$confirm("确认开启一键喊话吗?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            let params = {
              cameraId: this.radioList,
              eventType: "",
              broMsg: "",
            };
            personPlayOnByList(params).then((res) => {
              console.log(res);
              if (res.code == 200) {
                this.broMsg1 = res.data;
                this.hanhua = false;
              } else {
                this.$message({
                  type: "error",
                  message: res.msg,
                });
              }
            });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消开启一键喊话",
            });
          });
      } else {
        this.$message({
          type: "error",
          message: "请选择监控点位",
        });
      }
    },
    // 关闭一键喊话
    backStep() {
      let params = {
        broMsg: this.broMsg1,
      };
      stopPersonPlay(params).then((res) => {
        console.log(res);
        this.hanhua = true;
        this.radioShow = false;
        this.radioList = [];
      });
    },
  },
};
</script>
<style>
.el-checkbox__label {
  color: #fff;
}

.amap-info-window {
  width: 120px;
  background: #fff;
  border-radius: 3px;
  padding: 3px 7px;
  box-shadow: 0 2px 6px 0 rgba(114, 124, 245, 0.5);
  position: relative;
  font-size: 16px;
  line-height: 1.2;
}

.amap-info-sharp {
  position: absolute;
  top: 21px;
  bottom: 0;
  left: 50%;
  margin-left: -8px;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 8px solid #fff;
}

.el-dialog__header {
  padding: 20px 20px 0 20px;
}

.el-dialog__body {
  padding: 20px;
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
<style lang="stylus" scoped>
.wrapper {
  margin: auto;
  width: 100%;
  height: 1080px;
  position: relative;
  .upload {
    display: flex;
    margin-top: 20px;
  

  }
}

.nothing {
  display: flex;
  justify-content: center;
  text-align: center;
  color: white;
  font-size: 26px;
  margin-top: 32px;
  color: #24a5e5;
}

.map {
  width: 100%;
  height: 1080px;
  margin: auto;
}

.radio-content {
  position: absolute;
  width: 600px;
  max-height: 500px;
  overflow: auto;
  padding: 0 20px 20px 20px;
  box-sizing: border-box;
  border-radius: 5px;
  top: 25%;
  left: 33%;
  z-index: 1;
  background: rgba(0, 59, 117, 0.8);
  font-size: 18px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;

  .top {
    padding: 20px;
    background: #01071D;

    .el-icon-close {
      cursor: pointer;
    }
  }

  .monitor {
    font-size: 16px;
    margin: 20px 0;
    color: #3196FA;
  }

  .bottom {
    background: rgba(0, 59, 117, 0.8);
  }
}

.video-history {
  position: absolute;
  width: 600px;
  height: 400px;
  top: 20%;
  left: 31%;
  z-index: 1;

  .closeVideo {
    background: #ffffff;
    color: #ffffff;
    z-index: 99;
    position: relative;
  }

  .closeVideo i {
    position: absolute;
    top: 0;
    right: 0;
    cursor: pointer;
  }

  .bottom {
    display: flex;
    align-items: center;
    height: 54px;
    padding: 0 20px;
    background-color: #fff;
    opacity: 0.9;
    .el-date-editor{
      width: 100%;
    }
  }
}

.video-content {
  position: absolute;
  width: 600px;
  height: 400px;
  top: 25%;
  left: 32%;
  z-index: 1;

  .closeVideo {
    background: #ffffff;
    color: #ffffff;
    z-index: 99;
    position: relative;
  }

  .closeVideo i {
    position: absolute;
    top: 0;
    right: 0;
    cursor: pointer;
  }

  .bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 54px;
    background-color: #fff;
    opacity: 0.9;
    .address {
      display: flex;
      align-items: center;
      font-size: 16px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #5ce3fb;
      width: 100%;
      text-overflow: -o-ellipsis-lastline;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;

      img {
        width: 20px;
        height: 24px;
        margin: 0 10px;
      }
    }

    .caozuo {
      display: flex;
      align-items: center;
    }

    .control {
      width: 70px;
      height: 32px;
      line-height: 32px;
      text-align: center;
      border-radius: 2px;
      border: 1px solid #18Dfff;
      font-size: 11px;
      color: #333;
      cursor: pointer;
      margin-right: 5px;
    }

    .guangbo {
      width: 86px;
      height: 32px;
      line-height: 32px;
      text-align: center;
      line-height: 32px;
      border-radius: 2px;
      border: 1px solid #18Dfff;
      font-size: 12px;
      color: #333;
      cursor: pointer;
      margin-right: 10px;
    }

    .close {
      border: 1px solid #FFE41A;
    }
  }

  .bottom1 {
    padding: 0 10px;
    background-color: #003B75;
    opacity: 0.8;

    .direction {
      display: flex;
      justify-content: space-between;

      .card1 {
        width: 50%;
        margin-top: 10px;
        display: flex;
        justify-content: space-around;
        flex-wrap: wrap;

        .button1 {
          width: 70px;
          height: 25px;
          display: flex;
          align-items: center;
          justify-content: center;
          border-radius: 5px;
          border: 1px solid #18Dfff;
          margin-bottom: 10px;
          padding: 2px 4px;
          background: #121A3C;
          color: #55C1FF;
          cursor: pointer;
          font-size: 14px;
          .name{
            margin-right: 5px;
          }
          .name1 {
            color: #FF9E48;
            margin-right: 10px;
          }

          img {
            width: 12px;
            height: 12px;
            margin: 5px;
          }
        }
      }

      .card2 {
        width: 40%;

        .button1 {
          width: 70px;
        }
      }
    }
  }
}
.switch-title1 {
  left: calc(50% - 100px);
}
.switch-title2 {
  left: calc(50% - 180px);
}
.switch-title3 {
  left: calc(50% - 260px);
}
.switch-title4{
  left: calc(50% - 340px);
}
.switch-title {
  position: absolute;
  border-radius: 5px;
  top: 100px;
  height: 48px;
  padding: 1px 0;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  background: linear-gradient(180deg, #051831 0%, #063064 100%);
  border-radius: 24px;
  border: 1px solid #3196FA;

  .card,.card2 {
    width: 160px;
    height: 44px;
    line-height: 44px;
    text-align: center;
    cursor: pointer;
    background: linear-gradient(180deg, #051831 0%, #063064 100%);
    border-radius: 22px;
  }

  .card1 {
    width: 160px;
    height: 44px;
    background: linear-gradient(180deg, #00FFFF 0%, #3196FA 100%);
    border-radius: 22px;
  }
}

.switch-name {
  position: absolute;
  left: 60%;
  top: 71%;
  display: flex;
  align-items: center;

  .name {
    padding: 8px 15px;
    background: rgba(255, 255, 255, 0.28);
    font-size: 16px;
    font-weight: 500;
    border-radius: 5px;
    color: #409EFF;
    cursor: pointer;
  }

  .monitor {
    margin-left: 15px;
    padding: 8px 15px;
    background: #5ce3fb;
    font-size: 16px;
    font-weight: 500;
    border-radius: 5px;
    color: #FFF;
    cursor: pointer;
  }
}
.switch-name1{
  top: 71%;
  left: 65%;
}
.switch-box {
  position: absolute;
  padding: 5px;
  max-width: 130px;
  overflow-x: hidden;
  border-radius: 5px;
  left: 451px;
  top: 66%;
  background: rgba(255, 255, 255, 0.28);
}
.switch-box1{
  top: 90%;
}

.yjhhDialog{
  z-index: 99999;
  position: absolute;
  top: 25%;
  left: 15%;
  width: 300px;
  padding: 20px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  // align-items: center;
  // justify-content: center;
  background: linear-gradient(270deg, #072B4D 0%, #134778 100%);
  border-radius: 4px;
  opacity 0.8;
  .yjhhTitle{
    color: #fff;
    font-size: 18px;
    font-weight: 500;
  }
  .yjhhCard{
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    max-height: 300px;
    overflow-y: auto;
    .yjhhContent{
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 10px;
      color: #FFF;
      font-size: 16px;
      font-weight: 500;
      .yjhhImg{
        cursor: pointer;
      }
    }
  }
  .yjhhHand{
    margin-top: 30px;
    display: flex;
    justify-content: flex-end;
    .yjhhButton{
      width: 86px;
      height: 32px;
      line-height: 32px;
      text-align: center;
      line-height: 32px;
      border-radius: 2px;
      border: 1px solid #18dfff;
      font-size: 12px;
      color: #fff;
      cursor: pointer;
      margin-left: 10px;
    }
  }
}
// 对话框
.dialog {
  z-index: 9999;
  position: absolute;
  top: 0;
  left: 0;
  width: 1920px;
  height: 1080px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.6);

  .dialog_wrapper {
    position: absolute;
    top: 30%;
    left: 35%;

    .dialog_body {
      width: 610px;
      height: 310px;
      background: linear-gradient(270deg, #072B4D 0%, #134778 100%);
      border-radius: 4px;

      .dialog_header {
        height: 36px;
        margin: 0 10px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-bottom: 1px solid #EEEEEE;

        .hed_left {
          display: flex;
          align-items: center;

          p {
            margin-left: 4px;
            font-size: 16px;
            font-weight: 500;
            color: #54E3FD;
          }
        }
      }

      .dialog_content {
        display: flex;
        padding-top: 20px;
        margin: 0 10px;

        .cell {
          margin-bottom: 12px;
          display: flex;
          align-items: center;

          .label {
            min-width: 70px;
            font-size: 14px;
            font-weight: 500;
            color: #3196FA;
          }

          .value {
            margin-left: 5px;
            font-size: 14px;
            font-weight: 500;
            color: #FFFFFF;
          }
        }

        .camera {
          margin-top: 30px;
          width: 370px;
          height: 132px;
          padding: 10px;
          display: flex;
          align-items: center;
          justify-content: space-between;
          // background: linear-gradient(90deg, #072B4D 0%, #072B4E 100%);
          border-radius: 4px;

          .btn-box {
            display: flex;
            float: right;
            margin-top: 5px;

            div {
              width: 86px;
              height: 32px;
              line-height: 32px;
              text-align: center;
              line-height: 32px;
              border-radius: 2px;
              border: 1px solid #18Dfff;
              font-size: 12px;
              color: #fff;
              cursor: pointer;
              margin-left: 10px;
            }

            .close {
              border: 1px solid #FFE41A;
            }
          }

          .type {
            display: flex;
            align-items: center;

            .dot {
              width: 8px;
              height: 8px;
              border-radius: 50%;
            }

            .org {
              background: #FC672C;
            }

            .green {
              background: #54E3FD;
            }

            p {
              margin-left: 4px;
              font-size: 16px;
              font-weight: 500;
              color: #3196FA;
            }
          }

          .nodata {
            width: 180px;
            height: 110px;
            margin-top: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 16px;
            color: #fff;
          }
        }
      }
    }
  }
}

.dialog_label {
  display: flex;
  align-items: center;
  margin-bottom: 18px;
  line-height: 20px;
  font-size: 16px;
  font-family: MicrosoftYaHeiUI-Bold, MicrosoftYaHeiUI;
  font-weight: bold;
}

.conDialog {
  width: 480px;
  height: 286px;
  margin: 32px 0 0 32px;
  display: flex;
  justify-content: space-between;
}
</style>
