<template>
    <el-dialog v-model="innerVisible" :title="t('cooperationUnit.businessCompany')" 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" @selection-change="onCurrentChange" max-height="560" style="width: 100%"
            v-loading="loading" 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="150"
                show-overflow-tooltip />
            <el-table-column :label="t('cooperationUnit.provinceCity')" prop="provinceCityLabel" min-width="120"
                show-overflow-tooltip />
            <el-table-column prop="cooperationNature" header-class-name="red-header" min-width="140"
                show-overflow-tooltip>
                <template #header>
                    <span class="red-text">{{ t('cooperationUnit.cooperationNature') }}</span>
                </template>
            </el-table-column>
            <el-table-column :label="t('cooperationUnit.industryField')" prop="cooperationIndustry" min-width="150"
                show-overflow-tooltip />
            <el-table-column :label="t('cooperationUnit.cooperationBusiness')" prop="proposedBusinessCooperation"
                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="120"
                show-overflow-tooltip />
            <el-table-column :label="t('cooperationUnit.cooperationStartTime')" prop="startTime"
                min-width="140" show-overflow-tooltip />
            <el-table-column :label="t('cooperationUnit.cooperationEndTime')" prop="endTime" min-width="140"
                show-overflow-tooltip />
            <!-- <el-table-column :label="t('cooperationUnit.unitAddress')" prop="unitAddress" min-width="200"
                show-overflow-tooltip />
            <el-table-column :label="t('cooperationUnit.unitContact')" prop="unitContact" min-width="120"
                show-overflow-tooltip />
            <el-table-column :label="t('cooperationUnit.departmentPosition')" prop="departmentPosition" min-width="150"
                show-overflow-tooltip />
            <el-table-column :label="t('cooperationUnit.phone')" prop="phone" min-width="120" show-overflow-tooltip />
            <el-table-column :label="t('cooperationUnit.potentialOpportunity')" prop="potentialOpportunity"
                min-width="160" show-overflow-tooltip />
            <el-table-column :label="t('cooperationUnit.businessCompany')" prop="businessCompany" min-width="150"
                show-overflow-tooltip /> -->
            <el-table-column :label="t('cooperationUnit.actualController')" prop="cooperationController"
                header-class-name="red-header" min-width="150" show-overflow-tooltip>
                <template #header>
                    <span class="red-text">{{ t('cooperationUnit.actualController') }}</span>
                </template>
            </el-table-column>
            <el-table-column :label="t('cooperationUnit.shareholdingRatio')" prop="shareholdingRatio"
                header-class-name="red-header" min-width="120" show-overflow-tooltip>
                <template #header>
                    <span class="red-text">{{ t('cooperationUnit.shareholdingRatio') }}</span>
                </template>
            </el-table-column>
            <el-table-column :label="t('cooperationUnit.createTime')" prop="createTime" min-width="170"
                show-overflow-tooltip />
            <el-table-column :label="t('cooperationUnit.updateTime')" prop="updateTime" min-width="170"
                show-overflow-tooltip />
        </el-table>
        <template #footer>
            <el-button @click="innerVisible = false">{{ $t('common.cancelButtonText') }}</el-button>
            <el-button type="primary" @click="confirm" :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 { getExternalCooperationUnitsPageAPI } from '/@/api/investment/cooperationUnit';
import type { FormInstance } from 'element-plus';

const props = defineProps<{
    visible: boolean;
}>();
const emit = defineEmits<{
    (e: 'update:visible', v: boolean): void;
    (e: 'confirm', value: string): 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<FormInstance|null>(null);
const queryForm = reactive({
    cooperationName: '',
    industryField: '',
    cooperationNature: '',
    page: 1,
    size: 10,
});

const getDataList = async () => {
    loading.value = true;
    try {
        const res = await getExternalCooperationUnitsPageAPI(queryForm as any);
        const apiList = res.data?.records || [];
        dataList.value = apiList
    } finally {
        loading.value = false;
    }
};
const resetQuery = () => {
    Object.assign(queryForm, {
        cooperationName: '',
        industryField: '',
        cooperationNature: ''
    })
    getDataList();
};
const onCurrentChange = (row: any) => {
    if (!row) return;
    selectedIndex.value = dataList.value.indexOf(row);
};
const confirm = () => {
    if (selectedIndex.value === -1) return;
    const row = dataList.value[selectedIndex.value];
    emit('confirm', row);
    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>
