<template>
  <com-head :options="headOptions" v-model="params.pagging.state.query.type">
    <el-form label-width="84px" inline>
      <slot name="header" />
      <el-form-item class="searh-btns" style="grid-area: 1 / 4 / 2 / 4">
        <el-button type="primary" @click="params.pagging.refresh">查询</el-button>
        <el-button type="primary" plain @click="params.pagging.queryReset"
          >重置</el-button
        >
      </el-form-item>
    </el-form>
  </com-head>

  <div class="body-layer">
    <slot name="content" />
    <com-pagination
      @size-change="params.pagging.changPageSize"
      @current-change="params.pagging.changPageCurrent"
      :current-page="params.pagging.state.pag.currentPage"
      :page-size="params.pagging.state.pag.size"
      :total="params.pagging.state.pag.total"
    />
  </div>
</template>

<script setup lang="ts">
import comHead from "@/components/head/index.vue";
import comPagination from "@/components/pagination/index.vue";
import { SceneType } from "@/store/scene";
import { SceneTypeDesc } from "@/constant/scene";
import { useScenePaggingParams } from "./pagging";

defineProps<{ params: ReturnType<typeof useScenePaggingParams> }>();

const headOptions = [
  { value: SceneType.SWKK, name: SceneTypeDesc[SceneType.SWKK] },
  { value: SceneType.SWKJ, name: SceneTypeDesc[SceneType.SWKJ] },
  { value: SceneType.SWSS, name: SceneTypeDesc[SceneType.SWSS] },
  { value: SceneType.SWSSMX, name: SceneTypeDesc[SceneType.SWSSMX] },
  { value: SceneType.SWMX, name: SceneTypeDesc[SceneType.SWMX] },
];
</script>
