<template>
  <div class="video-config">
    <div class="video-title">{{ configContent.title || ' ' }}</div>
    <div class="vide-box">
      <video
        v-if="configContent.link"
        width="100%"
        height="100%"
        :src="configContent.link"
        controls
      ></video>
      <img v-else :src="defaultVideo" />
    </div>
  </div>
</template>

<script>
import defaultVideo from '@/assets/CreationCamp/defaultVideo.png'
export default {
  props: {
    config: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    return {
      defaultVideo
    }
  },
  computed: {
    configContent() {
      return this.config.content
    }
  }
}
</script>

<style lang="less" scoped>
.video-config {
  padding: 0 10px;
  .video-title {
    position: relative;
    padding: 10px;
    font-size: 18px;
    height: 42px;
    font-family: PingFang SC;
    font-weight: bold;
    color: rgba(51, 51, 51, 1);
    &::before {
      content: '';
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      width: 3px;
      height: 17px;
      margin: auto;
      background: linear-gradient(
        0deg,
        rgba(255, 162, 0, 1),
        rgba(255, 121, 17, 1)
      );
      border-radius: 1.5px;
    }
  }
  .vide-box {
    height: 240px;
    img {
      width: 100%;
      height: 100%;
      border: 1px solid #eee;
    }
  }
}
</style>
