<template>
  <div class="fileView">
    <ul v-if="view==='file'"
        class="fileList">
      <li v-show="item.name"
          :key="'file'+index"
          v-for="(item,index) in viewList">
        <p @click="previewHandle(item)">
          <svg class="icon"
               aria-hidden="true">
            <use :xlink:href="item.name|typeFilter"></use>
          </svg>
          {{ item.name }}
        </p>
        <span>
          <i class="el-icon-download" @click="download(item)"></i>
          <i v-if="remove" class="el-icon-delete" @click="removeFile(item)"></i>
       </span>
      </li>
    </ul>
    <viewer v-if="view==='image'"
            :images="images">
      <ul class="imageList"
          :class="{remove:remove}">
        <li :key="'file'+index"
            :style="imageStyle"
            v-for="(item,index) in viewList">
          <template v-if="item.name && item.name.substr(item.name.lastIndexOf('.')).slice('.')==='.mp4'">
            <video @click="viewVideo(mergeConfig.domain+item.url)"
                   :src="mergeConfig.domain+item.url"></video>
          </template>
          <template v-else>
            <img v-if="item.url"
                 :src="mergeConfig.domain+item.url"
                 :title="item.name">
            <i v-if="remove"
               class="el-icon-delete"
               @click="removeFile(item)"></i>
          </template>
        </li>
      </ul>
    </viewer>
    <div class="fileViewSlot" v-if="view==='slot'">
      <slot :data="viewList"></slot>
    </div>
    <div class="model"
         v-if="model">
      <i @click="model=false"
         class="el-icon el-icon-close"></i>
      <video controls
             :src="mergeConfig.domain+current"></video>
    </div>
  </div>
</template>
<script>
import { merge } from 'lodash-es'
import { removeObjWithArr } from '../../../utils'

export default {
  name: 'sFileView',
  inject: ['config', 'mapper'],
  data () {
    return {
      current: '',
      model: false,
      viewList: []
    }
  },
  props: {
    // 可以是对象数组，或拼接字符串
    // Array:[{ name:'',url:'' }]
    // String: url1+'&&'+name1+','+...
    value: [Array, String],
    remove: {
      type: Boolean,
      default: false
    },
    view: {
      type: String,
      default: 'file'
    },
    imageStyle: {
      type: Object
    },
    path: {
      type: String,
      default: ''
    },
    asyncConfig: {
      type: Object,
      default () {
        return {}
      }
    }
  },
  filters: {
    typeFilter (name) {
      const type = name && name.substr(name.lastIndexOf('.')).slice('.')
      switch (type) {
        case '.pdf':
          return '#icon-ppt1'
        case '.doc':
        case '.docx':
          return '#icon-word'
        case '.ppt':
        case '.pptx':
          return '#icon-ppt'
        case '.xls':
        case '.xlsx':
          return '#icon-excel'
        case '.txt':
          return '#icon-txt'
        case '.png':
        case '.jpg':
        case '.jpeg':
        case '.gif':
          return '#icon-Image_File'
        case '.zip':
        case '.rar':
          return '#icon-yasuobao'
        case '.mp4':
          return '#icon-icon-test'
      }
    }
  },
  computed: {
    images () {
      const images = []
      if (this.view === 'image') {
        this.viewList && this.viewList.map(item => {
          images.push(item.url)
        })
      }
      return images
    },
    mergeConfig () {
      return merge(this.$UploadConfig, this.asyncConfig)
    }
  },
  watch: {
    value () {
      this.buildViewList()
    }
  },
  created () {
    this.buildViewList()
  },
  methods: {
    viewVideo (url) {
      this.current = url
      this.model = true
    },
    removeFile (item) {
      removeObjWithArr(this.viewList, item)
      this.$emit('input', this.viewList)
    },
    download (item) {
      const a = document.createElement('a')
      a.setAttribute('download', '')
      a.setAttribute('href', this.mergeConfig.domain + item.url)
      a.click()
    },
    previewHandle (item) {
      const type = item.name.substr(item.name.lastIndexOf('.'))
      switch (type) {
        case '.pdf':
        case '.xls':
        case '.xlsx':
        default:
          window.open(this.mergeConfig.domain + item.url)
      }
    },
    buildViewList () {
      let viewList = []
      if (this.value && typeof this.value === 'string') {
        if (this.value.indexOf('[{') < 0) {
          this.value.split(',').map(item => {
            viewList.push({
              name: item.split('&&')[1],
              url: item.split('&&')[0]
            })
          })
        } else {
          viewList = JSON.parse(this.value).map(item => {
            return {
              name: item[this.mergeConfig.nameKey] || item.name,
              url: item[this.mergeConfig.urlKey] || item.url
            }
          })
        }
      } else {
        viewList = this.value && this.value.map(item => {
          return {
            name: item[this.mergeConfig.nameKey] || item.name,
            url: item[this.mergeConfig.urlKey] || item.url
          }
        })
      }
      this.viewList = viewList
    }
  }
}
</script>
<style lang="scss" scoped>
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}

.model {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 9999;
  background-color: rgba(0, 0, 0, 0.45);

  .el-icon {
    position: absolute;
    top: 5%;
    right: 5%;
    color: #fff;
    cursor: pointer;
    font-size: 24px;
  }

  video {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #000;
    width: 60%;
    max-width: 60%;
    max-height: 60%;
  }
}

.fileView {
  width: 100%;

  .fileList {
    margin: 0;
    padding: 0;

    li {
      display: flex;
      justify-content: space-between;
      align-items: center;
      line-height: 30px;
      padding: 6px;
      border: 1px dashed #ddd;
      margin-bottom: 5px;

      &:last-child {
        margin-bottom: 0;
      }

      &:hover {
        background-color: #eee;
        color: #5ea9f8;
      }

      p {
        margin-bottom: 0;
        cursor: pointer;
        margin-top: 0;
        display: flex;
        justify-content: flex-start;
        align-items: center;

        .icon {
          width: 24px;
          height: 24px;
          margin-right: 5px;
        }
      }

      span {
        i {
          font-size: 20px;
          margin-right: 10px;
        }
      }
    }
  }

  .imageList {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;

    &.remove {
      li:hover {
        i {
          display: block;
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          color: #fff;
          z-index: 2;
          font-size: 24px;
        }

        &:after {
          content: '';
          display: inline-block;
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          z-index: 1;
          background-color: rgba(0, 0, 0, 0.4);
        }
      }
    }

    li {
      width: 98px;
      height: 98px;
      border: 1px dashed #f2f2f2;
      overflow: hidden;
      display: flex;
      justify-content: center;
      align-content: center;
      position: relative;
      margin-right: 8px;
      margin-bottom: 8px;

      img {
        width: 100%;
        height: 100%;
      }

      video {
        width: 100%;
        height: 100%;
      }

      i {
        display: none;
      }

      &:hover {
        cursor: pointer;
        background-color: rgba(0, 0, 0, 0.4);
      }
    }
  }
}
</style>
