<script lang="ts" setup>
import { get } from "@/common/http/request";

const props = defineProps({
  title: String,
  url: String,
  parentParamName: String,
  // 新增：是否显示底部统计信息
  showSummary: {
    type: Boolean,
    default: true,
  },
  // 新增：自定义统计文本前缀，默认 "共"
  summaryText: {
    type: String,
    default: "共",
  },
});

const parentParamValue = defineModel<number>("parentParamValue");
const visible = defineModel<boolean>("visible");
const itemData = ref<any[]>([]);
const adjust = () => {
  nextTick(() => {});
};
const loadData = async () => {
  if (props.url !== undefined) {
    const params = new URLSearchParams();
    if (props.parentParamName !== undefined && parentParamValue.value !== undefined)
      params.append(props.parentParamName, String(parentParamValue.value));
    const rowData = await get(props.url, params).then(res => res.data);
    itemData.value = rowData;
    nextTick(adjust);
  }
};
watch(() => parentParamValue.value, loadData);
</script>
<template>
  <el-dialog
    :title="title"
    v-model="visible"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :lock-scroll="false"
    class="item-dialog"
  >
    <el-table :data="itemData" class="item-table">
      <slot name="columns"></slot>
    </el-table>
    <template #footer>
      <div class="dialog-footer-container">
        <!-- 左侧：统计信息 -->
        <div class="footer-summary" v-if="showSummary">
          <span class="total-count">{{ summaryText }} {{ itemData.length }} 条</span>
        </div>
      </div>
    </template>
  </el-dialog>
</template>
<style>
.dialog-footer-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.footer-summary {
  display: flex;
  gap: 8px;
  align-items: center;
}

.total-count {
  font-size: 14px;
  font-weight: 500;
  color: var(--el-text-color-primary);
}

.item-dialog {
  --el-dialog-width: 1400px !important;
  --el-dialog-padding-primary: 20px;
}

.item-dialog :deep(.el-dialog) {
  overflow: hidden;
  border-radius: 8px;
}

.item-dialog :deep(.el-dialog__header) {
  padding: 16px 20px;
  margin-right: 0;
  background-color: var(--el-fill-color-light);
  border-bottom: 1px solid var(--el-border-color-lighter);
}

.item-dialog :deep(.el-dialog__title) {
  font-size: 16px;
  font-weight: 600;
  color: var(--el-text-color-primary);
}

.item-dialog :deep(.el-dialog__headerbtn) {
  top: 16px;
}

.item-dialog :deep(.el-dialog__body) {
  max-height: 70vh;
  padding: 10px 20px;
  overflow-y: auto;
}

.item-dialog :deep(.el-table) {
  font-size: 13px;
}

.item-dialog :deep(.el-table th.el-table__cell) {
  font-weight: 600;
  background-color: var(--el-fill-color-light);
}

.item-table {
  height: 60vh;
}
</style>
