<template>
  <el-dialog class="digger-alarm-modal" v-model="show" @close="handleClose">
    <!-- 自定义标题栏 -->
    <template #header="{ close, titleId, titleClass }">
      <div
        class="flex items-center justify-between digger-detail-dialog-header"
      >
        <div class="flex items-center justify-center header-left">
          <div class="header-icon mr-[12px]"></div>
          <p
            class="overflow-hidden whitespace-nowrap text-ellipsis max-w-[650px]"
          >
            钩机详情
          </p>
        </div>
      </div>
    </template>
    <!-- 图片区域 -->
    <div class="digger-detail-content">
      <!-- <img
        :src="file?.image_url"
        class="cursor-pointer"
        v-if="file?.image_url"
      /> -->
      <img :src="file?.image_url" v-if="false" />
      <div v-else class="w-full h-full bg_error_picture"></div>
    </div>
  </el-dialog>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import { Navigation, Scrollbar } from "swiper/modules";

interface Props {
  /** 弹窗显隐 */
  value: boolean;
  info: Record<string, any>;
}
interface Emits {
  (e: "update:value", val: boolean): void;
  (e: "close"): void;
}
const props = withDefaults(defineProps<Props>(), {
  value: false,
  info: {},
});

const emit = defineEmits<Emits>();
// 处理对话框关闭事件
const handleClose = () => {
  emits("close");
};

const show = computed({
  get() {
    return props.value;
  },
  set(val: boolean) {
    emit("update:value", val);
  },
});
</script>

<style lang="scss">
.digger-alarm-modal.el-dialog {
  border: none;
  overflow: hidden;
  box-shadow: none;
  background-color: transparent;
  background-image: url("@/assets/common/bg_real_dialog.png");
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  width: 816px;
  height: 609px;
  padding: 0;
  // margin-top: calc(50vh - 316px);

  .el-dialog__header.show-close {
    padding: 0;
  }

  .el-dialog__close {
    width: 56px;
    height: 56px;
    color: white;
    font-size: 18px;
    padding-top: 4px;
    padding-right: 20px;
  }

  .digger-detail-dialog-header {
    color: white;
    padding: 0;
    padding-top: 8px;
    margin-bottom: 10px;
    .header-left {
      padding: 0 24px;
      font-weight: bold;
      font-size: 18px;

      .header-icon {
        margin-top: 4px;
        width: 24px;
        height: 48px;
        background-image: url("@/assets/common/alarm_title.png");
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
      }
    }
  }

  .digger-detail-content {
    box-sizing: border-box;
    padding: 0 24px;
    width: 100%;
    height: 500px;
  }
}
</style>
