<template>
    <div>
        <!-- 查询 -->
        <div class='tabox'>
            <div class="headBox3">
                <el-input placeholder="请输入内部编号进行查询" v-model="pageData.listQuery.nbbh" style='width:250px'></el-input>
                <el-button type="primary" @click="getzblist" class="ml6">
                    <el-icon>
                        <Search />
                    </el-icon>
                    <span>查询1</span>
                </el-button>
                <el-button type="primary" @click="addUserHander">
                    <el-icon>
                        <Plus />
                    </el-icon>
                    <span>新增1</span>
                </el-button>
            </div>
            <MOSTY.Table :table-columns="pageData.tableColumns" :tableData="pageData.tableData"
                :tableloading="tableloading" :tableHeight="'40vh'">
                <template #sex="{ row }">
                    <dict-tag :options="D_BZ_XB" :value="row.sex" :tag="false" />
                </template>
                <template #certificateType="{ row }">
                    <dict-tag :options="D_BZ_PYYYLX" :value="row.certificateType" :tag="false" />
                </template>
                <template #status="{ row }">
                    <dict-tag :options="D_BZ_HZZT" :value="row.certificateType" :tag="false" />
                </template>
                <template #actions="{ row, $index }">
                    <span class="operedit" @click="handlexg(row, $index)">
                        <el-icon>
                            <EditPen />
                        </el-icon>编辑</span>
                    <el-popconfirm v-if='props.obj.saveBtnShow' confirm-button-text="是" cancel-button-text="否"
                        icon-color="red" title="确定要删除?" @confirm="handledelete(row, $index)">
                        <template #reference>
                            <span class="operdel" size="small">
                                <el-icon>
                                    <Delete />
                                </el-icon>
                                删除</span>
                        </template>
                    </el-popconfirm>
                    <span class="operesee" @click="handleSee(row)">
                        <el-icon>
                            <View />
                        </el-icon>查看</span>
                </template>
                <template #fenye>
                    <div class="fenye" :style="{ top: tableHeight + 'px' }">
                        <el-pagination class="pagination" @size-change="handleSizeChange"
                            @current-change="handleCurrentChange" :current-page="pageData.listQuery.pageCurrent"
                            background :page-sizes="[2, 5, 10, 20]" :page-size="pageData.listQuery.pageSize"
                            layout="total,  prev, pager, next, sizes, jumper" :total="total"></el-pagination>
                    </div>
                </template>
            </MOSTY.Table>
        </div>
    </div>
    <!--安全装置-->
    <div class="dialog-box" v-if="showdialogjzw">
        <XgfDetail @saveSuccess="saveSuccess" @close="showdialogjzw = false" :title="title"
            :relatedPartyId="props.obj.id" :type="type" :id="id" />
    </div>
</template>
<script setup>
import * as MOSTY from "@/components/MyComponents/index";
import XgfDetail from "@/components/MyComponents/TabList/XgfDetail.vue";
import { reactive, ref, onMounted, getCurrentInstance } from "vue"
import { postApi } from "@/api/tobAcco_api.js";
import { ElMessage } from "element-plus";
const { proxy } = getCurrentInstance();
const { D_BZ_PYYYLX, D_BZ_XB, D_BZ_HZZT } = proxy.$dict("D_BZ_PYYYLX", "D_BZ_XB", "D_BZ_HZZT");
const emits = defineEmits(["handleChange", 'searchChange']);
const props = defineProps({
    obj: {
        default: () => { },
        type: Object
    },

});
const tableloading = ref(false);
const showdialogjzw = ref(false);
const total = ref(0)
const title = ref('')
const type = ref('')
const id = ref('')
const pageData = reactive({
    listQuery: {
        pageCurrent: 1,
        pageSize: 5,
        relatedPartyId: props.obj.id
    },
    tableColumns: [
        {
            title: "人员姓名",
            prop: "personName"
        },
        {
            title: "性别",
            prop: "sex",
            slot: true
        },
        {
            title: "身份证号",
            prop: "idCard",
        },
        {
            title: "证书类型",
            prop: "certificateType",
            slot: true
        },
        {
            title: "证书编号",
            prop: "certificateNumber",
        },
        {
            title: "状态",
            prop: "status",
            slot: true
        },
        {
            title: "操作",
            prop: "actions",
            slot: true
        }
    ],
    tableData: []
})
onMounted(() => {
    //获取子表
    getzblist()
});
//获取列表
function getzblist() {
    postApi(pageData.listQuery, '/mosty-jcgl/relatedPartyPerson/queryRelatedPartyPerson').then(res => {
        pageData.tableData = res.records
            ? res.records : [];
        total.value = res.total
    })
}
//新增
function addUserHander() {
    id.value = ''
    title.value = '相关方人员资质新增';
    showdialogjzw.value = true
    type.value = 'edit'
}
//修改
function handlexg(row) {
    id.value = row.id
    title.value = '相关方人员资质修改';
    showdialogjzw.value = true
    type.value = 'edit'
}
//查看
function handleSee(row) {
    id.value = row.id
    title.value = '相关方人员资质详情';
    showdialogjzw.value = true
    type.value = 'view'
}
//删除
function handledelete(row) {
    postApi({}, `/mosty-jcgl/relatedPartyPerson/delRelatedPartyPerson/${row.id}`).then(res => {
        ElMessage.success("删除成功");
        getzblist()
    })
}
const saveSuccess = () => {
    showdialogjzw.value = false
    getzblist()
}
</script>

<style lang="scss" scoped>
.headBox3 {
    display: flex;
    justify-content: end;
    width: 100%;
    margin-bottom: 10px;
}

.top_ul {
    display: flex;
    justify-content: start;
    flex-wrap: wrap;

    >li {
        width: 15%;
        height: 83px;
        margin: 6px 32px;
    }
}
</style>