<template>
  <div class="iphone">
    <div class="infoList">
      <div class="infoListBox">
        <div class="infoAvatar">
          <img src="@/assets/head_default.jpg" />
        </div>
        <div class="textInfo">
          <div class="content" v-html="welcomeContent"></div>
        </div>
      </div>
      <div class="infoListBox" v-for="(item, index) in mediaList" :key="index">
        <div>
          <div class="infoAvatar">
            <img src="@/assets/head_default.jpg" />
          </div>
          <div v-if="item.mediaType == 1 || item.mediaType == 7" class="imgInfo">
            <img :src="item.mediaUrl" />
          </div>
          <div v-if="item.mediaType == 2" class="videoInfo" @click="blank(item.mediaUrl)">
            <video :src="item.mediaUrl" />
          </div>
          <div v-if="item.mediaType == 3" class="docInfo" @click="blank(item.mediaUrl)">
            <div class="docTitle">
              <b>{{ item.mediaTitle }}</b>
              <p>{{ item.mediaSize }} KB</p>
            </div>
            <svg-icon iconname="iconwenjianleixing-wenjian" size="40"> </svg-icon>
          </div>
          <div v-if="item.mediaType == 4" class="urlInfo">
            <div class="urlTitle">{{ item.mediaTitle }}</div>
            <div class="urlContent">
              <b>{{ item.mediaTitle }}</b>
              <svg-icon iconname="iconwenjianleixing-lianjie" size="40"> </svg-icon>
            </div>
          </div>
          <div v-if="item.mediaType == 5 || item.mediaType == 6" class="appletsInfo">
            <div class="appletsTitle">{{ item.miniProgramName }}</div>
            <div class="appletsTitle" style="font-size:12px">{{ item.mediaTitle }}</div>
            <img :src="item.mediaUrl" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  props: {
    welcomeContent: {
      type: String,
      default: ''
    },
    mediaList: {
      type: Array,
      default: () => []
    }
  },
  watch: {
    mediaList(val) {
      console.log(val);
    }
  },
  methods: {
    blank(url) {
      window.open(url);
    }
  }
};
</script>

<style type="text/scss" lang="scss" scoped>
.iphone {
  border-radius: 4px;
  position: relative;
  margin-left: 117px;
  display: inline-block;
  font-size: 0;
  line-height: 0;
  background-image: url('../assets/iphone2.png');
  background-repeat: no-repeat;
  width: 240px;
  min-height: 495px;
  background-size: 240px auto;
  color: #303133;
  .infoList {
    padding: 0 10px;
    margin-top: 80px;
    border-radius: 6px;
    max-height: 360px;
    overflow: auto;
    .infoListBox {
      .infoAvatar {
        display: inline-block;
        vertical-align: top;
        margin-right: 10px;
        img {
          vertical-align: top;
          width: 26px;
          height: 26px;
        }
      }
      .imgInfo,
      .videoInfo {
        display: inline-block;
        overflow: hidden;
        border-radius: 4px;
        position: relative;
        cursor: default;
        img {
          min-height: 27px;
          max-width: 140px;
        }
      }
      .videoInfo {
        video {
          min-height: 27px;
          max-width: 140px;
          max-height: 250px;
          cursor: pointer;
        }
      }
      .textInfo,
      .docInfo,
      .urlInfo,
      .appletsInfo {
        min-height: 28px;
        background-color: #fff;
        border: 1px solid #e4e6e9;
        max-width: 166px;
        display: inline-block;
        text-align: left;
        padding: 5px 6px;
        border-radius: 4px;
        min-width: 24px;
        box-sizing: border-box;
        position: relative;
        &::before {
          top: 10px;
          display: block;
          content: ' ';
          width: 0;
          line-height: 0;
          font-size: 0;
          border-style: solid;
          border-color: transparent;
          position: absolute;
          left: -6px;
          border-width: 4px 6px;
          border-left: 0;
          border-right-color: #fff;
        }
        .content {
          font-size: 12px;
          word-break: break-all;
          letter-spacing: 0;
          line-height: 18px;
          height: auto;
        }
      }
      .docInfo {
        display: inline-flex;
        align-items: center;
        cursor: pointer;
      }
      .docTitle {
        padding-right: 10px;
        max-width: 100px;
        float: left;
        overflow-wrap: break-word;
        b {
          font-size: 12px;
          text-align: left;
          line-height: 16px;
        }
        p {
          margin-top: 5px;
          font-size: 12px;
          color: #787878;
          text-align: left;
          line-height: 14px;
        }
      }
      .urlTitle,
      .appletsTitle {
        font-size: 14px;
        line-height: 20px;
        overflow: hidden;
        text-overflow: ellipsis;
        margin-bottom: 3px;
      }
      .urlInfo {
        .urlContent {
          overflow-wrap: break-word;
          b {
            color: #606266;
            padding-right: 10px;
            font-size: 12px;
            text-align: left;
            line-height: 17px;
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
            overflow: hidden;
            max-width: 100px;
            float: left;
          }
        }
      }
      .appletsInfo {
        .appletsTitle {
          color: #606266;
        }
        img {
          width: 144px;
          height: 144px;
        }
      }
    }
    .infoListBox + .infoListBox {
      margin-top: 15px;
    }
  }
}
</style>
