<template>


    <div class="bottom">
        <el-divider />
        <MOSTY.Search :searchArr="searchArr" @submit="onSearch" />
        <el-divider />
        <div class="btnBox">
            <el-button @click="addkb('add', null)"><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" actionsW="280" @SortChange="SortChange" style="width: 100%;">
                <template #type="{ row }">
                    <dict-tag :options="D_BZ_SGSJLB" :value="row.type" :tag="false" />
                </template>
                <template #grade="{ row }">
                    <dict-tag :options="D_BZ_SGDJ" :value="row.grade" :tag="false" />
                </template>
                <template #affirm="{ row }">
                    <dict-tag :options="D_BZ_RDZT" :value="row.affirm" :tag="false" />
                </template>
                <template #status="{ row }">
                    <dict-tag :options="D_BZ_SGKB_LCZT" :value="row.status" :tag="false" />
                </template>
                <template #reject="{ row }">
                    <span v-if="row.reject" style="color: red;">{{ row.reject }}</span>
                    <span v-else>--</span>
                </template>
                <!-- 操作 -->
                <template #actions="{ row }">
                    <el-popconfirm v-if="row.status == '00'" confirm-button-text="是" cancel-button-text="否"
                        icon-color="red" title="确定要上报?" @confirm="onloadfil(row)">
                        <template #reference>
                            <span class="operedown">
                                <el-icon>
                                    <Top />
                                </el-icon>
                                上报</span>
                        </template>
                    </el-popconfirm>

                    <span class="operedit" @click="addkb('exit', row.id)" v-if="row.status == '00'">
                        <el-icon>
                            <EditPen />
                        </el-icon>
                        修改</span>
                    <el-popconfirm v-if="row.status == '00'" confirm-button-text="是" cancel-button-text="否"
                        icon-color="red" title="确定要删除?" @confirm="handledelete(row)">
                        <template #reference>
                            <span class="operdel" size="small">
                                <el-icon>
                                    <Delete />
                                </el-icon>
                                删除</span>
                        </template>
                    </el-popconfirm>
                    <span class="operesee" @click="addkb('see', row.id)">
                        <el-icon>
                            <View />
                        </el-icon> 查看</span>
                </template>
            </MOSTY.Table>
        </section>
        <div class="fenye">
            <MOSTY.Pages :pageConfiger="data.pageConfiger" @changeNo="changeNo" @changeSize="changeSize" />

        </div>
    </div>
    <div v-if="showAddSjkb" class="dialog-box">
        <AddSjkb v-if="showAddSjkb" :rowId="rowId" :savebtn="savebtn"
            :zdlist="{ D_BZ_SGSJLB, D_BZ_SGDJ, D_BZ_SGRD, D_BZ_RDZT }" :title='sgtitle'
            @close="showAddSjkb = false, getTableData()" />
    </div>

</template>

<script setup>
import * as MOSTY from "@/components/MyComponents/index";
import { filterYear } from "@/utils/auth.js";
import AddSjkb from "@/views/sggl/sgbg/sgyb/AddOrEdite/AddSjkb.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 { reactive, ref, watch, onMounted, getCurrentInstance } from "vue";
const emit = defineEmits("changePage");
const { proxy } = getCurrentInstance();
const { D_BZ_SGSJLB, D_BZ_SGDJ, D_BZ_SGRD, D_BZ_RDZT, D_BZ_SGKB_LCZT } = proxy.$dict("D_BZ_SGSJLB", "D_BZ_SGDJ", "D_BZ_SGRD", "D_BZ_RDZT", "D_BZ_SGKB_LCZT");
const searchArr = reactive([
    {
        showType: "select",
        prop: "year",
        width: '250px',
        defaultVal: new Date().getFullYear(),
        options: filterYear(7),
    },
    {
        showType: "selectTree",
        prop: "type",
        width: '250px',
        options: 'D_BZ_SGSJLB',
        placeholder: '请选择事故类型查询'
    },
    {
        showType: "select",
        prop: "grade",
        width: '250px',
        options: D_BZ_SGDJ,
        placeholder: '请选择事故级别查询'
    },
]);
const sgtitle = ref('')
const rowId = ref(null)
const savebtn = ref(false)
const props = defineProps({ deptobj: Object, })
const tableloading = ref(false);
const loading = ref(false)
const showAddSjkb = ref(false)
const listQuery = reactive({
    pageCurrent: 1,
    pageSize: 20,
});

const data = reactive({
    searchObj: {},
    tableData: [],
    tableColumn: [

        {
            title: "事故名称",
            prop: "name",
            sortable: true
        },
        {
            title: "事故类型",
            prop: "type",
            slot: true,
            sortable: true
        },
        {
            title: "事故级别",
            prop: "grade",
            slot: true,
            sortable: true
        },
        {
            title: "认定状态",
            prop: "affirm",
            slot: true,
            sortable: true
        },
        {
            title: "人员轻微伤数量",
            prop: "slight",
            sortable: true
        },
        {
            title: "人员重伤数量",
            prop: "serious",
            sortable: true
        },
        {
            title: "人员死亡数量",
            prop: "dead",
            sortable: true
        },
        {
            title: "经济损失(万元)",
            prop: "damageMoney",
            sortable: true
        },
        {
            title: "简要经过",
            prop: "accidentDetail",
            sortable: true
        },
        {
            title: "上报状态",
            prop: "status",
            slot: true,
            sortable: true
        },
        {
            title: "驳回状态",
            prop: "reject",
            slot: true,
            sortable: true
        },
        {
            title: "操作",
            prop: "actions",
            slot: true,
        }
    ],

    pageConfiger: {
        pageSize: 20,
        pageCurrent: 1,
        total: 0
    }
});
watch(
    () => props.deptobj,
    (val) => {
        if (val) {
            listQuery.pageCurrent = 1
            listQuery.orgcode = val.id
            data.pageConfiger.pageCurrent = 1;
            getTableData()
        }

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

onMounted(() => {
});

function onSearch(obj) {
    listQuery.type = obj.type
    listQuery.grade = obj.grade
    listQuery.year = obj.year
    listQuery.pageCurrent = 1;
    data.pageConfiger.pageCurrent = 1;
    getTableData()
}
//排序
function SortChange(prop, order) {
    listQuery.sortField = prop
    listQuery.sortOrder = order
    getTableData()
}

//获取列表数据
function getTableData() {
    tableloading.value = true;
    getApi(
        listQuery,
        "/mosty-jcgl/accidentKb/getPageList"
    ).then((res) => {
        if (res.records) {
            tableloading.value = false;
            data.tableData = res.records;
            data.pageConfiger.total = res.total;
        } else {
            data.tableData = [];
            tableloading.value = false;
        }
    });
}
//上报
function onloadfil(row) {
    getApi({ id: row.id }, '/mosty-jcgl/accidentKb/reporting').then(res => {
        ElMessage.success("上报成功");
        getTableData()
    })
}
const changeNo = (val) => {
    listQuery.pageCurrent = val;
    data.pageConfiger.pageCurrent = val;
    getTableData();
};
const changeSize = (val) => {
    listQuery.pageSize = val;
    data.pageConfiger.pageSize = val;
    getTableData();
};
//新增s事故快报
function addkb(type, id) {
    if (type == 'add') {
        rowId.value = null
        sgtitle.value = '事故快报新增'
        savebtn.value = true
    } else if (type == 'exit') {
        rowId.value = id
        sgtitle.value = '事故快报修改'
        savebtn.value = true
    } else {
        rowId.value = id
        sgtitle.value = '事故快报查看'
        savebtn.value = false
    }
    showAddSjkb.value = true
}

//	删除 事故月报
function handledelete(row) {
    postApi({}, `/mosty-jcgl/accidentKb/del/${row.id}`).then(res => {
        ElMessage.success("删除成功");
        getTableData()
    })
}
//导出Excel
function onloadExcel() {
    let title = {
        name: '事故名称',
        type: '事故类型',
        grade: '事故级别',
        affirm: '认定状态',
        slight: '人员轻微伤数量',
        serious: '人员重伤数量',
        dead: '人员死亡数量',
        damageMoney: '经济损失(万元)',
        accidentDetail: '简要经过',
        status: '上报状态',
        rejectq: '驳回状态',
    }
    loading.value = true
    getApi(listQuery, '/mosty-jcgl/accidentKb/exportData').then((res) => {
        if (res) {
            let data = res
            if (data.length > 0) {
                data.forEach(el => {
                    el.rejectq = el.rejectq ? el.rejectq : '--';
                    el.type = proxy.$getDictVal(el.type, D_BZ_SGSJLB);
                    el.grade = proxy.$getDictVal(el.grade, D_BZ_SGDJ);
                    el.affirm = proxy.$getDictVal(el.affirm, D_BZ_RDZT);
                    el.status = proxy.$getDictVal(el.status, D_BZ_SGKB_LCZT);
                });
                let tablename = `事故事件快报列表.xlsx`
                exportXlsx(title, data, '事故事件快报列表', tablename);
                loading.value = false
            } else {
                ElMessage.warning('暂无数据');
                loading.value = false
            }
        }

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

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

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