<template>
  <div class="multimedia_contanier height100">
    <div
      class="form-title_blue"
      :style="{}"
      v-if="data.titleName && data.showType != 'carousel'"
    >{{data.titleName}}</div>
    <div
      :class="((data.titleName && data.showType != 'carousel') ?'chart-content':'height100')"
      ref="multimediabox"
    >
      <div class="height100" v-if="data.attrType == 'picture' && data.showType == 'tile'">
        <img
          v-if="data.showPicture"
          class="pictureHeight"
          :src="data.showPicture"
          :alt="data.titleName"
          @click="upTo(data.linkUrl)"
        />
        <div
          v-else
          class="height100"
          style="background:#eee;display:flex;align-items:center;justify-content:center;"
        >
          <i class="iconfont icon-tupian icon" style="font-size:60px;color:#ccc;"></i>
        </div>
      </div>
      <el-carousel
        v-else-if="data.attrType == 'picture' && data.showType == 'carousel'"
        :height="boxHeight"
        :interval="data.interval? parseInt(data.interval) :3000"
        arrow="always"
        :direction="data.direction"
      >
        <el-carousel-item v-for="(item, index) in data.carouselList" :key="index">
          <img class="pictureHeight" :src="item.showPicture" alt @click="upTo(item.linkUrl)" />
        </el-carousel-item>
      </el-carousel>
      <div class="Height100" ref="tsviedo" v-else-if="data.attrType == 'video'">
        <video class="Height100" :width="videoWidth" :height="videoHeight" controls>
          <source :src="data.videoUrl" type="video/mp4" />
        </video>
      </div>
      <div v-else-if="data.attrType == 'text'" class="htmlbox ql-editor" v-html="data.content"></div>
    </div>
  </div>
</template>
<script>
import _ from 'lodash'
export default {
  name: 'multimedia',
  props: {
    title: {
      type: [String, Number],
      default: ''
    },
    isEditable: {
      type: [Boolean, String]
    },
    id: {
      type: String,
      default: ''
    },
    height: { type: [String, Number], default: 0 },
    data: {
      type: Object,
      default: () => []
    }
  },
  data() {
    return {
      videoWidth: 300,
      videoHeight: 150,
      boxHeight: '200px',
      pictureList: [{ name: '11' }, { name: '12' }, { name: '13' }]
    }
  },
  created() {},
  mounted() {
    this.initSquare()
  },
  methods: {
    initSquare() {
      setTimeout(() => {
        this.boxHeight = this.$refs.multimediabox.offsetHeight - 10 + 'px'
        this.videoHeight = this.$refs.multimediabox.offsetHeight - 10
        this.videoWidth = this.$refs.multimediabox.offsetWidth - 5
      }, 100)
    },
    upTo(url) {
      if (this.isEditable) {
        return false
      }
      // window.open(url)
    }
  },
  watch: {
    data: {
      handler(n) {
        this.data = n
        this.initSquare()
      },
      deep: true
    }
  }
}
</script>
<style lang="less" scoped>
.multimedia_contanier {
  width: 100%;
}
.chart-content {
  border-top: 1px solid #eeeeee;
  height: calc(100% - 40px);
}
.pictureHeight {
  height: 100%;
  width: 100%;
}
.htmlbox {
  width: 100%;
  height: 100%;
  /deep/ img {
    max-width: 100px;
    max-height: 90px;
  }
  /deep/ p {
    font-size: 12px;
  }
  /deep/.ql-editor {
    font-size: 12px;
  }
}
</style>
