<template>
    <el-dialog :title="props.title" width="1400px" v-model="dialogVisible" @close="onClose">
        <div style="display: flex;justify-content: end;padding: 10px;">
            <el-button type="primary" @click="onAdd">新增</el-button>
        </div>
        <el-table border :data="dataTable" style="width: 100%" v-loading="tableLoading"
            :header-cell-style="{ background: '#F6F6F6' }" height="500">
            <el-table-column :prop="item.prop" :label="item.label" v-for="(item, i) in tableColumn" :key="i">
            </el-table-column>
            <el-table-column header-align="center" align="center" prop="occupationalHazardName" label="接触职业危害因素/特殊作业类别">
                <template #default="{ row }">
                    {{ row.examinationTypeCode == 1 ? row.occupationalHazardName : row.specialJobCategorieName }}
                </template>
            </el-table-column>
            <el-table-column align="center" label="操作" width="170">
                <template #default="{ row }">
                    <el-link type="primary" @click="handleDetail(row, 'edit')" v-if="props.isEdit">编辑</el-link>
                    <el-link type="primary" @click="handleDetail(row, 'view')">查看</el-link>
                    <el-popconfirm confirm-button-text="是" cancel-button-text="否" icon-color="red" title="确定要删除?"
                        @confirm="onDelete(row)">
                        <template #reference>
                            <el-link type="danger">删除</el-link>
                        </template>
                    </el-popconfirm>
                </template>
            </el-table-column>
        </el-table>
        <MOSTY.Pages :pageConfiger="query" @changeNo="handleCurrentChange" @changeSize="handleSizeChange">
        </MOSTY.Pages>

    </el-dialog>
    <DetailDialog v-if="detailVisible" @closeDetail="detailDialogClose" :id="rowId" :title="detailTitle"
        :isDetail="props.isDetail" :rowItem="rowItem" />
</template>

<script setup>
import { onMounted, ref, reactive } from "vue"
import { getApi, postApi } from "@/api/tobAcco_api.js"
import * as MOSTY from "@/components/MyComponents/index"
import DetailDialog from './dialog.vue'
import { ElMessage } from "element-plus"
const props = defineProps({
    item: Object,
    title: String,
    isDetail: {
        type: Boolean,
        default: false
    },
    isEdit: {
        type: Boolean,
        default: true
    },
    rowItem: Object
})
const emits = defineEmits(["close"]);
const dialogVisible = ref(true)
const detailVisible = ref(false)
const detailTitle = ref('')
const dataTable = ref([])
const rowId = ref(null)
// const rowItem = ref()
const query = ref({
    pageCurrent: 1,
    pageSize: 10,
    total: 0
})
const total = ref(0)
const tableColumn = ref([
    { label: "企业名称", prop: "baOrgName" },
    { label: "体检类型", prop: "examinationTypeName" },
    // { label: "接触职业危害因素/特殊作业类别", prop: "occupationalHazardName" },
    { label: "人员类别", prop: "bbEohPersonnelCategoryName" },
    { label: "人数", prop: "personnelQty" }
])
const tableLoading = ref(false)
const onClose = () => {
    emits('close', true)
};
const onDelete = row => {
    console.log('row: ', row);
    getApi({}, `/mosty-jcgl/data/Personnel/delDetailById?id=${row.sourceId}`).then(res => {
        if (res) {
            ElMessage({
                message: "删除成功",
                type: "success"
            })
            getDataList()
        }
    })
}
const onAdd = () => {
    detailTitle.value = '新增'
    detailVisible.value = true
}
const detailDialogClose = (val) => {
    detailVisible.value = false
    if (val) {
        getDataList()
    }
}
const getDataList = () => {
    dataTable.value = []
    tableLoading.value = true
    let _url = props.isDetail ? "getListDetail" : "getLsjlList"
    postApi({ ...query.value, ...props.item }, `/mosty-jcgl/data/Personnel/${_url}`).then(res => {
        if (res) {
            dataTable.value = props.isDetail ? res.records : res
            tableLoading.value = false
            query.value.total = Number(res.total || 0);
            query.value.total = res.total ? res.total : 0
        }
    })
}
const handleDetail = (row, type) => {
    detailTitle.value = (type === 'edit' ? '编辑' : '查看') + row.orgName
    rowId.value = row.sourceId
    detailVisible.value = true
}
// 切换条数
const handleSizeChange = val => {
    query.value.pageSize = val
    getDataList()
}
// 切换分页
const handleCurrentChange = val => {
    query.value.pageCurrent = val
    getDataList()
}
onMounted(() => {
    getDataList()
})
</script>

<style lang="scss" scoped></style>