<template>
  <div class="box" :class="props.config.showTitle ? 'pt-10' : ''">
    <div class="item-title" v-if="props.config.showTitle">{{ props.title }}</div>
    <div ref="chartRef" class="item">
      <a-image v-if="imageUrl" :src="imageUrl" height="100%" />
    </div>
  </div>
</template>

<script setup lang="ts">
  import { onMounted, ref, watch } from 'vue';
  import { ImageProperties } from '../config/properties';
  import { DesktopComponent } from '/@/enums/desktop';
  import { ImageConfig } from '/@/model/desktop/designer';
  import { getFileList } from '/@/api/system/file';
  import { getFileUrl } from '/@/utils/event/design';

  const props = withDefaults(
    defineProps<{
      type: DesktopComponent;
      w: number;
      h: number;
      title: string;
      config: ImageConfig;
    }>(),
    {
      type: DesktopComponent.IMAGE,
      w: 0,
      h: 0,
      config: () => {
        return ImageProperties;
      },
    },
  );
  const imageUrl = ref('');
  onMounted(() => {
    getImage();
  });
  watch(
    () => props.config.folderId,
    () => {
      getImage();
    },
    {
      deep: true,
    },
  );
  async function getImage() {
    if (props.config.folderId) {
      let fileList = await getFileList({ folderId: props.config.folderId });
      if (fileList.length) {
        imageUrl.value = getFileUrl(fileList[0]);
      }
    } else {
      imageUrl.value = '';
    }
  }
</script>

<style lang="less" scoped>
  .box {
    .item-title {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 40px;
      line-height: 40px;
      color: #262626;
      font-size: 14px;
      padding-left: 16px;
    }

    .item-title::after {
      content: '';
      display: block;
      position: absolute;
      height: 1px;
      bottom: 0;
      left: 0;
      right: 0;
      background-color: #f0f0f0;
    }

    .item {
      width: 100%;
      height: 100%;

      :deep(.ant-image) {
        width: 100%;
        height: 100%;

        img {
          border-radius: 0;
        }
      }
    }
  }
</style>
