<template>
  <div class="app-container">
    <div class="box-top">
      <customForm ref="formRef" :model="queryParams" :config="FormConfig">
        <template #region>
          <el-tree-select
            v-model="queryParams.xzqdm"
            :data="deptList"
            :props="{
              value: 'id',
              label: 'label',
              children: 'children',
            }"
            value-key="id"
            default-expanded-keys
            check-strictly
            style="width: 200px"
          />
        </template>
        <template #monTime>
          <el-date-picker
            v-model="queryParams.time"
            type="daterange"
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
          />
        </template>
        <template #action>
          <el-button type="primary" icon="Search" @click="handleQuery"
            >搜索</el-button
          >
          <el-button icon="Refresh" @click="resetQuery">重置</el-button>
        </template>
      </customForm>
      <el-table :data="tableData" style="width: 100%" v-loading="loading">
        <el-table-column
          prop="xzqmc"
          label="行政区"
          width="150"
          align="center"
        />
        <el-table-column
          v-for="i in keys"
          :key="i.keyn"
          :label="i.label"
          header-align="center"
        >
          <el-table-column label="图斑数" align="center">
            <template #default="{ row }">
              {{ row.hzjg[`${i.keyn}_number`] }}
            </template>
          </el-table-column>
          <el-table-column label="面积" align="center">
            <template #default="{ row }">
              {{ row.hzjg[`${i.keyn}_sum`] }}
            </template>
          </el-table-column>
        </el-table-column>
      </el-table>
      <!-- <pagination
        v-show="total > 0"
        :total="total"
        :page="queryParams.pageNum"
        :limit="queryParams.pageSize"
        @pagination="getList"
      /> -->
    </div>
  </div>
</template>

<script setup name="Role">
import customForm from "@/components/custom-form.vue";
import { FormConfig } from "./progress/config";
import { getcount, gethzList, listJz } from "@/api/rsmonitoring/statistics";
const router = useRouter();
const { proxy } = getCurrentInstance();
const loading = ref(false);
const tableData = ref([
  {
    date: "2016-05-03",
    name: "Tom",
    state: "California",
    city: "Los Angeles",

    zip: "CA 90036",
  },
]);
const total = ref(0);
const data = reactive({
  form: {},
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    xzqdm: "",
    time: ["", ""],
    startTime: "",
  },
  keys: [],
});

const { queryParams, keys } = toRefs(data);

/** 搜索按钮操作 */
function handleQuery() {
  queryParams.value.pageNum = 1;
  queryParams.value.startTime = queryParams.value.time[0];
  queryParams.value.endTime = queryParams.value.time[1];
  getList();
}
/** 查询角色列表 */
function getList() {
  loading.value = true;
  gethzList(queryParams.value).then((res) => {
    tableData.value = res.data;
    total.value = res.data.length;
    loading.value = false;

    let tag = tableData.value[0].hzjg.key;
    Object.keys(tag).forEach(function (key) {
      const [major, minor] = parseVersion(key);
      keys.value.push({ keyn: key, label: tag[key], major, minor });
    });
    keys.value.sort((a, b) => {
      if (a.major !== b.major) {
        return a.major - b.major; // 主要版本号不同，直接比较
      } else {
        return a.minor - b.minor; // 主要版本号相同，比较次要版本号
      }
    });
  });
}
// 定义一个函数来解析版本号
function parseVersion(version) {
  // 移除开头的'v'，并将其余部分拆分为数字和可能的下划线后的数字
  const match = version.match(/^v(\d+)(?:_(\d+))?/);
  if (!match) return [0, 0]; // 如果没有匹配到，返回[0, 0]作为默认值
  return [parseInt(match[1]), match[2] ? parseInt(match[2]) : -1];
}

getList();
</script>
