<template>
  <div class="attachment-container">
    <el-main v-if="loading || list.length>0" v-loading="loading">
      <ul class="attachment-list cl" :style="{overflow: list.length>10?'auto':''}">
        <li
          v-for="(item,key) in list"
          :key="key"
          :class="{'choose':chooseFileKey.indexOf(key)>-1}"
          @click="chooseAttachment(item,key)"
          @contextmenu.prevent="contextMenuId = item.id"
        >
          <el-popover
            :value="contextMenuId === item.id"
            placement="right"
            trigger="manual"
          >
            <div slot="default">
              <ul class="contextMenu">
                <li v-if="item.type ===2 || item.type ===3" @click="onPlay(item)">播放</li>
                <li @click="editAttachment()">编辑</li>
                <li @click="contextMenuId=0">取消</li>
              </ul>
            </div>
            <div slot="reference">
              <div class="file">
                <el-image v-if="item.type===1" class="file" :src="item.url" fit="contain">
                  <template slot="placeholder">
                    <div class="u-m-t-30">
                      <i class="el-icon-loading" />
                      <span>加载中</span>
                    </div>
                  </template>
                </el-image>
                <div v-if="item.type === 2">
                  <file-icon :value="getSuffixByFileName(item.filename)" :type="item.type" />
                  <!--                  <i class="other-file el-icon-microphone" />-->
                </div>
                <div v-if="item.type === 3">
                  <file-icon :value="getSuffixByFileName(item.filename)" :type="item.type" />
                  <!--                  <i class="other-file el-icon-video-camera" />-->
                </div>
                <div v-if="item.type===0">
                  <file-icon :value="getSuffixByFileName(item.filename)" />
                </div>
              </div>
              <div class="file-name over">{{ item.name }}</div>
              <div class="right">
                <i class="el-icon-check" />
              </div>
            </div>
          </el-popover>
        </li>
      </ul>
      <div class="block">
        <el-pagination
          :current-page="page"
          layout="total, prev, pager, next, jumper,sizes"
          :total="count"
          :page-size="size"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-main>
    <div v-else style="height: 340px;display: flex;align-items: center;justify-content: center;">
      <dk-empty />
    </div>
    <dk-form-create-dialog ref="editForm" :form-data="formData" :append-to-body="true" @submit="getAttachmentList()" />
    <el-dialog :visible.sync="dialogPlayVisible" width="600px" class="dk-file-play" append-to-body>
      <div class="play">
        <video :src="playFile" width="100%" controls />
      </div>
    </el-dialog>

  </div>
</template>

<script>
import { getAttachmentEdit, getAttachmentList } from '../../../../api/attachment'
import FileIcon from './FileIcon.vue'
import eventBus from '../eventBus'

export default {
  name: 'DkAttachmentContainer',
  components: {
    FileIcon
  },
  props: {
    type: {
      default: 1,
      type: [Number, String]
    }
  },
  data() {
    return {
      list: [],
      count: 0,
      page: 1,
      size: 10,
      attachmentType: this.type, // 附件类型
      chooseFileKey: [], // 选择的附件key
      chooseFileId: [], // 选中的附件Id
      chooseFileList: [], // 选中的附件列表
      contextMenuId: 0, // 右键操作附件id
      formData: null, // 编辑表单
      dialogPlayVisible: false,
      playFile: '',
      group_id: 0,
      loading: true
    }
  },
  mounted() {
    this.getAttachmentList()
    document.onclick = res => {
      this.contextMenuId = 0
    }
  },
  created() {
    eventBus.$on('refreshList', (type, group_id, search) => {
      if (this.type === type) {
        this.group_id = group_id
        this.page = 1
        this.getAttachmentList(group_id, search)
      }
    })
    eventBus.$on('selectGroup', (group_id) => {
      this.group_id = group_id
      this.page = 1
      this.getAttachmentList(group_id)
    })
  },
  methods: {
    onPlay(item) {
      this.playFile = item.url
      this.dialogPlayVisible = true
    },
    // 编辑附件
    editAttachment() {
      getAttachmentEdit(this.contextMenuId).then(res => {
        this.formData = res.data
        this.$refs.editForm.dialogFormVisible = true
      })
    },
    // 改变条数
    handleSizeChange(val) {
      this.size = val
      this.getAttachmentList()
    },
    // 改变页码
    handleCurrentChange(val) {
      this.page = val
      this.getAttachmentList()
    },
    getAttachmentList(group_id = 0, search = {}) {
      this.clearChoose()
      this.group_id = group_id || this.group_id
      this.loading = true
      getAttachmentList(this.page, this.size, this.attachmentType, this.group_id, search).then(res => {
        this.list = res.data
        this.count = res.msg
        this.loading = false
      })
    },
    clearChoose() {
      this.chooseFileKey = []
      this.chooseFileId = []
      this.chooseFileList = []
      this.emitChoose()
    },
    emitChoose() {
      this.$emit('choose', this.chooseFileKey, this.chooseFileList, this.chooseFileId)
      eventBus.$emit('choose', this.chooseFileKey, this.chooseFileList, this.chooseFileId)
    },
    chooseAttachment(item, key) {
      var index = this.chooseFileKey.indexOf(key)
      if (index > -1) {
        this.chooseFileList.splice(index, 1)
        this.chooseFileKey.splice(index, 1)
        this.chooseFileId.splice(index, 1)
      } else {
        this.chooseFileList.push(item)
        this.chooseFileKey.push(key)
        this.chooseFileId.push(item.id)
      }
      this.emitChoose()
    },
    // 根据application/pdf 获取后缀
    getSuffixByFileName(filename) {
      var suffix = filename.split('.')[1]
      // 转为大写
      suffix = suffix.toUpperCase()
      return suffix
    }
  }
}
</script>

<style scoped lang="scss">
.attachment-container {
  height: 412px;
  user-select: none;
  .attachment-list {
    height: 340px;

    li {
      width: calc(20% - 10px);
      float: left;
      margin: 5px;
      background: #eee;
      position: relative;
      height: 150px;
      border: 2px solid #eee;
      cursor: pointer;

      &:hover, &.choose {
        border: 2px solid #409EFF;
        z-index: 4;
      }

      .right {
        display: none;
      }

      &.choose {
        .right {
          display: block;
          position: absolute;
          font-size: 50px;
          background: rgba(0, 0, 0, .5);
          color: #fff;
          width: 100%;
          height: 146px;
          z-index: 3;
          text-align: center;
          line-height: 150px;
          bottom: 0;
        }
      }

      .file {
        width: 100%;
        height: 146px;
        text-align: center;

        .other-file {
          font-size: 80px;
          color: #aaa;
          line-height: 150px;
        }
      }

      .file-name {
        position: absolute;
        bottom: 0;
        width: 100%;
        padding: 4px 10px;
        background: rgba(0, 0, 0, .5);
        z-index: 2;
        color: #fff;
      }

    }
  }
}

</style>

<style lang="scss">
.contextMenu{
  li{
    cursor: pointer;
    text-align: center;
    border-bottom: 1px solid #F5F5F5;
    padding: 10px;
    &:hover{
      background: #f4fcff;
    }
  }
}
.dk-file-play{
  .el-dialog{
    background: none;
    box-shadow: none;
  }
  .play{
    background: #000;
    video{
      width: 100%;
      height: 300px;
    }
  }
}
</style>
