<script>
import html2canvas from 'html2canvas'

export default {
  name: 'CompAttachment',
  props: {
    vin: {
      type: [String, Array],
      default: null
    },
    iccid: {
      type: Array,
      default: null
    },
    fileId: {
      type: String,
      default: ''
    }
  },
  mounted() {
    this.exportAttachmentUrl()
  },
  methods: {
    /**
     * 导出图片链接
     */
    async exportAttachmentUrl() {
      // 导出图片
      const cvs = await html2canvas(document.querySelector('.component-attachment-wrapper'))
      // 导出图片
      this.$emit('change', cvs.toDataURL())
    }
  },
  render() {
    return (
      <div class='component-attachment-wrapper'>
        <h1>*附件</h1>
        {
          typeof this.vin === 'string' ? (
            <div>
              <div class='vin-title'>VIN: {this.vin}</div>
              <div class='vin-title'>ICCID: {this.iccid.join(', ')}</div>
            </div>
          ) : (
            this.fileId ? (
              <div>
                <div class='vin-title'>文件id: {this.fileId}</div>
                <div class='vin-content'></div>
              </div>
            ) : (
              <div>
                {
                  this.vin.map(vin => (
                    <div style='border-top: 1px solid #666666;'>
                      <p>VIN: {vin.vin}</p>
                      <p>ICCID: {vin.iccidList.join(', ')}</p>
                    </div>
                  ))
                }
              </div>
            )
          )
        }
      </div>
    )
  }
}
</script>

<style lang="scss">
.component-attachment-wrapper {
  background-color: #ffffff;
  width: 750px;
  height: 500px;
  padding: 20px 40px;
  position: fixed;
  top: 0px;
  left: 100vw;
  h1 {
    font-size: 22px;
  }
  .vin-title {
    font-size: 20px;
    margin: 16px 0 12px;
  }
}
</style>
