<template>
  <div class="eventWrapper">
    <!-- 弹窗 -->
    <el-dialog title="上报事件" :visible.sync="dialogVisible" width="30%" :before-close="close" :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="close">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </span>
    </el-dialog>
    <div class="title">
      <div class="icon"></div>
      <p>监控点位</p>
    </div>
    <div class="searchHeader" style="display: flex; justify-content: space-between">
      <div class="left" style="width: 42%; height: 100%; overflow: auto">
        <el-tree class="filter-tree" :data="cameraList1" :props="{
          value: 'id',
          label: 'name',
          // children: 'deviceList'
        }" default-expand-all :expand-on-click-node="false" ref="tree" @node-click="changeList" :highlight-current="true">
        </el-tree>
      </div>
      <div class="right" style="width: 54%; height: 100%; overflow: auto">
        <el-input v-model="cameraName" clearable size="mini" style="width: 95%; margin-top: 10px; padding: 0"
          placeholder="输入点位名称搜索">
          <el-button size="mini" slot="append" type="primary" icon="el-icon-search" @click="search"></el-button>
        </el-input>
        <div class="table">
          <div class="name" v-for="(item, index) in cameraList2" :key="index" @click="playRadio(item)">
            {{ item.name }}
          </div>
        </div>
      </div>
    </div>
    <!-- <div class="searchHeader" style="display: flex; justify-content: space-between">
      <div class="right" style="width: 100%; height: 100%; overflow: auto">
        <el-input v-model="cameraName" clearable size="small" style="width: 95%; margin-top: 10px; padding: 0"
          placeholder="输入点位名称搜索">
          <el-button size="mini" slot="append" type="primary" icon="el-icon-search" @click="search"></el-button>
        </el-input>
        <div class="table">
          <div class="name" v-for="(item, index) in cameraList1[0].deviceList" :key="index" @click="playRadio(item)">
            {{ item.name }}
          </div>
        </div>
      </div>
    </div> -->
    <div v-for="(i, index) in urls" :key="index">
      <div class="videoWrapper" v-drag v-if="i.videoDialog">
        <div class="closeVideo">
          <i class="el-icon-close" @click="handleClose(i)"></i>
        </div>
        <VJSVue :src="i.url" ref="test"></VJSVue>
        <div class="bottom">
          <div class="address">
            <img src="../../assets/index/address.png" alt="" />
            {{
                i.detailData.name ||
                i.detailData.cameraAddress ||
                i.detailData.address ||
                i.detailData.typeName ||
                "未知摄像头"
            }}
          </div>
          <!-- <div class="caozuo">
            <div class="control" @click="shortScreen(i.detailData)">一键截图</div>
            <div class="control" @click="shangbao()">上报事件</div>
            <div class="control" @click="control(i.detailData)">
              <img src="../../assets/direction/9.png" style="width: 14px; height: 14px" alt="" />
              云控制台
            </div>
            <div class="open guangbo" v-if="broadcast == true && i.detailData.isOpen == true"
              @click="openBroadcast(i.detailData)">
              <img src="../../assets/index/gbgj.png" style="margin-right: 5px" alt="" />人工喊话
            </div>
            <div class="close guangbo" v-if="broadcast == false && i.detailData.isOpen == true"
              @click="closeBroadcast()">
              <img src="../../assets/index/gbz.png" style="margin-right: 5px" alt="" />广播中
            </div>
          </div> -->
        </div>
        <div class="bottom1" v-if="i.detailData.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, i.detailData)" @mouseup="mouseUp(item, i.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, i.detailData)" @mouseup="mouseUp(item, i.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>
  </div>
</template>

<script type="text/ecmascript-6">
import {
  getCameraVideo,
  personPlayOnList,
  stopPersonPlay,
  cameraByType,
  cloud,
  uploadEvent,
  eventTypeList,
  treeList
} from "@/api/api";
import VJSVue from "./VJS.vue";
import html2canvas from 'html2canvas'
export default {
  name: "WarnEventList",
  components: {
    VJSVue,
  },
  data() {
    return {
      cameraName: "",
      nowPlayVideoUrl: "",
      player: null,
      detailData: {},
      broadcast: true,
      broMsg: "",
      options: [],
      cameraList2: [],
      // 事件类型
      newOptions: [],
      form: {
        kind: null,
        picture: "",
        cameraId: "",
      },
      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: "",
      },
      urls: [],
      level: null,
      dialogVisible: false,
      cameraList1: [],
    };
  },
  props: {
    // cameraList1: {
    //   type: Array,
    // },
  },
  methods: {
    init() {
      treeList().then((res) => {
        this.cameraList1 = res.data;
        console.log('1111111',this.cameraList1)
      });
    },
    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;
    },
    close() {
      this.form = {
        kind: null,
        picture: "",
        cameraId: "",
      };
      this.dialogVisible = false;
    },
    // 一件截图
    shortScreen(val) {
      const id = val.cameraId
      // 对视频进行截图
      html2canvas(this.$refs.test[0].$refs.videoPlayer, { 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)
      })
    },
    shangbao() {
      this.form.kind = null
      this.dialogVisible = true
      eventTypeList().then((res) => {
        if (res.success) {
          this.newOptions = res.data.slice(1)
        }
      })
    },
    // 提交
    submit() {
      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;
      })
    },

    search() {
      // console.log(this.cameraName != "");
      let params = {};
      params.deviceClassifyIds = [];
      params.name = this.cameraName;
      cameraByType(params).then((res) => {
        console.log(res)
        if (res.code == 200) {
          this.cameraList2 = res.data.dataList;
        }
      });
    },
    changeList(val) {
      console.log(val);
      let params = {};
      params.deviceClassifyIds = [val.id];
      params.name = this.cameraName;
      cameraByType(params).then((res) => {
        console.log(res);
        if (res.code == 200) {
          this.cameraList2 = res.data.dataList;
        }
      });
    },
    control(val) {
      if (val.hasChildren == null) {
        val.hasChildren = 1;
      } else {
        val.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 || '系统繁忙');
      //       }
      //     });
      // }
      console.log(this.urls);
    },
    playRadio(data) {
      console.log(data)
      this.form.deviceNo = data.deviceNo;
      if (data.deviceNo) {
        let param = {};
        param.deviceNo = data.deviceNo;
        getCameraVideo(param).then((res) => {
          console.log(res)
          if (res.code === 200) {
            if (this.urls.length < 3) {
              this.urls.push({ url: res.data, detailData: data });
              this.urls.map((item) => {
                item.videoDialog = true;
              });
              if (data.lat && data.lng) {
                this.$emit("getJwd", data);
              }
            } else {
              this.$message({
                type: "warning",
                message: "您已同时开启三个摄像头！",
              });
            }
            console.log(this.urls);
          } else {
            this.$message({
              type: "error",
              message: res.msg,
            });
          }
        });
      }
    },
    handleClose(val) {
      this.urls.splice(this.urls.indexOf(val), 1);
      this.params.action = 0;
      this.params.command = "LEFT_UP"
      this.params.cameraId = val.detailData.cameraId;
      cloud(this.params).then((res) => {
        console.log(res);
        this.buttonList.map((item) => {
          item.state = 1;
        });
        this.buttonList2.map((item) => {
          item.state = 1;
        });
      });
      val.detailData.hasChildren = null;
      this.closeBroadcast();
    },
    //开始广播
    openBroadcast(item) {
      let params = {
        cameraId: item.cameraId,
      };
      if (item.kind) {
        params.eventType = String(item.kind);
      }
      personPlayOnList(params).then((res) => {
        if (res.code == 200) {
          this.broMsg = res.data;
          this.broadcast = false;
        } else {
          this.$message({
            type: "error",
            message: res.msg,
          });
        }
      });
    },
    //关闭广播
    closeBroadcast() {
      let params = {
        broMsg: this.broMsg,
      };
      stopPersonPlay(params).then((res) => {
        console.log(res);
        this.broadcast = true;
      });
    },
  },
  mounted() {
    this.init()
    this.search()
    // this.level = JSON.parse(localStorage.getItem("accountInfo")).level;
  },
};
</script>

<style lang="stylus">
.eventWrapper {
  width: 384px;
  height: 956px;
  background: linear-gradient(180deg, rgba(10, 29, 72, 0.51) 0%, #0F152E 100%);
  border-radius: 4px;
  border: 2px solid #00356D;

  .upload {
    display: flex;
    margin-top: 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;
  }

  }

  .title {
    height: 40px;
    padding: 0 10px;
    display: flex;
    align-items: center;
    background: linear-gradient(270deg, #072B4D 0%, #134778 100%);

    .icon {
      width: 2px;
      height: 20px;
      background: #5CE3FB;
      border-radius: 2px;
    }

    p {
      margin-left: 10px;
      font-size: 20px;
      font-weight: 400;
      color: #5CE3FB;

      span {
        font-weight: 500;
        color: #FC672C;
      }
    }
  }

  .searchHeader {
    margin: 10px 0;
    padding: 0 10px;

    .el-input {
      margin-right: 10px;
      border-radius: 4px;

      .el-input__inner {
        background: #123154;
        border: none;
        color: #FFFFFF;
      }
    }

    .filter-tree {
      margin-top: 10px;
      background: #123154;
      color: #5ce3fb;
      max-height: 820px;
      overflow-x: scroll;
    }

    .el-tree > :nth-child(n+1) {
      display: inline-block;
      min-width: 100%;
    }

    .table {
      margin-top: 10px;
      background: #123154;
      padding: 10px;
      color: #5ce3fb;
      max-height: 820px;
      overflow-y: scroll;

      .name {
        font-size: 14px;
        line-height: 1.6;
        cursor: pointer;
      }
    }
  }

  .eventList {
    height: 87%;
    padding: 0 20px;
    overflow: auto;
    font-size: 16px;
    font-weight: 500;
    color: #EEEEEE;

    .eventItem {
      margin-bottom: 16px;
      width: 300px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      cursor: pointer;
    }
  }
}

.eventWrapper .el-dialog {
  margin-top: 40vh !important;

  // background: transparent;
  .el-dialog__body {
    padding: 40px 20px;
  }
}

.videoWrapper {
  position: absolute;
  top: 12%;
  left: -200%;
  width: 600px;
  height: 400px;
  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;

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

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

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

  .guangbo {
    width: 86px;
    height: 32px;
    line-height: 32px;
    text-align: center;
    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;

        .name1 {
          color: #FF9E48;
        }

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

    .card2 {
      width: 40%;

      .button1 {
        width: 80px;
      }
    }
  }
}
</style>
