<template>


    <div class="bottom">
        <el-divider />
        <Search :searchArr="searchArr" @submit="onSearch">
        </Search>
        <el-divider />
        <div class="btnBox">
            <el-button v-if="showadd && showkb" @click="addkb"><el-icon size="small">
                    <Plus />
                </el-icon>新增快报</el-button>
            <el-button type="primary" @click="onloadExcel" v-loading="loading">
                <el-icon>
                    <Download />
                </el-icon>
                <span>导出</span>
            </el-button>
        </div>
        <section class="eltab4">
            <MOSTY.Table :table-columns="data.tableColumn" :tableData="data.tableData" :tableloading="tableloading"
                :isSelect="true" :isSort="true" @SortChange="SortChange" style="width: 100%;">
                <template #status="{ row }">
                    <div>
                        <span v-if="row.reject == '2'" class="danger">待重新上报</span>
                        <span v-else class="success">{{ row.status }}</span>
                    </div>
                </template>
                <template #time="{ row }">
                    <div>
                        <span v-if="row.time" class="danger">{{ row.time }}</span>
                        <span v-else class="success">- -</span>
                    </div>
                </template>
            </MOSTY.Table>
        </section>
    </div>
    <div v-if="showAddSjkb" class="dialog-box">
        <AddSjkb :editObj="data.sgkbObj" :title='sgtitle' @close="showAddSjkb = false, getTableData()" />
    </div>

</template>

<script setup>
import * as MOSTY from "@/components/MyComponents/index";
import AddSjkb from "@/views/sggl/sgbg/sgyb/AddOrEdite/AddSjkb.vue"
import Search from "@/components/aboutTable/Search/index.vue";
import { ElMessage } from "element-plus";
import { getApi, postApi } from "@/api/tobAcco_api.js";
import { getItem } from "@/utils/storage";
import { exportXlsx } from "@/excel/Export2Excel.js";
import { formatTime, dateFormat } from "@/utils/tools.js";
import { reactive, ref, watch, onMounted, getCurrentInstance } from "vue";
const emit = defineEmits("changePage");
const { proxy } = getCurrentInstance();
const { D_BZ_WPDW } = proxy.$dict("D_BZ_WPDW");
const sgtitle = ref('')
const showAddSjkb = ref(false);//是否显示新增快报
const props = defineProps({ orgCode: String, orgname: String })
const tableloading = ref(false);
const showkb = ref(false)
const showadd = ref(false)
const loading = ref(false)
const listQuery = reactive({
    time: ref(formatTime(null, 'ym'))
});
const searchArr = reactive([
    {
        showType: "month",
        prop: "time",
        defaultVal: ref(formatTime(null, 'ym')),
        width: '250px',
    }
]);
const data = reactive({
    searchObj: {},
    tableData: [],
    tableColumn: [
        {
            title: "上报名称",
            prop: "name",
            sortable: true
        },
        {
            title: "上报时间",
            prop: "name",
            sortable: true
        },
        {
            title: "上报状态",
            prop: "status",
            slot: true,
            sortable: true
        },
        {
            title: "事故名称",
            prop: "time",
            slot: true,
            sortable: true
        },
        {
            title: "事故类型",
            prop: "time",
            slot: true,
            sortable: true
        },
        {
            title: "事故类别级别",
            prop: "time",
            slot: true,
            sortable: true
        },
        {
            title: "人员轻微伤数量",
            prop: "time",
            slot: true,
            sortable: true
        },
        {
            title: "人员重伤数量",
            prop: "time",
            slot: true,
            sortable: true
        },
        {
            title: "人员亡数量",
            prop: "time",
            slot: true,
            sortable: true
        },
        {
            title: "事故认定",
            prop: "time",
            slot: true,
            sortable: true
        }
    ],

});
watch(
    () => props.orgCode,
    (val) => {
        if (val) {
            getTableData()
        }

    },
    { deep: true, immediate: true }
);


onMounted(() => {
});


//排序

// function SortChange(prop, order) {
//     listQuery.sortField = prop
//     listQuery.sortOrder = order
//     getTableData()
// }
const onSearch = (obj) => {
    listQuery.time = obj.time;
    getTableData()
};
//获取列表数据
function getTableData() {
    tableloading.value = true;
    // getApi(
    //     listQuery,
    //     '/mosty-jcgl/sgyb/queryAllSgyb'
    // ).then((res) => {
    //     if (res) {
    //         tableloading.value = false;
    //         data.tableData = res;
    //     } else {
    //         data.tableData = [];
    //         tableloading.value = false;
    //     }
    // });
}


//导出Excel
function onloadExcel() {
    let title = {
        oname: '单位名称',
        name: '报告名称',
        state: '状态',
        time: '上报时间',
    }
    loading.value = true
    getApi(listQuery, '/mosty-jcgl/sgyb/queryAllSgyb').then((res) => {
        if (res) {
            let data = res
            if (data.length > 0) {
                data.forEach(el => {
                    if (el.status == '1') {
                        el.state = '未上报'
                    }
                });
                let tablename = `${listQuery.time}事故事件月报总览.xlsx`
                let tabletitle = `${listQuery.time}事故事件月报总览`
                exportXlsx(title, data, tabletitle, tablename);
            }
            loading.value = false

        } else {
            ElMessage.warning('暂无数据');
            loading.value = false
        }


    }).catch(err => {
        loading.value = false
    })
}
</script>

<style lang="scss" scoped>
.eltab4 {
    height: calc(100vh - 360px);
}

.usermanage {
    display: flex;

    .title {
        height: 60px;
        line-height: 60px;
        font-size: 18px;
        color: #0f3916;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }



    .right {
        padding: 0 10px;
        margin: 0px 14px;
        background: #fff;

        .head {
            display: flex;
            justify-content: space-between;
        }

        .fenye {
            top: 95%;
        }
    }
}

.btnBox {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-bottom: 12px;
}
</style>