<template>
    <div>
        <div class="titleBox">
            <PageTitle title="查看详情">
                <el-button size="small" @click="goback">返回</el-button>
            </PageTitle>
        </div>
        <!-- 搜索 -->
        <div ref="searchBox">
            <Search :searchArr="searchConfiger" @submit="onSearch"></Search>
        </div>
        <!-- 表格 -->
        <div class="tabBox">
            <MyTable :tableData="pageData.tableData" :tableColumn="pageData.tableColumn" :tableHeight="pageData.tableHeight" :key="pageData.keyCount" :tableConfiger="pageData.tableConfiger" :controlsWidth="pageData.controlsWidth">
                <template #jqlbdm="{ row }">
                    <DictTag :tag="false" :value="row.jqlbdm" :options="JQLB" />
                </template>
                <template #controls="{ row }">
                    <el-link type="primary" @click="addEdit( row)">详情</el-link>
                </template>
            </MyTable>
            <Pages @changeNo="changeNo" @changeSize="changeSize" :tableHeight="pageData.tableHeight" :pageConfiger="{ ...pageData.pageConfiger, total: pageData.total }"></Pages>
        </div>
    </div>
    <Particulars ref="particulars" />
</template>

<script setup>
import Particulars from "./particulars.vue";
import PageTitle from "@/components/aboutTable/PageTitle.vue";
import MyTable from "@/components/aboutTable/MyTable.vue";
import Pages from "@/components/aboutTable/Pages.vue";
import Search from "@/components/aboutTable/Search.vue";
import { qcckPost } from "@/api/qcckApi.js";
import { reactive, ref, onMounted, defineEmits,getCurrentInstance } from "vue";
const { proxy } = getCurrentInstance();
const { JQLB } = proxy.$dict( "JQLB" ); //获取字典数据
const emit = defineEmits(['change']);
const particulars = ref()
const searchBox = ref(); //搜索框
const searchConfiger = ref([
    { label: "研判名称", prop: 'ypmc', placeholder: "请输入研判名称", showType: "input" },
]);
const queryFrom = ref({});
const pageData = reactive({
    tableData: [], //表格数据
    keyCount: 0,
    tableConfiger: {
        rowHieght: 61,
        showSelectType: "null",
        loading: false
    },
    total: 0,
    pageConfiger: {
        pageSize: 20,
        pageCurrent: 1
    }, //分页
    controlsWidth: 160, //操作栏宽度
    tableColumn: [
        { label: "研判名称", prop: "ypmc" },
        { label: "报警时间", prop: "bjsj" },
        { label: "报警地址", prop: "bjdz" },
        { label: "警情类型", prop: "jqlbdm",showSolt:true },
        { label: "报警内容", prop: "bjnr", showOverflowTooltip: true },
        { label: "报警电话", prop: "bjdh" },
        { label: "报警时间", prop: "bjsj" },
    ]
});
onMounted(() => {
    tabHeightFn();
    getList();
});

// 搜索
const onSearch = (val) => {
    queryFrom.value = { ...queryFrom.value,...val };
    pageData.pageConfiger.pageCurrent = 1;
    getList();
};

const changeNo = (val) => {
    pageData.pageConfiger.pageCurrent = val;
    getList();
};
const changeSize = (val) => {
    pageData.pageConfiger.pageSize = val;
    getList();
};

const getList = () => {
    pageData.tableConfiger.loading = true;
    let data = {
        ...queryFrom.value,
        pageCurrent: pageData.pageConfiger.pageCurrent,
        pageSize: pageData.pageConfiger.pageSize
    }
    qcckPost(data, '/mosty-gsxt/jjdbYp/getPageList').then(res => {
        pageData.tableData = res.records;
        pageData.total = res.total;
        pageData.tableConfiger.loading = false;
    }).catch(() => {
        pageData.tableConfiger.loading = false;
    });
};


const addEdit = (row) => {
  particulars.value.init(row)
}

const goback = () => {
    emit('change', { type: '态势预警列表', data: null })
}

// 表格高度计算
const tabHeightFn = () => {
    pageData.tableHeight = window.innerHeight - searchBox.value.offsetHeight - 250;
    window.onresize = function () {
        tabHeightFn();
    };
};
</script>

<style>
.el-loading-mask {
    background: rgba(0, 0, 0, 0.5) !important;
}
</style>
