<template>
    <div>
        <!-- 查询 -->
        <div class='tabox'>
            <div class="headBox" v-if='props.isEdit'>
                <el-button type="primary" @click="addUserHander">
                    <el-icon>
                        <Plus />
                    </el-icon>
                    <span>新增</span>
                </el-button>
            </div>
            <MOSTY.Table :table-columns="pageData.tableColumns" :tableData="pageData.tableData" :key="inkey"
                :tableloading="tableloading" :tableHeight="'40vh'">
                <template #sex="{ row }">
                    <dict-tag :options="D_BZ_XB" :value="row.sex" :tag="false" />
                </template>
                <template #zslx="{ row }">
                    <dict-tag :options="D_TB_ZSLB" :value="row.zslx" :tag="false" />
                </template>
                <template #state="{ row }">
                    <dict-tag :options="D_BZ_JHZT" :value="row.state" :tag="false" />
                </template>
                <template #actions="{ row }">
                    <el-popconfirm 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>
                </template>
            </MOSTY.Table>
            <div class="fenye">
                <MOSTY.Pages :pageConfiger="pageData.pageConfiger" @changeNo="handleCurrentChange"
                    @changeSize="handleSizeChange" />
            </div>
        </div>
    </div>
    <!-- 选择相关方人员 -->
    <Xgfrytable v-model="chooseUserVisible" :Single="false" :data="memberList" :leaderid="leaderid"
        :relatedid="props.obj.id" @choosedUsers="getSonValue"></Xgfrytable>
</template>
<script setup>
import * as MOSTY from "@/components/MyComponents/index";
import { reactive, ref, onMounted, getCurrentInstance } from "vue"
import { postApi, getApi } from "@/api/tobAcco_api.js";
import { ElMessage } from "element-plus";
import Xgfrytable from "./tab/xgfrytable.vue";
const { proxy } = getCurrentInstance();
const { D_TB_ZSLB, D_BZ_XB, D_BZ_JHZT } = proxy.$dict("D_TB_ZSLB", "D_BZ_XB", "D_BZ_JHZT");
const emits = defineEmits(["handleChange", 'searchChange']);
const props = defineProps({
    obj: {
        default: () => { },
        type: Object
    },
    // 是否可以编辑
    isEdit: {
        type: Boolean,
        default: true
    },

});
const inkey = ref(1)
const tableloading = ref(false);
const chooseUserVisible = ref(false);
const memberList = ref([])
const leaderid = ref('')
const pageData = reactive({
    listQuery: {
        pageCurrent: 1,
        pageSize: 5,
        id: props.obj.id
    },
    pageConfiger: {
        pageSize: 5,
        pageCurrent: 1,
        total: 0
    },
    tableColumns: [
        {
            title: "人员姓名",
            prop: "xm"
        },
        {
            title: "性别",
            prop: "sex",
            slot: true
        },
        {
            title: "身份证号",
            prop: "idcard",
        },
        {
            title: "证书类型",
            prop: "zslx",
            slot: true
        },
        {
            title: "证书编号",
            prop: "zsbh",
        },
        {
            title: "状态",
            prop: "state",
            slot: true
        }
    ],
    tableData: []
})
onMounted(() => {
    if (props.isEdit) {
        pageData.tableColumns.push({
            title: "操作",
            prop: "actions",
            slot: true
        })
        inkey.value++
    } else if (pageData.tableColumns.at(-1).prop == 'actions') {
        pageData.tableColumns.pop()
        inkey.value++
    }

    //获取子表
    getzblist()
});
//获取列表
function getzblist() {
    getApi(pageData.listQuery, '/mosty-jcgl/relatedpartyinfo/getRelatedUserPage').then(res => {
        pageData.tableData = res.records ? res.records : [];
        memberList.value = res.records.map((item) => {
            return item.id;
        });
        pageData.pageConfiger.total = res.total
    })
}
//新增
function addUserHander() {
    chooseUserVisible.value = true
}

//删除
function handledelete(row) {
    postApi({}, `/mosty-jcgl/relatedpartyinfo/delRelatedUser/${row.id}/${props.obj.id}`).then(res => {
        ElMessage.success("删除成功");
        getzblist()
    })
}
const getSonValue = (value) => {
    let idList = [];
    idList = value.map((item) => {
        return item.id;
    });
    savepeopele(idList)

}
//新增相关方人员
function savepeopele(idList) {
    postApi({ id: props.obj.id, idList }, '/mosty-jcgl/relatedpartyinfo/addRelatedUser').then(res => {
        ElMessage.success("新增成功");
        chooseUserVisible.value = false
        getzblist()
    })
}
//页码发生变化
const handleCurrentChange = (val) => {
    pageData.pageConfiger.pageCurrent = val;
    pageData.listQuery.pageCurrent = val;
    getzblist()
};
//查询条数发生变化
const handleSizeChange = (val) => {
    pageData.pageConfiger.pageSize = val;
    pageData.listQuery.pageSize = val;
    getzblist()
};
</script>

<style lang="scss" scoped>
.headBox {
    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>