<template>
  <el-empty :description="description" :imageSize="imageSize" style="--el-font-size-base: 20px" :style="{ width: newWidth, height: newHeight }">
    <template #image>
      <img class="img" :src="imgUrl" :style="{ width: newImageSize, height: newImageSize }" draggable="false" />
    </template>
    <template #default>
      <div style="display: flex; align-items: center; justify-content: center; width: 100%; margin-top: 15px">
        <el-button
          v-for="(item, index) in pageLoadButton"
          :key="index"
          round
          style="width: 40%; min-width: 120px; max-width: 240px; height: 48px; background: rgba(255, 255, 255, 0.4)"
          @click="item.callBack"
        >
          {{ item.text }}
        </el-button>
      </div>
    </template>
  </el-empty>
</template>

<script setup lang="ts">
  import errImgUrl from '@/assets/images/global-state/fail-load.png';
  import nullImgUrl from '@/assets/images/global-state/not-data.png';
  import noNetImgUrl from '@/assets/images/global-state/not-network.png';
  import noPermissionImgUrl from '@/assets/images/global-state/not-permission.png';
  import { computed } from 'vue';

  const props = defineProps({
    /** 组件的宽度 */
    width: { type: [String, Number] as PropType<number | string>, default: '100%' },
    /** 组件的高度 */
    height: { type: [String, Number] as PropType<number | string>, default: '100%' },
    /** 提示文字 */
    description: { type: String, default: '暂无数据' },
    /** 提示图标的大小 */
    imageSize: { type: Number, default: 240 },
    /** 当前的状态 */
    loadState: { type: [String, Boolean] as PropType<Exclude<$LoadState, boolean> | false>, default: 'null' },
    /** 自定义操作按钮 */
    pageLoadButton: { type: Array as PropType<$PageLoadButton[]>, default: () => [] },
  });

  const imgTypeData = { err: errImgUrl, null: nullImgUrl, noNet: noNetImgUrl, noPermission: noPermissionImgUrl };
  const newImageSize = computed(() => `${props.imageSize}px`);
  const imgUrl = computed(() => {
    return typeof props.loadState === 'string' ? imgTypeData[props.loadState] || errImgUrl : errImgUrl;
  });

  const newWidth = computed(() => (typeof props.width === 'number' ? (props.width >= 0 ? `${props.width}px` : '100%') : props.width));
  const newHeight = computed(() => (typeof props.height === 'number' ? (props.height >= 0 ? `${props.height}px` : '100%') : props.height));
</script>

<style lang="scss" scoped>
  .el-empty {
    width: 100%;
    height: 100%;

    :deep(.el-empty__bottom) {
      width: 100%;
    }
  }

  html.dark .el-empty .img {
    opacity: 0.5;
  }
</style>
