<script setup lang="ts">
import { VxePager } from 'vxe-pc-ui'

const props = withDefaults(
  defineProps<{
    loadData: (pager: any) => Promise<{
      total: number
      rows: any[]
      current: number
    }>
  }>(),
  {},
)
defineOptions({ name: 'MjGrid' })

const pager = ref({
  current: 1,
  size: 30,
  total: 0,
  rows: [] as any[],
})

const loading = ref(false)

async function pageChange(pagerVal: any = undefined) {
  loading.value = true
  try {
    const data = await props.loadData({
      ...pager.value,
      ...pagerVal,
    })
    pager.value.total = data.total
    pager.value.rows = data.rows
    pager.value.current = data.current
  } finally {
    loading.value = false
  }
}

defineExpose({
  reload: (pagerVal: any = undefined) => {
    pageChange({
      current: 1,
      ...pagerVal,
    })
  },
})
</script>

<template>
  <div class="mj-grid">
    <div v-loading="loading" class="content">
      <div v-if="pager.rows?.length" class="items">
        <slot v-for="(item, idx) in pager.rows" :key="idx" :data="item" />
      </div>
      <div v-else class="empty">暂无数据</div>
    </div>
    <div class="pager">
      <vxe-pager
        v-model:current-page="pager.current"
        v-model:page-size="pager.size"
        :total="pager.total"
        :page-sizes="[30, 60, 100, 200, 500]"
        :layouts="[
          'Home',
          'PrevJump',
          'PrevPage',
          'Number',
          'NextPage',
          'NextJump',
          'End',
          'Sizes',
          'FullJump',
          'Total',
        ]"
        @page-change="pageChange"
      />
    </div>
  </div>
</template>

<style lang="scss" scoped>
.mj-grid {
  $family: $font-text;
  $fz: 2.33vh;
  $btn_w: 64px;
  $btn_h: 5.33vh;
  $btn_gap: 8px;
  $radius: 8px;
  $shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
  $btn_bg: rgba(0, 0, 0, 0.65);
  $icon_color: #4de798;
  $color: #4b4b68;
  height: 100%;

  display: flex;
  flex-direction: column;

  .content {
    flex: 1;
    background-color: rgb(249, 253, 255);
    border-radius: 3.33vh;
    box-shadow: 0 0.33vh 0.33vh 0 rgba(0, 0, 0, 0.25);
    padding: 2vh;
    overflow: auto;
    // display: flex;
    // justify-content: center;

    .empty {
      height: 90%;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 3vh;
    }

    .items {
      display: grid;
    }

    // .items::after {
    //   content: '';
    //   flex: auto;
    // }
  }

  // 悬浮框
  :deep(.vxe-select--panel) {
    bottom: 5.83vh !important;
    .vxe-select--panel-wrapper {
      background-color: rgba(0, 0, 0, 0.65);
      .vxe-select-option--wrapper {
        max-height: inherit;
      }

      .vxe-select-option {
        color: #ccd4d4;
        font-size: 2.17vh;
        height: 5vh;
        display: flex;
        align-items: center;
        justify-content: center;

        &.is--selected {
          background-color: $icon_color;
          // background: linear-gradient(249deg, #4de798 26.9%, #a2fb6e 79.86%);
          color: $color;
        }
      }
    }
  }

  :deep(.vxe-pager) {
    margin-top: 1.25vh;
    background-color: transparent !important;
    height: 6.16vh;

    .vxe-pager--wrapper {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      column-gap: $btn_gap;

      .vxe-pager--sizes,
      .vxe-pager--jump {
        // width: 9em !important;
        margin: 0 20px;
      }

      .vxe-pager--goto-text,
      .vxe-pager--classifier-text,
      .vxe-pager--count,
      .vxe-pager--total {
        font-size: $fz;
        font-family: $family;
        color: rgb(75, 75, 104, 0.65);
      }

      i {
        color: $icon_color !important;
        font-weight: bolder;
      }

      .vxe-select {
        border-radius: $radius;
        box-shadow: $shadow;
        font-family: $family;
        background-color: $btn_bg;
        width: 200px;

        .vxe-input {
          font-family: $family;
          background-color: transparent !important;
          font-size: $fz;
          height: $btn_h;
          // width: 250px;
          input {
            color: #fff !important;
            // width: 150px;
          }

          .vxe-input--wrapper,
          .vxe-input--suffix {
            background-color: transparent !important;
          }
        }
      }

      .vxe-pager--jump .vxe-input {
        margin: 0 10px;
        background-color: #fff !important;
        input {
          color: $color !important;
        }
      }

      .vxe-pager--jump .vxe-input,
      button {
        font-size: $fz;
        width: $btn_w;
        height: $btn_h;
        border-radius: $radius;
        box-shadow: $shadow;
        font-family: $family;
        background-color: $btn_bg;

        &.is--disabled {
          box-shadow: none;
          i {
            color: #bfbfbf !important;
          }
        }

        &.vxe-pager--num-btn {
          $border_w: 0.33vh;
          color: $color;
          background-color: #fff;
          border: $border_w solid #fff;
          line-height: 4.67vh;
          &.is--active {
            background-color: $icon_color;
            box-shadow: none;
          }
        }
      }
    }

    button:not(.is--disabled) {
      // background-color: $primary-color;
      color: #fff;
    }
  }
}
</style>
