<template>
    <el-dialog title="选择小组" v-model="dialogVisible" width="1000px">
        <div>
            <el-table ref="tableRef" :data="tableData" stripe border height="600px"
                @row-click="rowClick">
                <el-table-column width="55" #default="{ row }" v-if="Single">
                    <el-radio v-model="ridioIndex" :label="row.id">{{ '' }}</el-radio>
                </el-table-column>
                <!-- <el-table-column type="selection" width="55" :reserve-selection="true" v-else="!Single" /> -->
                <el-table-column width="100" label="带队领导" property="leadername"></el-table-column>
                <el-table-column width="100" label="检查组长" property="zzxm"></el-table-column>
                <el-table-column label="检查成员">
                    <template #default="{ row }">
                        <span>{{ row.userListName }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="检查范围" property="taskListName">
                </el-table-column>

            </el-table>

        </div>
        <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="confirm">保存</el-button>
            <el-button @click="close">关闭</el-button>
        </div>
    </el-dialog>
</template>

<script setup>
import { defineProps, ref, defineEmits, onMounted } from 'vue';
const props = defineProps({
    /** 小组id */
    xzid: {
        type: String,
        default: false
    },
    /** 单选, 目前仅支持单选 */
    Single: {
        type: Boolean,
        default: true
    },
    /** 选中的内容 */
    ids: {
        type: String,
        default: ''
    }
})
const emits = defineEmits(['ok']);
// const ids = defineModel()
const dialogVisible = ref(true); // 外面用v-if控制
const tableRef = ref();
const tableData = ref([]);
const ridioIndex = ref();
import { getApi, postApi } from "@/api/tobAcco_api.js";
const confirm = () => {
    let obj = tableData.value.find(item => item.id == ridioIndex.value)
    emits('ok', ridioIndex, obj)

}
const close = () => {
    emits('close')
};
function getjcpzxq(id) {
    getApi({}, "/mosty-jcgl/zhjc/getInfo?id=" + id).then((res) => {
        if (res) {
            // ruleForm.value = res;
            res.jczList = Array.isArray(res.jczList) ? res.jczList : [];
            res.jczList.forEach((item) => {
                let username = [];
                if (item.taskDtoList != null) {
                    let taskarr = [];
                    for (let i = 0; i < item.taskDtoList.length; i++) {
                        const el = item.taskDtoList[i];
                        taskarr.push(el.orgname);
                    }
                    item.taskListName = taskarr
                } else {
                    // item.taskListName = [];
                }
                item.userList = Array.isArray(item.userList) ? item.userList : [];
                if (item.userList.length) {
                    for (let x = 0; x < item.userList.length; x++) {
                        const e = item.userList[x];
                        username.push(e.userName);
                    }
                }
                item.userListName = username.join(',')
            });
            tableData.value = res.jczList;
        }
    });
}
const rowClick = (row) => {
    ridioIndex.value = row.id
}
onMounted(() => {
    ridioIndex.value = props.ids
    getjcpzxq(props.xzid)
});
</script>

<style lang="scss" scoped>
.dialog-footer {
    display: flex;
    justify-content: flex-end;
    padding: 8px;
}
</style>