<template>
  <div class="common-container">
    <div class="stat-cards-container">
      <div class="stat-card" v-for="(item, idx) in props.numberList" :key="idx">
        <div class="stat-card-title">{{ item.title }}</div>
        <div class="stat-card-value" @click="handleDetail(item)">
          {{ item.value }}
        </div>
      </div>
    </div>
    <!-- 详情信息 -->
    <el-dialog
      :title="dialogTitle + '详情'"
      v-model="dialogVisible"
      width="50%"
      :before-close="handleClose"
    >
      <commonTable
        :data="tableData"
        :columns="tableColumns"
        :total="tableTotal"
        :current-page="currentPage"
        :page-size="pageSize"
        @size-change="handleSizeChange"
        @current-page-change="handleCurrentPageChange"
        @row-click="handleRowClick"
      >
        <template #status="{ row }">
          <el-tag :type="row.status === 'active' ? 'success' : 'danger'">
            {{ row.status === "active" ? "正常" : "异常" }}
          </el-tag>
        </template>
      </commonTable>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="dialogVisible = false"
            >确 定</el-button
          >
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { onMounted, reactive, watch, ref } from "vue";
import commonTable from "./common/commonTable.vue";

const props = defineProps({
  numberList: {
    type: Array,
    default: () => [],
  },
});

// 弹窗相关
const dialogVisible = ref(false);
const dialogTitle = ref("");

// 表格相关数据
const tableData = ref([]);
const tableColumns = ref([
  { prop: "id", label: "ID", autoWidth: true },
  { prop: "name", label: "名称", autoWidth: true },
  { prop: "type", label: "类型", autoWidth: true },
  { prop: "value", label: "数值", autoWidth: true },
  { prop: "date", label: "日期", autoWidth: true },
  { prop: "status", label: "状态", autoWidth: true, slot: "status" },
]);

// 分页相关
const currentPage = ref(1);
const pageSize = ref(10);
const tableTotal = ref(0);

const generateTableData = () => {
  const data = [];
  const types = ["类型A", "类型B", "类型C"];
  const statuses = ["active", "inactive"];

  for (let i = 1; i <= 10; i++) {
    data.push({
      id: i,
      name: `项目${i}`,
      type: types[Math.floor(Math.random() * types.length)],
      value: Math.floor(Math.random() * 1000),
      date: new Date(
        Date.now() - Math.random() * 30 * 24 * 60 * 60 * 1000
      ).toLocaleDateString(),
      status: statuses[Math.floor(Math.random() * statuses.length)],
    });
  }

  tableTotal.value = data.length;
  return data;
};

const handleDetail = (item) => {
  dialogVisible.value = true;
  dialogTitle.value = item.title;
  tableData.value = generateTableData();
};

// 分页处理
const handleSizeChange = (val) => {
  pageSize.value = val;
  currentPage.value = 1;
  loadTableData();
};

const handleCurrentPageChange = (val) => {
  currentPage.value = val;
  loadTableData();
};

const loadTableData = () => {
  const allData = generateTableData();
  const start = (currentPage.value - 1) * pageSize.value;
  const end = start + pageSize.value;
  tableData.value = allData.slice(start, end);
};

const handleRowClick = (row, column, event) => {
  console.log("行点击:", row);
};

const handleClose = () => {
  dialogVisible.value = false;
};
onMounted(() => {});
</script>

<style scoped lang="less">
.common-container {
  display: flex;
  justify-content: center;
  .stat-cards-container {
    display: flex;
    .stat-card {
      .vw(width, 170);
      .vw(border-radius, 5);
      .vw(padding, 20);
      // .vw(margin,10);
      background-image: url("@/assets/images/total2.png");
      background-repeat: no-repeat;
      background-size: 90% 80%;
      background-position: center;
      .stat-card-title {
        .font(12);
      }
      .stat-card-value {
        .font(24);
        cursor: pointer;
        font-family: "DIN";
      }
    }
  }
}
:deep(.el-dialog__title) {
  font-weight: 900;
}
:deep(.el-dialog) {
}
</style>
