<template>
  <div>
    <!-- 上传类型为图片时 -->
    <div v-if="fileType === 'picture'" class="list_wrapper">
      <div class="list-items">
        <div
          class="list-item"
          v-for="(item, index) in files"
          :key="index"
          @click="reviewImages(item)"
        >
          <img class="list-item-img" :src="item.url || item.dataUrl"/>
          <i
            class="iconfont iconshanchu3"
            @click="delFile(index)"
          ></i>
        </div>
        <div class="add_wrapper">
          <div class="content-upload_box" @click="$emit('emitInput')">
            <i class="iconfont iconjiahao"></i>
          </div>
        </div>
      </div>
    </div>
    <!-- 上传类型非图片时 -->
    <div v-else>
      <div class="show" v-for="(item, index) in files" :key="index">
        <i class="iconfont" :class="iconClass"></i>
        <p @click="preview(item)">{{ item.name }}</p>
        <div class="show-rigth">
          <i class="iconfont iconxingzhuang2"></i>上传成功
          <i class="iconfont iconshanchu1" @click="delFile(index)"></i>
        </div>
      </div>
    </div>
    <!-- 视频和音频预览 -->
    <common-dialog
      v-if="showSource"
      @closePopup="showSource = false"
      showMask
    >
      <div class="display-area">
        <video v-if="this.fileType === 'video'" controls="controls" style="outline: none" :src="Vurl"></video>
        <audio v-if="this.fileType === 'audio'" controls="controls" style="outline: none" :src="Aurl"></audio>
        <img v-if="this.fileType === 'picture'" :src="Purl">
      </div>
    </common-dialog>
  </div>
</template>

<script lang="ts">
import {Component, Watch, Prop, Vue} from "vue-property-decorator";
import CommonDialog from "@/components/CommonDialog.vue";

@Component({
  components: {
    CommonDialog
  },
})

export default class localFiles extends Vue {
  @Prop({
    type: Array,
    default: [],
  })
  files!: [];
  @Prop(String) fileType!: string;

  public iconClass!: string;
  public showSource: boolean = false;
  public Vurl: string = '';
  public Aurl: string = '';
  public Purl: string = '';

  @Watch('fileType')
  public onChange(newVal: string, oldVal: string) {
    this.iconClass = this.getClassICon(newVal);
  }

  public mounted() {
    this.iconClass = this.getClassICon(this.fileType);
  }

  public getClassICon(type: string) {
    const fileTypeMap: any = {
      'pdf': {
        iconClass: 'iconPDF',
      },
      'picture': {
        iconClass: 'iconshipinwenjian',
      },
      'audio': {
        iconClass: 'iconyinpin-copy',
      },
      'video': {
        iconClass: 'iconshipinwenjian',
      }
    };
    return fileTypeMap[type].iconClass;

  }

  /**
   * show file uploaded by different file type
   * @param item
   */
  public preview(item: { url: string }) {
    const funcMap: any = {
      pdf: this.openPDF,
      video: this.playVideo,
      audio: this.playAudio
    };
    funcMap[this.fileType](item);
  }

  public reviewImages(item: { url: string }) {
    this.showSource = true;
    this.Purl = item.url;
  }

  public openPDF(item: { url: string }) {
    window.open(item.url);
  }

  public playVideo(item: { url: string }) {
    this.showSource = true;
    this.Vurl = item.url;
  }

  public playAudio(item: { url: string }) {
    this.showSource = true;
    this.Aurl = item.url;
  }

  public delFile(index: number) {
    // todo 删除文件
    this.$emit('delete_file', index);
  }
}
</script>

<style lang="less" scoped>
.show {
  line-height: 1;
  cursor: pointer;
  padding-top: 20px;
  padding-bottom: 4px;
  width: 670px;

  p {
    font-size: 14px;
    margin: 0;
    display: inline-block;
    padding: 0;
    font-weight: 400;
    color: #353535;
  }

  .iconPDF {
    color: #fe572f;
    font-size: 16px;
    margin-right: 6px;
  }

  .iconshipinwenjian {
    // font-size: 22px;
    margin-right: 6px;
    float: left;
    color: rgba(51, 112, 255);
  }

  .iconyinpin-copy {
    color: #33c8ff;
    font-size: 16px;
    margin-right: 6px;
  }

  .show-rigth {
    float: right;
    font-size: 14px;

    .iconshanchu1 {
      color: #b6b5ba;
      font-size: 12px;
      margin-left: 10px;
    }

    .iconxingzhuang2 {
      margin-right: 2px;
      color: #33c724;
    }
  }
}


.add_wrapper {
  margin-right: 10px;
  float: left;
}

.content-upload_box {
  width: 80px;
  height: 80px;
  border-radius: 4px;
  border: 1px solid #dcdfe6;
  text-align: center;
  line-height: 80px;
  .iconjiahao {
    font-size: 24px;
    color: #d7d7d7;
  }
}
// 图片
.list-item {
  float: left;
  margin-right: 10px;
  margin-bottom: 10px;
  width: 80px;
  height: 80px;
  cursor: pointer;
  background: rgba(216, 216, 216, 1);
  border-radius: 4px;
  text-align: center;
  position: relative;
  .list-item-img {
    width: 100%;
    height: 100%;
    border-radius: 4px;
    border: 1px solid #dcdfe6;
    overflow: hidden;
  }
  .iconshanchu3 {
    position: absolute;
    right: -10px;
    font-size: 18px;
    top: -10px;
    cursor: pointer;
  }
}
</style>
