<template>
    <vxe-modal v-model="dialogVisible" :title="title" show-zoom resize show-footer destroy-on-close transfer @hide="close" :width="width" :z-index="1002">
        <template #default>
            <div class="mb-10">是否确认将该事项的专家抽取审核为通过！</div>
            <div class="mb-8">专家人员指定：</div>
            <vxe-table border :data="list" min-height="0" max-height="100%">
                <vxe-column title="专家组" width="200">
                    <template #default="{ row }">
                        {{ selectDictLabel(dict.dm_person_type, row.personType) || '-' }}
                    </template>
                </vxe-column>
                <vxe-column title="专家人数" width="80" field="personCount" :formatter="colNoData" />
                <vxe-column title="是否指定人员" field="isAppoint" width="160">
                    <template #default="{ row }">
                        <el-radio-group v-model="row.isAppoint">
                            <el-radio v-for="item in dict.yes_no" :key="item.value" :label="item.value">{{ item.label }}</el-radio>
                        </el-radio-group>
                    </template>
                </vxe-column>
                <vxe-column title="选择指定人" field="personInfos">
                    <template #default="{ row }">
                        <template v-if="+row.isAppoint">
                            <div>
                                <template v-for="(item, index) in row?.personInfos" :key="index">
                                    <el-tag class="mr-6 mb-2" type="primary" closable @close="closeTagPerson(row, index)">{{ item.name }}</el-tag>
                                </template>
                                <el-button @click="addPerson(row)" type="success" size="small">
                                    <el-icon><CirclePlus /></el-icon>
                                    添加
                                </el-button>
                            </div>
                        </template>
                        <template v-else>-</template>
                    </template>
                </vxe-column>
            </vxe-table>
        </template>
        <template #footer>
            <el-button @click="close">取消</el-button>
            <el-button type="primary" @click="submitForm">确认添加</el-button>
        </template>
    </vxe-modal>
    <ChooseExpert v-if="showChoose" ref="ChooseExpertRef" v-model:show="showChoose" :info="rowInfo" :dict="dict" @success="changeSuccesss"></ChooseExpert>
</template>
<script setup name="ChooseExpertCheck" lang="tsx">
import { colNoData } from '@/utils/noData';
import { propTypes } from '@/utils/propTypes';
import { ChooseExpert } from '.';
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
// const { dm_person_type, dm_join_type, yes_no } = toRefs<any>(proxy?.useDict('dm_person_type', 'dm_join_type', 'yes_no', 'sys_sex_type'));
const emit = defineEmits(['update:show', 'close', 'success']);
const props = defineProps({
    show: propTypes.bool.def(false),
    info: propTypes.any.def(null),
    title: propTypes.string.def('审核通过'),
    width: propTypes.number.def(900),
    dict: propTypes.any.def(null),
});
const ChooseExpertRef = ref();
const showChoose = ref(false);
const dialogVisible = ref(props.show);
const close = () => {
    emit('update:show', false);
    emit('close', false);
};
const list = ref<any[]>(props.info?.personInfo.map(item => {
    return {
        ...item,
        isAppoint: item.isAppoint || '0',
        personInfos: item.personInfos || [],
    };
}) || []);
console.log(list,'list');

const rowInfo = ref<any>(null);
const addPerson = (row: any) => {
    rowInfo.value = row;
    showChoose.value = true;
};
const submitForm = async () => {
    try {
        const persons = list.value.map(item => {
            return {
                personType: item.personType,
                personCount: item.personCount,
                isAppoint: item.isAppoint,
                personIds: +item.isAppoint ? item.personInfos.map((person: any) => person.id) : []
            };
        });
        emit('success', persons);
    } catch (error) {
        console.error(error);
    }
};
const changeSuccesss = (val: any) => {
    rowInfo.value.personInfos = [...val]
};
const closeTagPerson = (item: any, index: number) => {
    item.personInfos.splice(index, 1);
};
watch(
    () => props.show,
    (val) => {
        dialogVisible.value = val;
    }
);
</script>
