<template>
  <div class="material-item">
    <img v-if="item.statusFlag === 0" class="invalid" src="../assets/img/invalid.svg" />
    <el-button v-if="!readOnly" class="material-item__delete" type="text" @click="onDelete">删除</el-button>
    <template v-if="item.type == 1">
      <div class="text__title">{{ item.title }}</div>
      <div class="text__content">{{ item.content }}</div>
    </template>
    <div class="webpage" v-else-if="item.type == 3">
      <div style="flex:1;min-width:0;margin-right:10px">
        <div class="webpage__title">{{ item.title }}</div>
        <div class="webpage__content">{{ item.content }}</div>
      </div>
      <img :src="item.img" />
    </div>
    <template v-else-if="[2, 4].includes(item.type)">
      <div class="media__title">{{ item.title }}</div>
      <div class="media__content">
        <img :src="item.img" />
      </div>
    </template>
    <div class="file" v-else-if="item.type == 5">
      <img style="width:36px;height:36px;margin-left:15px" :src="fileImg" />
      <span class="file__title">{{ item.title }}</span>
    </div>
  </div>
</template>

<script>
const fileImg = require('../assets/img/file2.svg'); //eslint-disable-line
export default {
  name: 'material-item',
  props: {
    item: Object,
    readOnly: Boolean
  },
  data() {
    return {
      fileImg
    };
  },
  methods: {
    onDelete() {
      this.$emit('delete', this.item.relation_id);
    }
  }
};
</script>

<style lang="scss" scoped>
.material-item {
  position: relative;
  box-sizing: border-box;
  font-size: 12px;
  font-weight: 400;
  color: #303133;
  line-height: 17px;
  position: relative;
  height: 100px;
  width: 240px;
  background-color: #f1f3f7;
  padding: 10px;
  &__delete {
    position: absolute;
    top: 10px;
    right: 10px;
  }
  .text-center {
    text-align: center;
  }
  .invalid {
    height: 40px;
    width: 40px;
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0.4;
  }
}
.text {
  &__title {
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  &__content {
    margin-top: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
  }
}
.webpage {
  margin-top: 20px;
  display: flex;
  align-items: center;
  &__content {
    margin-top: 10px;
  }
  &__title,
  &__content {
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
.media {
  &__content,
  &__title {
    text-align: center;
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  &__content {
    margin-top: 4px;
  }
}
.file {
  margin-top: 30px;
  display: flex;
  align-items: center;
  &__title {
    margin-left: 24px;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
img {
  height: 56px;
  width: 56px;
}
</style>
