<template>
    <el-dialog :title="props.title" width="1400px" v-model="dialogVisible" @close="onClose">
        <el-button @click="onAdd" v-if="props.title.includes('编辑')" style="margin-bottom: 10px; float: right">
            <el-icon>
                <Plus />
            </el-icon>新增</el-button>
        <el-table border :data="dataTable" style="height: 50vh;width: 100%" v-loading="tableLoading"
            :header-cell-style="{ background: '#F6F6F6' }">
            <el-table-column :prop="item.prop" :label="item.label" v-for="(item, i) in tableColumn" :key="i">
            </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 v-if="props.isEdit" confirm-button-text="是" cancel-button-text="否" icon-color="red"
                        title="确定要删除?" @confirm="detelChange(row)">
                        <template #reference>
                            <el-link type="danger">删除</el-link>
                        </template>
                    </el-popconfirm>
                </template>
            </el-table-column>
        </el-table>
        <div class="flex just-center" v-if="total > 0">
            <el-pagination class="pagination" @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :current-page="query.pageCurrent" :page-sizes="[2, 5, 10, 20]" :page-size="query.pageSize"
                layout="total, prev, pager, next, sizes, jumper" :total="total"></el-pagination>
        </div>
    </el-dialog>
    <DetailDialog v-if="detailVisible" @closeDetail="detailDialogClose" :id="rowId" :title="detailTitle"
        :rowItem="props.rowItem" :savebtn="savebtn" :isDetail="props.isDetail" :query="props.query" />
</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,
    query: Object
})
const emits = defineEmits(["close"]);
const dialogVisible = ref(true)
const detailVisible = ref(false)
const savebtn = ref(false)
const detailTitle = ref('')
const dataTable = ref([])
const rowId = ref(null)
const query = ref({
    pageCurrent: 1,
    pageSize: 10,
})
const total = ref(0)
const tableColumn = ref([
    { label: "企业名称", prop: "orgName" },
    { label: "风险评价类型", prop: "riskEvaluateTypeName" },
    { label: "风险单元等级", prop: "riskUnitLevelName" },
    { label: "风险单元数量", prop: "riskUnitQty" },
])
const tableLoading = ref(false)
onMounted(() => {
    getDataList()
})
const onClose = () => {
    emits('close', true)
};
const detailDialogClose = (val) => {
    detailVisible.value = false
    getDataList()
}
const getDataList = () => {
    dataTable.value = []
    tableLoading.value = true
    let _url = props.isDetail ? "/data/riskUnitDist/getListDetail" : "/data/riskUnitDist/getLsjlList"
    postApi({ ...query.value, ...props.item }, `/mosty-jcgl${_url}`).then(res => {
        if (res) {
            dataTable.value = props.isDetail ? res.records : res
            tableLoading.value = false
            total.value = Number(res.total || 0);
            total.value = props.isDetail ? res.total : 0
        }
    })
}
const handleDetail = (row, type) => {
    detailTitle.value = (type === 'edit' ? '编辑' : '查看') + row.orgName
    savebtn.value = (type === 'edit' ? true : false)
    rowId.value = row.sourceId
    detailVisible.value = true
}
const onAdd = () => {
    detailTitle.value = '新增' + props.rowItem.orgName
    rowId.value = null
    savebtn.value = true
    detailVisible.value = true
}
// 切换条数
const handleSizeChange = val => {
    query.value.pageSize = val
    getDataList()
}
// 切换分页
const handleCurrentChange = val => {
    query.value.pageCurrent = val
    getDataList()
}

//删除
function detelChange(row) {
    postApi([row.sourceId], '/mosty-jcgl/data/riskUnitDist/del').then(res => {
        ElMessage.success(`删除成功`);
        getDataList()
    })
}

</script>

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