<script setup lang="ts">
interface Props {
  data: any
}
defineProps<Props>()
</script>

<template>
  <div class="material-preview">
    <template v-if="data.type == 1">
      <!-- 文本 -->
      <el-input type="textarea" :model-value="data.content"></el-input>
    </template>
    <template v-if="['2', '6', '7', '8'].includes(data.type)">
      <!-- 图片|二维码|小程序｜卡券 -->
      <img :src="data.content" />
    </template>
    <template v-if="data.type == 3">
      <!-- 语音 -->
      <div>
        <audio :src="data.content" controls v-if="data.content"></audio>
      </div>
    </template>
    <template v-if="data.type == 4">
      <!-- 视频 -->
      <video controls :src="data.content" style="width: 100%" v-if="data.content"></video>
    </template>
    <template v-if="data.type == 5">
      <el-input :model-value="data.content" placeholder="请输入">
        <template #prepend>https://</template>
        <template #append v-if="data.content">
          <a :href="data.content" target="_blank">查看</a>
        </template>
      </el-input>
    </template>
  </div>
</template>

<style lang="scss">
.material-preview {
  width: 100%;
  margin-top: 10px;

  * {
    max-width: 100%;
  }
}
</style>
