<script>
import findAncestorComponent from '@/common/services/find-ancestor-component'
export default {
  name: 'SdAttachmentDisplay',
  props: {
    value: {
      type: Array,
      required: true,
    },
    enablePreview: {
      type: Boolean,
      required: true,
    },
  },
  mounted() {
    // 把两个td都隐藏掉
    const tdInput = findAncestorComponent(this, 'SdFormItemTdInput')?.$el
    if (tdInput) {
      const tdLabel = tdInput.previousSibling
      if (this.enablePreview) {
        tdInput.classList.add(this.$style.forPrint)
        tdLabel.classList.add(this.$style.forPrint)
      }
    }
    // 把sdformiteminner隐藏掉
    const inner = findAncestorComponent(this, 'SdFormItemInner')?.$el
    if (inner && this.enablePreview) {
      inner.classList.add(this.$style.forPrint)
    }
  },
  render(h) {
    return (
      <div class={this.$style.wrapper}>
        {this.value.map((file) => (
          <div>{file.FileName}</div>
        ))}
      </div>
    )
  },
}
</script>

<style module lang="scss">
@use '@/common/design' as *;
@use "../sd-web-print.scss" as print;

:global(#sd-body) {
  // 一般情况隐藏
  .for-print {
    display: none;
  }
}

// 一般情况隐藏
.wrapper {
  display: none;
}

// 打印表单显示出来
@include print.wrapper {
  .for-print {
    display: table-cell;
  }

  // 显示自己，把常规的ex内容隐藏
  .wrapper {
    display: block;
  }
  :global(.sd-attachment-ex-contain) {
    display: none;
  }
}
</style>
