<template>
    <el-dialog v-model="innerVisible" :title="t('cooperationUnit.cooperationName')" width="90%" top="5vh"
        :close-on-click-modal="false">
        <div class="dialog-toolbar">
            <el-form :inline="true" :model="queryForm" @keyup.enter="getDataList" ref="queryRef">
                <el-form-item :label="t('cooperationUnit.cooperationName')">
                    <el-input v-model="queryForm.cooperationName"
                        :placeholder="t('cooperationUnit.inputCooperationNameTip')" style="width: 220px" />
                </el-form-item>
                <el-form-item :label="t('cooperationUnit.industryField')">
                    <el-input v-model="queryForm.industryField"
                        :placeholder="t('cooperationUnit.inputIndustryFieldTip')" style="width: 160px" />
                </el-form-item>
                <el-form-item :label="t('cooperationUnit.cooperationNature')">
                    <el-select v-model="queryForm.cooperationNature" clearable style="width: 160px">
                        <el-option label="企业" value="enterprise" />
                        <el-option label="事业单位" value="institution" />
                        <el-option label="政府机构" value="government" />
                        <el-option label="其他" value="other" />
                    </el-select>
                </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>
        </div>
        <el-table :data="dataList" v-loading="loading" @current-change="onCurrentChange" highlight-current-row
            height="55vh" border>
            <el-table-column width="60">
                <template #default="scope">
                    <el-radio v-model="selectedIndex" :label="scope.$index">&nbsp;</el-radio>
                </template>
            </el-table-column>
            <el-table-column :label="t('cooperationUnit.cooperationName')" prop="cooperationName" min-width="200"
                show-overflow-tooltip />
            <el-table-column :label="t('cooperationUnit.provinceCity')" prop="provinceCity" min-width="120"
                show-overflow-tooltip />
            <el-table-column :label="t('cooperationUnit.industryField')" prop="industryField" min-width="160"
                show-overflow-tooltip />
            <el-table-column :label="t('cooperationUnit.cooperationBusiness')" prop="cooperationBusiness"
                min-width="160" show-overflow-tooltip />
            <el-table-column :label="t('cooperationUnit.cooperationAdvantage')" prop="cooperationAdvantage"
                min-width="160" show-overflow-tooltip />
            <el-table-column :label="t('cooperationUnit.cooperationStatus')" prop="cooperationStatus" min-width="140"
                show-overflow-tooltip />
            <el-table-column :label="t('cooperationUnit.cooperationStartTime')" prop="cooperationStartTime"
                min-width="160" show-overflow-tooltip />
            <el-table-column :label="t('cooperationUnit.cooperationEndTime')" prop="cooperationEndTime" min-width="160"
                show-overflow-tooltip />
            <el-table-column :label="t('cooperationUnit.reportingUnit')" prop="reportingUnit" min-width="160"
                show-overflow-tooltip />
            <el-table-column :label="t('cooperationUnit.date')" prop="date" min-width="140" show-overflow-tooltip />
        </el-table>
        <template #footer>
            <el-button @click="handleCancel">{{ $t('common.cancelButtonText') }}</el-button>
            <el-button type="primary" @click="handleConfirm" :disabled="selectedIndex === -1">{{
                $t('common.confirmButtonText') }}</el-button>
        </template>
    </el-dialog>
</template>

<script lang="ts" setup>
import { reactive, ref, watch } from 'vue';
import { useI18n } from 'vue-i18n';
// import { getCooperationUnitPageAPI } 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 innerVisible = ref(false);
watch(
    () => props.visible,
    v => (innerVisible.value = v)
);
watch(innerVisible, v => emit('update:visible', v));

const loading = ref(false);
const dataList = ref<any[]>([]);
const selectedIndex = ref(-1);
const queryRef = ref();
const queryForm = reactive({
    cooperationName: '',
    industryField: '',
    cooperationNature: '',
    current: 1,
    size: 10,
});

const getDataList = async () => {
    loading.value = true;
    try {
        // const res = await getCooperationUnitPageAPI(queryForm as any);
        // const apiList = res.records || res.data?.records || [];
        const apiList: any[] = [];
        // 模拟数据（用于演示/联调前占位）
        const mockList = [
            {
                cooperationName: '成都公交集团',
                provinceCity: '成都市',
                unitType: '国有企业',
                industryField: '道路运输',
                cooperationBusiness: '公交客运服务',
                cooperationAdvantage: '线路资源丰富、品牌影响力强',
                cooperationStatus: '已开展合作',
                cooperationStartTime: '2025-08-01',
                cooperationEndTime: '2025-12-31',
                reportingUnit: '成都市交通运输局',
                date: '2025-08-01',
                unitContact: '张三',
                phone: '13800000001',
            },
            {
                cooperationName: '四川能投集团',
                provinceCity: '成都市',
                unitType: '国有企业',
                industryField: '专业技术与商务服务业',
                cooperationBusiness: '资产评估',
                cooperationAdvantage: '行业资源、资金实力雄厚',
                cooperationStatus: '已开展合作',
                cooperationStartTime: '2025-08-05',
                cooperationEndTime: '2025-12-31',
                reportingUnit: '成都市国资委',
                date: '2025-08-05',
                unitContact: '李四',
                phone: '13800000002',
            },
            {
                cooperationName: '成都地铁集团',
                provinceCity: '成都市',
                unitType: '事业单位',
                industryField: '道路运输',
                cooperationBusiness: '公共交通协同',
                cooperationAdvantage: '轨道交通网络完善',
                cooperationStatus: '拟合作',
                cooperationStartTime: '2025-09-01',
                cooperationEndTime: '2025-12-31',
                reportingUnit: '成都市交委',
                date: '2025-09-01',
                unitContact: '王五',
                phone: '13800000003',
            },
        ];
        dataList.value = apiList && apiList.length ? apiList : mockList;
    } finally {
        loading.value = false;
    }
};
const resetQuery = () => {
    queryRef.value?.resetFields();
    getDataList();
};
const onCurrentChange = (row: any) => {
    if (!row) return;
    selectedIndex.value = dataList.value.indexOf(row);
};
const handleCancel = () => (innerVisible.value = false);
const handleConfirm = () => {
    if (selectedIndex.value === -1) return;
    emit('confirm', dataList.value[selectedIndex.value]);
    innerVisible.value = false;
};

watch(innerVisible, v => {
    if (v) {
        getDataList();
        selectedIndex.value = -1;
    }
});
</script>

<style scoped>
.dialog-toolbar {
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
</style>
