<template>
  <div class="camerasMg">
    <el-row class="topBar">
      <el-col>
        <el-form :inline="true" :model="searchData">
          <el-form-item label>
            <el-input v-model="searchData.eventName" placeholder="请输事件名称"></el-input>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="searchFun()">
              <i class="el-icon-search"></i> 搜索
            </el-button>
            <el-button type="primary" @click="resetFun()">
              <i class="el-icon-refresh"></i> 重置
            </el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
    <el-table :data="tableData.pageData" stripe border style="width:100%;" :loading="false">
      <el-table-column width="50" type="index" label="序号"></el-table-column>
      <el-table-column prop="sendName" label="发报人"></el-table-column>
      <el-table-column prop="briefing" label="简报"></el-table-column>
      <el-table-column prop="content" label="内容"></el-table-column>
      <el-table-column prop="msgcontent" label="附带短信"></el-table-column>
      <el-table-column prop="createTime" label="发送时间"></el-table-column>
      <el-table-column prop="receiveContent" label="回复内容" :show-overflow-tooltip="true"></el-table-column>
      <el-table-column prop="receiveTime" label="回复时间" :show-overflow-tooltip="true"></el-table-column>
      <el-table-column label="操作" width="200" align="center">
        <template slot-scope="scope">
          <el-button type="success" v-if="scope.row.stutas == '0'" @click="sendFun(scope.row)" size="small">
            <i class="el-icon-edit-outline"></i> 回复
          </el-button>
          <el-button type="success"  @click="sendFun(scope.row)" size="small">
            <i class="el-icon-edit-outline"></i> 查看
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      background
      layout="total,sizes, prev, pager, next, jumper"
      :total="tableData.total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="PAGE.page"
      :page-size="PAGE.size"
    ></el-pagination>
    <EventsMgReply
            v-if="dialogVisible2"
            :dialogVisible="dialogVisible2"
            :editForm="formData"
            :title="dialogTit"
            @dialogFun="closeDialog"
            @refreshTableData="getTableData"
            :key="zjsendKey"
    ></EventsMgReply>
  </div>
</template>
<script lang="ts">
import { Component, Vue, Provide } from "vue-property-decorator";
import EventsMgEdit from "./EventsMgEdit.vue";
import EventsMgReply from "./EventsMgReply.vue";
import METHOD from "@/utils/methods";
@Component({
  components: { EventsMgEdit,EventsMgReply }
})
export default class CamerasMg extends Vue {
  @Provide() signId: String = "";
  @Provide() tableData: Object = { pageData: [], total: 0 };
  @Provide() PAGE: any = { page: 1, size: 10 };
  @Provide() searchData: any = { deviceName: "" };
  @Provide() loading: Boolean = false;
  @Provide() eventSortArr: any = [];
  //编辑组件
  @Provide() dialogVisible2: Boolean = false;
  @Provide() formData: Object = {};
  @Provide() zjsendKey: any = 0;
  @Provide() reVisible: Boolean = false;
  @Provide() reId: String = "";
  getTableData() {
    let that = this,
      params = Object.assign(that.PAGE, that.searchData);
    (that as any).$axios
      .post("/eventInfoSubmitted/getsubmittedAllList", params)
      .then((res: any) => {
        if( res ) that.tableData = res;
        console.log(res)
      });
  }
  WebSocketConnect(json: any) {
    let that = this;
    if ("WebSocket" in window) {
      // 打开一个 web socket
      var ws = new WebSocket(`ws://${METHOD.GlobalUrl}/auth/websocket`);
      ws.onopen = function() {
        // Web Socket 已连接上，使用 send() 方法发送数据
        ws.send(JSON.stringify(json));
        (that as any).$message.success("推送成功!");
      };
      ws.onclose = function() {
        console.log("关闭WebSocket连接!");
      };
    } else {
      that.$message.error("您的浏览器不支持 WebSocket!");
    }
  }
  pushFun(row: any) {
    let that = this;
    (that as any)
      .$confirm("确定推送?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
      .then(() => {
        (that as any).$axios
          .get(`/eventInfo/pushScreenDataById/${row.id}`)
          .then((res: any) => {
            if (res.code == 0) {
              (that as any).WebSocketConnect(row)
            }
          });
      });
  }
  searchFun() {
    this.PAGE = { page: 1, size: 10 };
    this.getTableData();
  }
  resetFun() {
    this.PAGE = { page: 1, size: 10 };
    this.searchData = {};
    this.getTableData();
  }
  sendFun(row: any) {
        this.dialogTit = "信息报送";
        this.formData = Object.assign({}, row);
        this.zjsendKey++;
        this.dialogVisible2 = true;
    }
  handleSizeChange(val: any) {
    this.PAGE.size = val;
    this.getTableData();
  }
  handleCurrentChange(val: any) {
    this.PAGE.page = val;
    this.getTableData();
  }
  closeDialog() {
    //关闭窗口
    this.dialogVisible = false;
    this.dialogVisible2 = false;
    this.formData = {};
  }
  recloseDialog() {
    this.reVisible = false;
  }
  resoveFun(row: any){
    this.reVisible = true;
    this.formData = Object.assign({}, row);
  }
  seletChangeEventSortArr(dictId: any) {
    let that = this,
            arr;
    arr = that.eventSortArr.filter((ele: any) => dictId == ele.dictId);
    that.searchData.eventType = arr[0].name;
  }
  //事件分类
  getEventSort() {
    let that = this;
    (that as any).$axios
      .get(
              `/dict/getSysDictByDictTypeCode/event_sort`
      )
      .then((res: any) => {
        that.eventSortArr = res;
      });
  }
  created() {
    this.signId = this.$route.matched[1].meta.listId;
    this.getTableData();
    this.getEventSort();
  }
    checkFile(url: any) {
        window.open("http://" + METHOD.GlobalUrl + "/ioc" + url)
    }
}
</script>
