<template>
    <el-dialog v-model="visibleInner" :title="t('expertLibrary.title')" width="900px" append-to-body>
        <!-- 搜索区 -->
        <el-form :inline="true" :model="queryForm" class="mb10">
            <el-form-item :label="t('expertLibrary.form.name')" prop="name">
                <el-input v-model="queryForm.expertName" :placeholder="t('expertLibrary.placeholder.input')"
                    style="width: 180px" />
            </el-form-item>
            <el-form-item :label="t('expertLibrary.form.field')" prop="techField">
                <el-input v-model="queryForm.technologyField" :placeholder="t('expertLibrary.placeholder.input')"
                    style="width: 180px" />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="Search" @click="getDataList">{{ t('common.queryBtn') }}</el-button>
                <el-button icon="Refresh" @click="resetQuery">{{ t('common.resetBtn') }}</el-button>
            </el-form-item>
        </el-form>

        <!-- 单选表格 -->
        <el-table :data="tableData" border @current-change="onCurrentChange" v-loading="loading">
            <el-table-column width="60">
                <template #default="scope">
                    <el-radio v-model="selectedRowIndex" :label="scope.$index"
                        @change="handleRowSelect(scope.$index)">&nbsp;</el-radio>
                </template>
            </el-table-column>
            <el-table-column type="index" :label="t('expertLibrary.table.index')" width="60" />
            <el-table-column prop="expertName" :label="t('expertLibrary.table.name')" min-width="140" />
            <el-table-column prop="contactInformation" :label="t('expertLibrary.table.contact')" min-width="140" />
            <el-table-column prop="technologyField" :label="t('expertLibrary.table.field')" min-width="140" />
            <el-table-column prop="professionalTitle" :label="t('expertLibrary.table.title')" min-width="120" />
            <el-table-column prop="workUnit" :label="t('expertLibrary.table.company')" min-width="160" />
            <el-table-column prop="level" :label="t('expertLibrary.table.level')" min-width="100">
                <template #default="{ row }">
                    {{ levelLabel(row.level) }}
                </template>
            </el-table-column>
            <el-table-column prop="externalStatus" :label="t('expertLibrary.table.status')" min-width="100">
                <template #default="{ row }">
                    {{ externalStatusLabel(row.externalStatus) }}
                </template>
            </el-table-column>
        </el-table>

        <!-- 分页 -->
        <div class="mt15 flex justify-end">
            <el-pagination background layout="sizes, prev, pager, next, jumper, total" :total="pagination.total"
                :page-sizes="[10, 20, 50, 100]" v-model:page-size="pagination.size"
                v-model:current-page="pagination.page" @size-change="handleSizeChange"
                @current-change="handlePageChange" />
        </div>

        <template #footer>
            <span class="dialog-footer">
                <el-button @click="handleCancel">{{ t('common.cancelButtonText') || '取消' }}</el-button>
                <el-button type="primary" @click="handleConfirm">{{ t('user.logOutConfirm') || '确定' }}</el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script lang="ts" setup>
import { ref, watch, reactive } from 'vue';
import { useI18n } from 'vue-i18n';
import { getExpertInformationPageAPI } from '/@/api/investment/cooperationUnit';

const props = defineProps<{
    visible: boolean
}>();
const emit = defineEmits<{
    (e: 'update:visible', v: boolean): void
    (e: 'confirm', row: any): void
}>();

const { t } = useI18n();

const visibleInner = ref(false);
watch(
    () => props.visible,
    (v) => (visibleInner.value = v),
    { immediate: true },
);
watch(visibleInner, (v) => emit('update:visible', v));

const queryForm = reactive({
    expertName: '',
    technologyField: '',
    externalStatus: '',
});

const loading = ref(false);
const tableData = ref<any[]>([]);
const pagination = reactive({
    page: 1,
    size: 10,
    total: 0,
});

const getDataList = async () => {
    loading.value = true;
    try {
        const params = {
            page: pagination.page,
            size: pagination.size,
            ...queryForm,
        };
        const res = await getExpertInformationPageAPI(params);
        const records = res?.records ?? res?.data?.records ?? [];
        const total = res?.total ?? res?.data?.total ?? 0;
        tableData.value = records;
        pagination.total = total;
    } finally {
        loading.value = false;
    }
};

const resetQuery = () => {
    queryForm.expertName = '';
    queryForm.technologyField = '';
    queryForm.externalStatus = '';
    pagination.page = 1;
    getDataList();
};

const handleSizeChange = (val: number) => {
    pagination.size = val;
    pagination.page = 1;
    getDataList();
};

const handlePageChange = (val: number) => {
    pagination.page = val;
    getDataList();
};

const selectedRowIndex = ref(-1)
const currentRow = ref<any | null>(null);
const onCurrentChange = (row: any) => {
    selectedRowIndex.value = tableData.value.findIndex(item => item === row)
    currentRow.value = row;
};
const handleRowSelect = (index: number) => {
    selectedRowIndex.value = index
    currentRow.value = tableData.value[index];
}

const handleCancel = () => {
    visibleInner.value = false;
};
const handleConfirm = () => {
    if (currentRow.value) emit('confirm', currentRow.value);
    visibleInner.value = false;
};

const levelLabel = (val: string) => {
    if (val === 'national') return t('expertApply.level.national');
    if (val === 'provincial') return t('expertApply.level.provincial');
    if (val === 'city') return t('expertApply.level.city');
    return '-';
};
const externalStatusLabel = (val: string) => {
    if (val === 'active') return t('expertLibrary.status.active');
    if (val === 'inactive') return t('expertLibrary.status.inactive');
    return '-';
};

// 监听对话框显示状态，当打开时加载数据
watch(visibleInner, (newVal) => {
    if (newVal) {
        pagination.page = 1;
        getDataList();
    }
});
</script>

<style scoped>
.mb10 {
    margin-bottom: 10px;
}
.mt15 {
    margin-top: 15px;
}
.flex {
    display: flex;
}
.justify-end {
    justify-content: flex-end;
}
</style>