<template>
    <el-dialog title="选择相关方" v-model="isShowDialog" width="1200px" :close-on-click-modal="false">
        <div style="display: flex;align-items: center;padding-bottom: 10px;">
            <el-input style="width: 200px;" v-model="searchObj.relatedname" placeholder="请输入相关方名称或社会信用代码"
                clearable></el-input>
            <el-button style="margin-left: 10px;" type="primary" @click="searchXgf">搜索</el-button>
            <el-button @click="reset">重置</el-button>
        </div>
        <el-table :data="xgflist" style="width: 100%" @row-click="rowClick" height="550px" border>
            <el-table-column width="65" align="center" type="selection" #default="{ row }">
                <el-radio v-model="ridioIndex" :label="row.id">{{ '' }}</el-radio>
            </el-table-column>
            <el-table-column prop="relatedname" label="相关方名称" />
            <el-table-column prop="businesslicense" label="社会信用代码" />
            <el-table-column prop="relatedtype" label="相关方业务类型">
                <template #default="{ row }">
                    <div style="display: flex;flex-wrap: wrap;gap: 5px;">
                        <dict-tag v-for="item in (row.relatedtype && row.relatedtype.split(','))"
                            :options="D_TB_RELATED" :value="item" :tag="true" />
                    </div>
                </template>
            </el-table-column>
        </el-table>
        <template #footer>
            <div class="flex just-between">
                <el-pagination class="pagination" @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    :current-page="listQuery.pageCurrent" :page-sizes="[2, 5, 10, 20]" :page-size="listQuery.pageSize"
                    layout="total, prev, pager, next, sizes, jumper" :total="total"></el-pagination>
                <span class="dialog-footer">

                    <el-button type="primary" @click="confirmDialog">
                        <el-icon>
                            <DocumentChecked />
                        </el-icon>
                        <span>确定</span>
                    </el-button>
                    <el-button @click="closeDialog" type="primary">
                        <el-icon>
                            <DocumentDelete />
                        </el-icon>
                        <span>关闭</span>
                    </el-button>
                </span>
            </div>

        </template>
    </el-dialog>
</template>

<script setup>
import { ref, defineProps, defineEmits, onMounted, watch, defineExpose, computed, getCurrentInstance } from 'vue'
import { getApi } from "@/api/tobAcco_api.js";
const { proxy } = getCurrentInstance();
const { D_TB_RELATED, } = proxy.$dict("D_TB_RELATED");
const props = defineProps({
    disabled: {
        type: Boolean,
        default: false
    },
    // relatedid: {
    //     type: String,
    //     default: ''
    // },
    // /** 是否单选 默认多选 */
    // isSingle: {
    //     type: Boolean,
    //     default: false
    // },
    ids: {
        type: String,
        default: ''
    },
    // cName: {
    //     type: String,
    //     default: ''
    // },
    // stlyrylx: {
    //     type: String,
    //     default: '01'
    // },
    xgfType: {
        type: String,
        default: ''
    },
    ssbmid: {
        type: String,
        default: ''
    },
    // /** 父级部门 (即只选该部门下的单位) */
    // deptId: {
    //     type: String,
    // },
    // // xgflx: {
    // // 	type: String,
    // // 	default: '09,10,15'
    // // },
    // /** 输入框宽度 */
    // width: [String, Number],

})
const emit = defineEmits(['change', 'update:ids', 'update:cName', 'clear'])

const searchObj = ref({ relatedname: '' })
const isShowDialog = ref(true) // 默认为true ,外面v-if控制
/** 相关方列表 */
const xgflist = ref([])
const ridioIndex = ref('')
const listQuery = ref({
    pageCurrent: 1,
    pageSize: 20,
});
const total = ref(0)
//重置
const reset = () => {
    listQuery.value = {
        pageCurrent: 1,
        pageSize: 20,
    }
    searchObj.relatedname = ''
    getxgflist()
}

const rowClick = (row) => {
    ridioIndex.value = row.id
}
/**
 * 页码改变触发
 */
const handleCurrentChange = (currentPage) => {
    listQuery.value.pageCurrent = currentPage;
    getxgflist();
};
/**
 * pageSize 改变触发
 */
const handleSizeChange = (currentSize) => {
    listQuery.value.pageSize = currentSize;
    getxgflist();
};
//获取相关方
function getxgflist() {
    let params = {
        ...listQuery.value,
        ...searchObj.value,
        type: props.xgfType,
        deptid: props.ssbmid,
    }
    getApi(params, '/mosty-jcgl/relatedpartyinfo/getXgfList').then(res => {
        xgflist.value = res.records ? res.records : []
        total.value = res.total || 0
    })
}

const clear = () => {
    emit('update:ids', '')
    emit('update:cName', '')
    emit('change', {})
}
const closeDialog = (val) => {
    emit("close")
}
const searchXgf = () => {
    getxgflist()
}

const confirmDialog = () => {
    let tableArr = Array.isArray(xgflist.value) ? xgflist.value : []
    let curr = tableArr.find(item => item.id === ridioIndex.value) || {}
    emit("update:ids", curr.id)
    // emit("update:cName", curr.orgName)
    emit("change", curr)
    emit("close")
}

onMounted(() => {
    ridioIndex.value = props.ids
    getxgflist()
});
defineExpose({
    clear
});
</script>

<style scoped lang="scss">
.mosty-select {
    width: 374px;
}

::v-deep .el-form {
    margin-top: 0;
    margin-bottom: 10px;
}

.dialog-footer {
    display: flex;
    justify-content: center;
    align-items: center;
    // margin-top: 10px;
    padding-top: 10px;
    padding-bottom: 10px;
}

// ::v-deep #xgfandzzjgry .el-button + .el-button{
// 	margin-left: 10px;
// }</style>