<!-- 文件展示组件 by LLQ 2019/5/5 -->
<template>

  <div class="wenjiyul">

    <p>&nbsp&nbsp&nbsp名称:<span class="colororg">{{filecontent}}</span>&nbsp&nbsp&nbsp<span>大小:<span
      class="colororg">{{convertFileSize(filecontentsize, "B")}}</span></span>
      <el-button class="addButton somales" @click="chatFileDownload()">下载</el-button>
    </p>
    <div class="yulanwrap">
      <iframe v-if="showtype=='docx'&&fileshowurl!=null" height='100%' class="show-iframes" frameborder='0'
              name="showHere" scrolling='auto' :src="fileshowurl"></iframe>
      <img class="magin0" v-if="showtype=='png'&&fileshowurl!=null" :src="fileshowurl" alt="">
      <p v-if="fileshowurl==null" class="suanhuai">抱歉,当前文件已损坏,无法预览...</p>
    </div>


    <div class="savefile">
      <el-dialog id="baocunweizhi" v-dialogDrag title="文件保存" :visible.sync="isSaveFile" width="400px" top='26vh'
                 append-to-body>
        <p class="slectfile">请选择存放位置&nbsp&nbsp&nbsp
          <el-select v-model="savePalce" placeholder="请选择">
            <el-option v-for="item in savePalceList" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </p>
        <p class="dialogcenter">
          <el-button class="secondButton-white" @click="isSaveFile=false">取消</el-button>
          <el-button class="secondButton" @click="saveChatFile">保存</el-button>
        </p>
      </el-dialog>
    </div>
  </div>
</template>

<script>
  import {
    getApi,
    postApi,
    getMessage
  } from "../../api/commonApi"
  export default {
    data() {
      return {
        userNames: localStorage.getItem("userName"),
        filecontent: '',
        filecontentsize: '',
        showtype: 0,// 1 文档 2图片 展示
        fileshowurl: null,//聊天窗口文件预览
        fileshow: false,//聊天文件预览
        isSaveFile: false,//存储弹框,
        socialFileId: null,//socialFileId
        itemfileType: null,//itemfileType
        filesItemurl: null,//下载地址
        savePalce: '网盘',//存储位置
        savePalceList: [{//存储选择表
          value: '网盘',
          label: '网盘'
        },
          {
            value: '本地',
            label: '本地'
          }
        ],

      };
    },
    created() {
      this.fileshowurl = localStorage.getItem('fileshowurl');
      this.filecontent = localStorage.getItem('filecontent')
      this.filecontentsize = localStorage.getItem('filecontentsize')
      this.showtype = localStorage.getItem('showtype')
      this.socialFileId = localStorage.getItem('socialFileId')
      this.itemfileType = localStorage.getItem('itemfileType')
      this.filesItemurl = localStorage.getItem('filesItemurl')
    },
    methods: {
      //弹出选择窗口
      chatFileDownload(item){
        let that = this;
        that.savePalce = '网盘';
        that.isSaveFile = true;
      },
//保存聊天文件
      saveChatFile(){
        let that = this;
        if (that.savePalce == '网盘') {
          // alert('网盘')
          postApi('/document/fileInfo/download', {
              userId: localStorage.getItem('userId'),
              companyId: localStorage.getItem('companyId'),
              socialFileId: that.socialFileId,
              fileName: that.filecontent,
              fileUrl: that.filesItemurl,
              webFlag: 4
            },
            function (data) {
              getMessage('保存成功', 'success')
              that.isSaveFile = false;
            },
            function (data) {
              getMessage(data.msg, 'error')
            });
        } else {
          // alert('本地')
          that.toLoad(that.filesItemurl, that.filecontent, that.itemfileType);
          that.isSaveFile = false;
        }


      },
      /**
       * 换算文件大小
       *
       * fileSize 文件大小
       * unit 文件大小单位
       */
      convertFileSize(fileSize, unit) {
        let binaryUnit = 1024;
        let size; //换算后的文件大小
        switch (unit) {
          case 'B': //字节
            let convertKBSize = fileSize / 1024;
            let convertMBSize = convertKBSize / 1024;
            if (convertKBSize < 1) { //小于1KB以B的形式展示
              size = fileSize + 'B';
            } else if (convertKBSize >= 1 && convertKBSize < 1024) { //大于等于1KB且小于1024KB以KB的形式展示
              size = convertKBSize.toFixed(1) + 'KB';
            } else if (convertMBSize >= 1) {
              size = convertMBSize.toFixed(1) + 'MB';
            }
            break;

          case 'KB':

            break;

          case 'MB':

            break;
        }
        return size;
      },
      //文件保存
      toLoad(url, fileName, type){
        console.log(fileName)
        if (this.filepan(type)) {
          window.location.href = url
        } else {
          window.open(url)
        }
        //
      },
      //判断是是否是文档类型
      filepan(fliletype){
        if (fliletype == 'doc' || fliletype == 'docx' || fliletype == 'xls' || fliletype == 'xlsx' || fliletype == 'ppt' || fliletype == 'pptx') {
          return true
        } else {
          return false
        }

      },


    }
  }
</script>
<style scoped="scoped">
  iframe {
    width: 100%;
    height: 100% !important;

  }

  .wenjiyul {
    height: 100%;
    width: 100%;
  }

  .colororg {
    color: #6469CC;
  }

  .fileurlss {
    display: block;
    text-align: left;
    margin-top: 5px;
  }

  .yulans {
    color: #999999;
    margin-left: 5px;
  }

  .xiazais {
    color: #6469CC;
    opacity: 0.8;
  }

  .yulans, .xiazais {
    font-size: 12px;
    cursor: pointer;
  }

  .fileimg {
    margin-bottom: 15px;
  }

  .yulanDialig {
    height: 500px;

  }

  .yulanwrap {
    width: 100%;
    height: calc(100% - 36px);
    margin-top: 10px;
    overflow: auto;
    text-align: center;
  }

  .magin0 {
    margin: 0 auto !important;
  }

  .addButton {
    background: #6469CC !important;
    color: #FFFFFF !important;
  }

  .somales {
    height: 20px;
    line-height: 2px;
    margin-left: 10px;

  }

</style>
<style>

</style>
