<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 }}
          <span class="unit" v-if="item.value !== '*'">{{ item.unit }}</span>
        </div>
      </div>
    </div>
    <!-- 详情信息 -->
    <el-dialog
      :title="dialogTitle + '详情'"
      v-model="dialogVisible"
      width="50%"
      :before-close="handleClose"
      :close-on-click-modal="false" :close-on-press-escape="false"
    >
      <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 = (value) => {
  const data = [];
  const types = ["类型A", "类型B", "类型C"];
  const statuses = ["active", "inactive"];

  for (let i = 1; i <= value; 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) => {
  if (item.unit === "个") {
    dialogVisible.value = true;
    dialogTitle.value = item.title;
    let currentValue = item.unit === "个" ? item.value : "";
    tableData.value = generateTableData(currentValue);
  }
};

// 分页处理
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 {
  .stat-cards-container {
    display: flex;
    .stat-card {
      .vw(width, 180);
      // .vh(height, 90);
      .vw(border-radius, 5);
      .vw(padding, 10);
      .vw(margin-right,10);
      background-image: url("@/assets/images/total2.png");
      background-repeat: no-repeat;
      background-size: 100% 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      .stat-card-title {
        .font(16);
        // white-space: nowrap;
      }
      .stat-card-value {
        .font(18);
        cursor: pointer;
        color: @Color;
        font-family: "DIN";
        .unit {
          .font(10);
        }
      }
    }
    :last-child {
      margin-right: 0;
    }
  }
}
</style>
