<template>
    <MOSTY.PageTree :pageTitle="'未遂事件列表'" :searchType="'01'" @getDeptId="getdeptId">
        <template #serach>
            <el-divider />
            <div class="flxeL">
                <el-button @click="addInfo('add', null)" v-if='isAuth'><el-icon size="small">
                        <Plus />
                    </el-icon>新增</el-button>
            </div>
        </template>
        <template #table>
            <section class="eltab8">
                <MOSTY.Table :table-columns="tableColumn" :tableData="tableData" :tableloading="tableloading"
                    :isSelect="false" :isSort="true" @SortChange="SortChange" style="width: 100%;">
                    <!-- 操作 -->
                    <template #actions="{ row }">
                        <span class="operedit" v-if='isAuth' @click="addInfo('exit', row.id)" size="small"><el-icon>
                                <EditPen />
                            </el-icon>修改</span>
                        <el-popconfirm v-if='isAuth' confirm-button-text="是" cancel-button-text="否" icon-color="red"
                            title="确定要删除?" @confirm="delInfo(row)">
                            <template #reference>
                                <span class="operdel" size="small">
                                    <el-icon>
                                        <delete />
                                    </el-icon>删除</span>
                            </template>
                        </el-popconfirm>
                        <span class="operesee" @click="addInfo('see', row.id)" size="small"><el-icon>
                                <View />
                            </el-icon>查看</span>
                    </template>
                </MOSTY.Table>
            </section>
            <div class="fenye">
                <MOSTY.Pages :pageConfiger="listQuery" @changeNo="handleCurrentChange" @changeSize="handleSizeChange" />
            </div>
        </template>
    </MOSTY.PageTree>
    <!-- 新增 -->
    <div v-if="comprehensiveShow" class="dialog-box">
        <Addwssj v-if="comprehensiveShow" :saveBtnShow="saveBtnShow" :rowId="rowId" @close="close"
            :title="editObj.title" />
    </div>
</template>

<script setup>
// 引入
import { reactive, onMounted, ref } from "vue";
import Addwssj from "./Addwssj.vue";
import { getApi } from "@/api/tobAcco_api.js";
import * as MOSTY from "@/components/MyComponents/index";
import { getItem } from "@/utils/storage";
import { ElMessage } from "element-plus";
import { getAuth } from "@/utils/tools.js";
const comprehensiveShow = ref(false);
const rowId = ref(null)
const editObj = reactive({
    deptname: "",
    title: "",
    savebtn: true,
    seeimg: true
});
const tableData = ref([]);
// 分页
const listQuery = reactive({
    pageCurrent: 1,
    pageSize: 20,
    total: 0,
    orgid: ""
});
const searchArr = reactive([
    {
        showType: "input",
        prop: "orgname",
        width: '250px',
        placeholder: "请输单位名称"
    }
])
const tableColumn = ref([
    {
        title: "单位名称",
        prop: "orgname",
        sortable: true
    },
    {
        title: "部门",
        prop: "deptnames",
        sortable: true
    },
    {
        title: "发生时间",
        prop: "time",
        sortable: true
    },
    {
        title: "发生地点",
        prop: "address",
        sortable: true
    },
    {
        title: "发生过程和后果",
        prop: "consequences",
        sortable: true
    },
    {
        title: "操作",
        prop: "actions",
        slot: true
    }
])

const isAuth = ref(false)
onMounted(() => {
    isAuthorize()
});
// 是否可以操作
const isAuthorize = async () => {
    isAuth.value = await getAuth()
}
//获取部门数据
const getdeptId = (val) => {
    listQuery.orgid = val.id;
    listQuery.pageCurrent = 1;
    getListData();
};



function SortChange(prop, order) {
    if (prop == 'orgname') {
        listQuery.sortField = 'orgid'
    } else if (prop == 'deptname') {
        listQuery.sortField = 'deptid'
    } else {
        listQuery.sortField = prop
    }
    listQuery.sortOrder = order
    getTableData()
}
// 获取表格数据
const tableloading = ref(false);
function getListData() {
    tableloading.value = true;
    editObj.deptname = getItem("deptId").ssbmid;
    getApi(
        listQuery,
        `/mosty-jcgl/wssj/getPageList`
    ).then((res) => {
        if (res.records) {
            tableloading.value = false;
            tableData.value = res.records;
            listQuery.total = res.total;
        } else {
            tableData.value = [];
            tableloading.value = false;
        }
    }).finally(() => {
        tableloading.value = false;
    });
}
//弹窗关闭
const close = () => {
    comprehensiveShow.value = false;
    getListData();
};

const saveBtnShow = ref(true);
//新增
function addInfo(type, id) {
    if (type == 'add') {
        rowId.value = null;
        saveBtnShow.value = true;
        editObj.title = "未遂事件新增";
    } else if (type == 'exit') {
        rowId.value = id
        editObj.title = "未遂事件修改";
        saveBtnShow.value = true;

    } else {
        rowId.value = id
        saveBtnShow.value = false;
        editObj.title = "未遂事件详情";
    }
    comprehensiveShow.value = true;

}

//删除
function delInfo(row) {
    getApi(
        {}, `/mosty-jcgl/wssj/del/${row.id}`
    ).then((res) => {
        ElMessage.success("删除成功");
        getListData();
    });
}
//分页
const handleSizeChange = (currentSize) => {
    listQuery.pageSize = currentSize;
    getListData();
};
const handleCurrentChange = (currentPage) => {
    listQuery.pageCurrent = currentPage;
    getListData();
};
</script>

<style lang="scss" scoped>
.flxeL {
    margin-bottom: 10px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}
</style>