
<template>
  <div>
    <div class="titleBox">
      <div class="title">警情信息</div>
    </div>
    <div class="searchBox" ref="searchBox">
      <el-form :model="listQuery" :inline="true">
        <el-form-item label="管辖部门">
          <MOSTY.Department width="100%" clearable v-model="listQuery.ssbmdm" />
        </el-form-item>
        <el-form-item label="报警人姓名">
          <el-input v-model="listQuery.bjrXm" placeholder="请输入" clearable></el-input>
        </el-form-item>
        <el-form-item label="报警时间">
          <el-date-picker v-model="dataRange" type="datetimerange" range-separator="至" start-placeholder="开始时间"
            unlink-panels end-placeholder="结束时间" format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss"
            @change="handleTime" />
        </el-form-item>

        <el-form-item label="关键字">
          <el-input v-model="listQuery.keyword" placeholder="报警内容、电话、部门名称" clearable></el-input>
        </el-form-item>

        <el-form-item>
          <el-button @click="handleFilter"> 查询 </el-button>
          <el-button @click="reset"> 重置 </el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="tabBox">
      <el-table :data="tableData" border row-key="id" :tree-props="{ children: 'itemList', hasChildren: true }"
        style="width: 100%" :key="keyCount" ref="dataTreeList" :height="tableHeight" v-loading="loadingTable"
        element-loading-background="rgba(0,0,0,0.3)" element-loading-text="数据加载中。。">
        <el-table-column type="selection" width="40" align="center" />
        <el-table-column label="序号" type="index" align="center" width="50" />
        <el-table-column label="管辖部门" prop="ssbm" show-overflow-tooltip align="center" />
        <el-table-column label="报警人姓名" prop="bjrXm" align="center" />
        <el-table-column prop="bjrXb" show-overflow-tooltip align="center" label="报警人性别">
          <template #default="{ row }">
            <dict-tag :options="D_BZ_XB" :value="row.bjrXb" :tag="false" />
          </template>
        </el-table-column>
        <el-table-column label="报警人电话" prop="bjrLxdh" align="center" />
        <el-table-column label="报警时间" prop="bjsj" align="center" />
        <el-table-column label="接警员编号" prop="jjybh" align="center" />
        <el-table-column label="报警员姓名" prop="jjyxm" align="center" />
        <el-table-column label="接警时间" prop="jjsj" align="center" />
        <el-table-column label="操作" align="center" fixed="right" width="150px">
          <template #default="{ row }">
            <el-button @click="lookDetail(row)" size="small">详情</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="fenye" :style="{ top: tableHeight + 'px' }">
        <el-pagination class="pagination" @size-change="handleSizeChange" @current-change="handleCurrentChange"
          :current-page="listQuery.pageNum" :page-sizes="[10, 20, 50, 100]" :page-size="listQuery.pageSize"
          layout="total, sizes, prev, pager, next, jumper" :total="total">
        </el-pagination>
      </div>
    </div>
    <div class="dialog" v-if="dialogFormVisible">
      <div class="head_box">
        <span class="title">{{ title }}</span>
        <div>
          <el-button size="small" @click="close">关闭</el-button>
        </div>
      </div>
      <el-form ref="elform" :model="form" :rules="rules" :inline="true" disabled label-position="top">
        <el-divider content-position="left"><i class="el-icon-timer">报警信息</i></el-divider>
        <el-form-item label="报警时间">
          <el-input v-model="form.bjsj"></el-input>
        </el-form-item>
        <el-form-item label="报警电话">
          <el-input v-model="form.bjdh"></el-input>
        </el-form-item>
        <el-form-item label="报警电话用户姓名">
          <el-input v-model="form.bjdh_yhxm"></el-input>
        </el-form-item>
        <el-form-item label="报警电话用户地址">
          <el-input v-model="form.bjdh_yhdz"></el-input>
        </el-form-item>

        <el-form-item label="报警人姓名">
          <el-input v-model="form.bjr_xm"></el-input>
        </el-form-item>
        <el-form-item label="报警人性别">
          <el-select clearable v-model="form.bjr_xb" placeholder="请选择性别">
            <el-option v-for="(item, index) in D_BZ_XB" :key="index" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="联系电话">
          <el-input v-model="form.bjdh"></el-input>
        </el-form-item>

        <el-divider content-position="left"><i class="el-icon-timer">报警内容</i></el-divider>
        <el-form-item label="事发地址" style="width:48%">
          <el-input v-model="form.sfdz" type="textarea"></el-input>
        </el-form-item>
        <el-form-item label="报警内容" style="width:48%">
          <el-input v-model="form.bjnr" type="textarea"></el-input>
        </el-form-item>
        <el-form-item label="管辖单位">
          <el-input v-model="form.ssbm"></el-input>
        </el-form-item>
        <el-form-item label="报警类别">
          <el-input v-model="form.bjlbmc"></el-input>
        </el-form-item>
        <el-form-item label="报警类型">
          <el-input v-model="form.bjlxmc"></el-input>
        </el-form-item>
        <el-form-item label="报警细类">
          <el-input v-model="form.bjxlmc"></el-input>
        </el-form-item>
        <el-form-item label="路灯杆编号">
          <el-input v-model="form.ldgbh"></el-input>
        </el-form-item>

        <el-form-item label="有无危险物质">
          <el-select clearable v-model="form.ywwxwz">
            <el-option v-for="(item, index) in D_BZ_SF" :key="index" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="有无爆炸、泄露">
          <el-select clearable v-model="form.ywbzxl">
            <el-option v-for="(item, index) in D_BZ_SF" :key="index" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="有无被困人员">
          <el-select clearable v-model="form.ywbkry">
            <el-option v-for="(item, index) in D_BZ_SF" :key="index" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="是否涉外">
          <el-select clearable v-model="form.sfsw">
            <el-option v-for="(item, index) in D_BZ_SF" :key="index" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="是否外语报警">
          <el-select clearable v-model="form.sfswybj">
            <el-option v-for="(item, index) in D_BZ_SF" :key="index" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="报警方式">
          <el-input v-model="form.bjfsbh"></el-input>
        </el-form-item>
        <el-divider content-position="left"><i class="el-icon-timer">接警信息</i></el-divider>
        <el-form-item label="接警员编号">
          <el-input v-model="form.jjybh"></el-input>
        </el-form-item>
        <el-form-item label="接警员姓名">
          <el-input v-model="form.jjyxm"></el-input>
        </el-form-item>
        <el-form-item label="接警时间">
          <el-input v-model="form.jjsj"></el-input>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script setup>
import * as MOSTY from "@/components/MyComponents/index";
import { ref, getCurrentInstance, onMounted } from "vue";
import { getSelectVigilant } from "@/api/dpApi/home.js";
const { proxy } = getCurrentInstance();

const { D_BZ_XB } = proxy.$dict("D_BZ_XB");
const { D_BZ_SF } = proxy.$dict("D_BZ_SF");
const keyCount = ref(0); //tabel组件刷新值
const form = ref({}); //新增表单
const tableData = ref([]); //表格数据
const total = ref(0);
const pageNum = ref(1)
const pageSize = ref(20)
const chackAdd = ref(false); //新增修改切换
const loading = ref(false); //新增保存按钮截流
const ids = ref([]); //表格选中id集合
const searchBox = ref(null); //搜索盒子
const loadingTable = ref(true); //表格加载状态
const tableHeight = ref(); // 表格高度
const dialogFormVisible = ref(false);
const title = ref("新增"); //弹窗标题
const elform = ref(null); //新增表单容器
const dataRange = ref([])
const listQuery = ref({
  pageNum: 1,
  pageSize: 10,
  bjr_xm: '',
}); //搜索表单
//表单验证
const rules = ref({
  name: [{ required: true, message: "请输入名称", trigger: "change" }]
});

// 处理时间
function handleTime(val) {
  listQuery.value.startTime = val ? val[0] : ''
  listQuery.value.endTime = val ? val[1] : ''
}

// 获取列表
function getListData() {
  tableData.value = [];
  loadingTable.value = true;
  let data = { ...listQuery.value };
  getSelectVigilant(data).then((res) => {
    tableData.value = res.records
    total.value = res.total
    loadingTable.value = false;
  }).catch(() => {
    loadingTable.value = false;
  });
}
//关闭弹窗
function close() {
  dialogFormVisible.value = false;
  form.value = {};
}
//详情
function lookDetail(row) {
  chackAdd.value = false;
  form.value = row;
  title.value = "警情信息详情";
  dialogFormVisible.value = true;
}
//点击查询
const handleFilter = () => {
  listQuery.value.pageNum = 1;
  getListData();
};
//点击重置
const reset = () => {
  listQuery.value = { pageNum: 1, pageSize: 10 };
  dataRange.value = []
  getListData();
};
// 表格高度计算
const tabHeightFn = () => {
  tableHeight.value = window.innerHeight - searchBox.value.offsetHeight - 240;
};
/**
 * pageSize 改变触发
 */
const handleSizeChange = (currentSize) => {
  listQuery.value.pageSize = currentSize;
  getListData();
};

/**
 * 页码改变触发
 */
const handleCurrentChange = (currentPage) => {
  listQuery.value.pageNum = currentPage;
  getListData();
};
onMounted(() => {
  // getListData();
  tabHeightFn();
  window.onresize = function () {
    tabHeightFn();
  };
  proxy.mittBus.on("mittFn", (data) => {
    keyCount.value = data;
  });
});
</script>



<style lang='scss' scoped>
@import "~@/assets/css/layout.scss";
@import "~@/assets/css/element-plus.scss";
</style>
