<template>
  <el-dialog
    width="80%"
    :title="t('mixedLibrary.select.title')"
    v-model="visible"
    :close-on-click-modal="false"
    destroy-on-close
  >
    <el-form :model="filters" inline class="filter-form mb15">
      <el-form-item :label="t('mixedLibrary.filters.projectName')" class="filter-item">
        <el-input v-model="filters.projectName" :placeholder="t('mixedLibrary.placeholder.input')" />
      </el-form-item>
      <el-form-item :label="t('mixedLibrary.filters.companyName')" class="filter-item">
        <el-input v-model="filters.implementEnterprise" :placeholder="t('mixedLibrary.placeholder.input')" />
      </el-form-item>
      <el-form-item :label="t('mixedLibrary.filters.companyCode')" class="filter-item">
        <el-input v-model="filters.enterpriseCreditCode" :placeholder="t('mixedLibrary.placeholder.input')" />
      </el-form-item>
      <el-form-item class="filter-buttons">
        <el-button type="primary" @click="handleQuery">
          {{ t('mixedLibrary.actions.query') }}
        </el-button>
        <el-button @click="handleReset">
          {{ t('mixedLibrary.actions.reset') }}
        </el-button>
      </el-form-item>
    </el-form>

    <el-table
      :data="pagedData"
      style="width: 100%"
      height="50vh"
      border
      highlight-current-row
      @current-change="handleSelectionChange"
    >
      <el-table-column :label="t('mixedLibrary.table.index')" width="60">
        <template #default="scope">
          <div class="options" :class="active === scope.$index ? 'active' : ''"></div>
        </template>
      </el-table-column>
      <el-table-column prop="projectName" :label="t('mixedLibrary.table.projectName')" min-width="160" />
      <el-table-column prop="implementEnterprise" :label="t('mixedLibrary.table.companyName')" min-width="160" />
      <el-table-column prop="enterpriseCreditCode" :label="t('mixedLibrary.table.companyCode')" min-width="160" />
      <el-table-column prop="mixedReformMethod" :label="t('mixedLibrary.table.mode')" min-width="120" />
      <el-table-column prop="partnerName" :label="t('mixedLibrary.table.partnerName')" min-width="160" />
      <el-table-column prop="mixedReformType" :label="t('mixedLibrary.table.type')" min-width="120" />
      <el-table-column prop="progressStatus" :label="t('mixedLibrary.table.progress')" min-width="120" />
      <el-table-column prop="reportingUnit" :label="t('mixedLibrary.table.reportUnit')" min-width="140" />
      <el-table-column prop="updateTime" :label="t('mixedLibrary.table.lastUpdateTime')" min-width="160" />
      <el-table-column prop="updateBy" :label="t('mixedLibrary.table.lastUpdater')" min-width="120" />
    </el-table>

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

    <template #footer>
      <el-button type="primary" @click="handleConfirm" :disabled="!selectedRow">
        {{ t('mixedLibrary.actions.confirm') || t('mixedLibrary.actions.select') }}
      </el-button>
      <el-button @click="handleCancel">
        {{ t('mixedLibrary.actions.cancel') }}
      </el-button>
    </template>
  </el-dialog>
</template>

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

const { t } = useI18n();

const props = defineProps<{
  modelValue: boolean;
}>();

const emit = defineEmits<{
  (e: 'update:modelValue', value: boolean): void;
  (e: 'select', row: MixedReformItem): void;
}>();

const visible = ref<boolean>(false);

const filters = reactive({
  projectName: '',
  implementEnterprise: '',
  enterpriseCreditCode: '',
  page: 1,
  size: 10,
});

const pagedData = ref<MixedReformItem[]>([]);
const pagination = reactive({
  total: 0,
});

const active = ref<number>(-1);
const selectedRow = ref<MixedReformItem | null>(null);

watch(
  () => props.modelValue,
  (newVal) => {
    visible.value = newVal;
    if (newVal) {
      getDataList();
    }
  }
);

watch(
  () => visible.value,
  (newVal) => {
    emit('update:modelValue', newVal);
    if (!newVal) {
      resetSelection();
    }
  }
);

const getDataList = async () => {
  try {
    const res = await getMixedReformPageAPI(filters as any);
    const data = (res as any)?.data ?? res;
    pagedData.value = data.records ?? data.records ?? [];
    pagination.total = data.total ?? 0;
  } catch (err) {
    // ignore, parent will show message
    pagedData.value = [];
    pagination.total = 0;
  }
};

const handleSelectionChange = (val: MixedReformItem | null) => {
  selectedRow.value = val;
  if (val && val.id) {
    active.value = pagedData.value.findIndex((item) => item.id === val.id);
  } else {
    active.value = -1;
  }
};

const resetSelection = () => {
  active.value = -1;
  selectedRow.value = null;
};

const handleQuery = () => {
  filters.page = 1;
  getDataList();
};

const handleReset = () => {
  filters.projectName = '';
  filters.implementEnterprise = '';
  filters.enterpriseCreditCode = '';
  filters.page = 1;
  getDataList();
};

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

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

const handleConfirm = () => {
  if (selectedRow.value) {
    emit('select', selectedRow.value);
    visible.value = false;
  }
};

const handleCancel = () => {
  visible.value = false;
};

onMounted(() => {
  visible.value = props.modelValue;
  if (props.modelValue) {
    getDataList();
  }
});
</script>

<style scoped>
.options {
  width: 20px;
  height: 20px;
  cursor: pointer;
  border: 1px solid var(--el-border-color);
  border-radius: 50%;
}

.active {
  background-color: var(--el-color-primary);
  color: white;
}

.filter-form {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
}

.filter-item :deep(.el-form-item__label) {
  line-height: 32px;
}

.filter-item :deep(.el-input) {
  width: 180px;
}

.filter-buttons {
  display: flex;
  gap: 12px;
}
</style>
