<template>
  <div class="tableWrapper" ref="tableWrapper">
    <div class="breadCrumbs">
      <div class="bread-left">
        <p class="bread_font">实时事件</p>
        <img src="@/assets/index/bread_icon.png" alt="" />
        <p class="bread_font">数据列表</p>
      </div>
      <el-button class="backbutton" icon="el-icon-arrow-left" @click="returnIndex">返回</el-button>
    </div>
    <div class="tableCon">
      <div class="searchInput">
        <p class="label">案件类型</p>
        <el-select class="selectPicker" v-model="searchData.kind" size="mini" @change="initData">
          <el-option v-for="item in kindSelect" :key="item.eventType" :label="item.typeName" :value="item.eventType"></el-option>
        </el-select>
        <p class="label">处理人员</p>
        <el-input v-model="searchData.operator" class="inputPicker" clearable size="mini"></el-input>
        <p class="label">案件状态</p>
        <el-select class="selectPicker" v-model="searchData.operateStatus" size="mini" @change="initData">
          <el-option v-for="(item, index) in operateStatusSelect" :key="item + 1" :label="item" :value="index">
          </el-option>
        </el-select>
        <p class="label">选择时间</p>
        <el-date-picker size="mini" v-model="searchData.time" type="daterange" range-separator="——"
          start-placeholder="开始日期" end-placeholder="结束日期" class="datePicker" value-format="yyyy-MM-dd"
          @change="initData">
        </el-date-picker>
        <el-button @click="initData" type="primary" class="searchButton">查询</el-button>
      </div>
      <div class="eventList">
        <el-table border :data="tableData" style="width: 100%" :max-height="tableHeight"
          :row-class-name="tableRowClassName" :header-cell-style="{
            'background-color': headerBackColor,
            'font-size': '16px',
            color: '#54E3FD',
            height: '40px'
          }" @cell-click="colEvent">
          <el-table-column type="index" width="60" label="序号" align="center">
          </el-table-column>
          <template v-for="(item, index) in columnData">
            <el-table-column v-if="item.picture" :label="item.label" :prop="item.prop" :key="index" align="center"
              :width="item.width" :min-width="item.minWidth" :show-overflow-tooltip="true">
              <template slot-scope="scope">
                <span style="cursor: pointer; color: #04b9ff">
                  {{ scope.row.pictureUrl }}
                </span>
              </template>
            </el-table-column>
            <el-table-column v-else-if="item.feedbackPictureUrl" :label="item.label" :prop="item.prop" :key="index"
              align="center" :width="item.width" :min-width="item.minWidth" :show-overflow-tooltip="true">
              <template slot-scope="scope">
                <span style="cursor: pointer; color: #04b9ff">
                  {{ scope.row.feedbackPictureUrl }}
                </span>
              </template>
            </el-table-column>
            <el-table-column v-else :label="item.label" :prop="item.prop" :key="index" align="center"
              :width="item.width" :min-width="item.minWidth" :show-overflow-tooltip="true"></el-table-column>
          </template>
        </el-table>
      </div>
      <div class="pageination">
        <el-pagination v-show="filters.total > 0" @size-change="handleSizeChange" @current-change="handleCurrentChange"
          :current-page="filters.current" :page-sizes="[15, 30, 40, 50]" :page-size="filters.size"
          layout="total, sizes, prev, pager, next, jumper" :total="filters.total">
        </el-pagination>
      </div>
      <div>
        <el-image-viewer v-if="showViewer" :on-close="closeViewer" :url-list="[url]" />
      </div>
      <div class="videoStyle" v-drag v-if="videoDialog.visible">
        <div style="position: relative" @click="closeVideo">
          <i class="el-icon-close closeStyle"></i>
        </div>
        <!--<video src="" controls="controls" style="width: 600px;height: 400px;"></video>-->
        <video id="hls-video" width="600" height="400" class="video-js vjs-default-skin vjs-big-play-centered"
          playsinline webkit-playsinline controls preload="auto" x-webkit-airplay="true"
          x5-video-player-fullscreen="true" x5-video-player-typ="h5" style="width: 100%; height: 100%"></video>
      </div>
      <!--<Video :videoDialog="videoDialog.visible" :nowPlayVideoUrl="nowPlayVideoUrl" :player="player" @closeVideo="closeVideo"></Video>-->
    </div>
  </div>
</template>

<script type='text/ecmascript-6'>
import { getEventsData,eventTypeList } from "@/api/api";
// import { getEventsData, getCameraVideo } from "@/api/api";
export default {
  name: "eventTable",
  data() {
    return {
      searchData: {
        cameraId: "", // 摄像头id
        kind: null, // 分类
        operateStatus: 0, // 操作状态
        operator: "", // 处理人员
        time: []
      },
      tableData: [],
      columnData: [
        {
          prop: "kindName",
          label: "类型"
        },
        {
          prop: "id",
          label: "事件编号"
        },
        {
          prop: "cameraAddress",
          label: "位置"
        },
        {
          prop: "cameraName",
          label: "监控"
        },
        {
          prop: "pictureUrl",
          label: "事件图片",
          picture: true
        },
        {
          prop: "createDate",
          label: "发生时间"
        },
        {
          prop: "operator",
          label: "处理人"
        },
        {
          prop: "finishTime",
          label: "处理时间"
        },
        {
          prop: "feedbackPictureUrl",
          label: "处理完成图",
          feedbackPictureUrl: true
        },
        {
          prop: "operateStatusName",
          label: "状态"
        }
      ],
      tableHeight: 756,
      headerBackColor: "#124474",
      currentPage: 1,
      filters: {
        total: 0,
        current: 1,
        size: 200
      },
      kindSelect: [],
      operateStatusSelect: [
        "全部",
        "待派发",
        "待认领",
        "待处理",
        "待审核",
        "已结束"
      ],
      videoDialog: {
        visible: false
      },
      showViewer: false, // 显示查看器
      url: "",
      player: undefined,
      nowPlayVideoUrl: ""
    };
  },
  created() {
    this.initkindList();
    this.initData();
  },
  methods: {
    initData() {
      let param = {};
      param.currentNo = this.filters.current;
      param.pageSize = this.filters.size;
      if (this.searchData.time.length > 0) {
        param.createDateFrom = this.searchData.time[0];
        param.createDateTo = this.searchData.time[1];
      } else {
        param.createDateFrom = "";
        param.createDateTo = "";
      }
      param.operator = this.searchData.operator;
      param.kind = this.searchData.kind == 0 ? null : this.searchData.kind;
      console.log('-----------', this.searchData.kind,this.kindSelect.length)
      // if (this.kindSelect && this.kindSelect.length > 8) {
      //   // console.log(123)
      //   param.kind = this.searchData.kind !== 0 ? this.searchData.kind : "";
      // } else {
      //   console.log(123)
      //   param.kind = this.searchData.kind !== 0 ? (this.searchData.kind + 8) : "";
      //   console.log('-----------', this.searchData.kind,param.kind)
      // }
      param.operateStatus =
        this.searchData.operateStatus !== 0
          ? this.searchData.operateStatus
          : "";
      param.typeId = this.$route.query;
      getEventsData(param).then(res => {
        if (res.code === 200) {
          this.tableData = res.data.dataList;
          this.filters.total = Number(res.data.total);
          this.tableData.forEach(value => {
            // value.kindName = this.kindSelect[value.kind];
            switch (value.kind) {
              case 1:
                value.kindName = '垃圾堆积'
                break;
              case 2:
                value.kindName = '出店'
                break;
              case 3:
                value.kindName = '游商'
                break;
              case 4:
                value.kindName = '机动车违停'
                break;
              case 5:
                value.kindName = '非机动车违停'
                break;
              case 6:
                value.kindName = '违规广告'
                break;
              case 7:
                value.kindName = '沿街晾晒'
                break;
              case 8:
                value.kindName = '人员聚集'
                break;
              case 9:
                value.kindName = '未出水'
                break;
              case 10:
                value.kindName = '绕行未清洗'
                break;
              case 11:
                value.kindName = '清洗时长不足'
                break;
              case 12:
                value.kindName = '黑车'
                break;
              case 13:
                value.kindName = '后盖异常'
                break;
              case 14:
                value.kindName = '河上垃圾堆放'
                break;
              case 15:
                value.kindName = '游泳检测'
                break;
              case 16:
                value.kindName = '钓鱼检测'
                break;
              case 17:
                value.kindName = '漂浮物'
                break;
              case 18:
                value.kindName = '渔船'
                break;
              case 19:
                value.kindName = '垂钓者'
                break;
              default:
                break;
            }
            value.operateStatusName = this.operateStatusSelect[
              value.operateStatus
            ];
            value.pictureUrl = value.picture === null ? "" : "查看";
            value.feedbackPictureUrl =
              value.feedbackPicture === null ? "" : "查看";
          });
        }
      });
    },
    initkindList() {
      eventTypeList().then((res) => {
        console.log(res)
        if (res.success) {
          this.kindSelect = res.data   
        }
      })
    },
    tableRowClassName({ rowIndex }) {
      if (rowIndex % 2 !== 1) {
        return "warning-row";
      } else {
        return "success-row";
      }
    },
    colEvent(row, column) {
      switch (column.label) {
        case "事件图片":
          this.url = `${row.picture}`;
          this.showViewer = true;
          this.stopMove();
          break;
        case "处理完成图":
          this.showViewer = true;
          this.url = row.feedbackPicture;
          this.stopMove();
          break;
        // case "监控":
        //   this.videoDialog.visible = true;
        //   getCameraVideo({ cameraId: row.cameraId }).then(res => {
        //     if (res.code === 200) {
        //       this.nowPlayVideoUrl = res.data.playrealUrl;
        //       this.player = this.$Video("hls-video"); // 关联video标签的id
        //       this.player.src({
        //         src: this.nowPlayVideoUrl,
        //         type: "application/x-mpegURL"
        //       });
        //       setTimeout(() => {
        //         this.player.play();
        //       }, 150);
        //     }
        //   });
        // break;
      }
    },
    handleSizeChange(val) {
      this.filters.size = val;
      this.initData();
    },
    handleCurrentChange(val) {
      this.filters.current = val;
      this.initData();
    },
    closeVideo() {
      this.player.dispose();
      this.player = null;
      this.videoDialog.visible = false;
    },
    returnIndex() {
      this.$router.push("/bigdata");
      localStorage.setItem("typeId", JSON.stringify('1'))
    },
    closeViewer() {
      this.showViewer = false;
      this.move();
    },
    // 停止页面滚动
    stopMove() {
      let m = function (e) {
        e.preventDefault();
      };
      document.body.style.overflow = "hidden";
      document.addEventListener("touchmove", m, { passive: false }); // 禁止页面滑动
    },
    // 开启页面滚动
    move() {
      let m = function (e) {
        e.preventDefault();
      };
      document.body.style.overflow = "auto"; // 出现滚动条
      document.removeEventListener("touchmove", m, { passive: true });
    }
  },
  beforeDestroy: function () {
    if (this.player) {
      this.player.dispose();
      this.player = null;
    }
  },
  components: {
    "el-image-viewer": () =>
      import("element-ui/packages/image/src/image-viewer")
  }
};
</script>

<style lang="stylus">
.tableWrapper {
  height: 988px;
  padding: 0 20px;

  .breadCrumbs {
    margin: 20px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .bread-left {
      display: flex;
      align-items: center;

      img {
        margin: 0 4px;
      }

      .bread_font {
        ont-size: 28px;
        font-family: PangMenZhengDao;
        color: #FFFFFF;
        // text-shadow: 0px 3px 4px rgba(0, 0, 0, 0.5);
        background: linear-gradient(180deg, #FFFFFF 0%, #009BFF 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }
    }

    .backbutton {
      width: 100px;
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #54E3FD;
      border-radius: 4px;
      border: 1px solid #5CE3FB;
      font-size: 16px;
      font-weight: 600;
      color: #101010;
    }
  }

  .tableCon {
    width: 100%;
    height: 887px;
    background: linear-gradient(180deg, rgba(10, 29, 72, 0.51) 0%, #0F152E 100%);
    border-radius: 4px;
    border: 2px solid #00356D;

    .searchInput {
      height: 74px;
      padding-left: 16px;
      display: flex;
      align-items: center;
      background: #0B1B3C;
      border-radius: 4px 4px 0px 0px;
      border-bottom: 2px solid #00356D;

      .label {
        margin: 0 10px 0 50px;
        font-size: 16px;
        color: #ffffff;
      }

      .label:first-child {
        margin-left: 0;
      }

      .selectPicker {
        width: 200px;

        .el-input__inner {
          height: 42px;
          border: 0px;
          color: #E0E0E0;
          background: #123154;
          border-radius: 4px;
        }
      }

      .inputPicker {
        width: 200px;

        .el-input__inner {
          color: #E0E0E0;
          height: 42px;
          background: #123154;
          border: 0px;
        }
      }

      .datePicker {
        width: 250px;
        height: 42px;
        background: #123154;
        border: none;
        border-radius: 4px;

        .el-input__icon {
          line-height: 40px;
        }

        .el-range-input {
          height: 42px;
          background: #123154;
          color: #6A8EB7;
        }

        .el-range-separator {
          line-height: 40px;
          color: #6A8EB7;
        }
      }

      .searchButton {
        width: 68px;
        height: 32px;
        margin-left: 30px;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #54E3FD;
        border-radius: 4px;
        border: 1px solid #5CE3FB;
        font-size: 16px;
        font-weight: 600;
        color: #101010;
      }
    }

    .eventList {
      padding: 10px 10px 0;

      .el-table {
        color: #fff;

        .warning-row {
          background: #0B183A;
        }

        .success-row {
          background: #002548;
        }

        .picStyle {
          cursor: pointer;
          color: #04b9ff;
        }
      }

      .el-table--border {
        border: 2px solid #00356D;
      }

      .el-table tbody tr:hover>td {
        background-color: transparent !important;
        border: solid 0;
      }

      .el-table td, .el-table th.is-leaf {
        border: none;
      }

      .el-table--border::after, .el-table--group::after, .el-table::before {
        background: #0C1354;
      }

      .el-table--border th.gutter:last-of-type {
        background: #0C1354;
        border: 0;
      }
    }
  }
}

.tableWrapper .el-dialog__title {
  color: #ffffff;
}

.tableWrapper .el-dialog__body {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.tableWrapper .el-dialog {
  background: transparent;
}

.tableWrapper .imgStyle {
  width: 850px;
  height: 600px;
  display: flex;
  justify-content: center;
  border: solid 1px #ffffff;
  color: #ffffff;
}

.videoDialog .el-dialog__headerbtn {
  top: 0;
  right: -13px;
  z-index: 999;
  color: #ffffff;
  background: rgba(0, 0, 0, 0.8);
  padding: 5px;
}

.videoStyle {
  width: 600px;
  height: 400px;
  position: absolute;
  top: 20%;
  left: 30%;
  z-index: 1;
}

.closeStyle {
  color: #ffffff;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 9;
  cursor: pointer;
}

.el-image-viewer__close {
  color: #ffffff;
}
</style>