<template>
  <div class="eibs-tab">
    <c-col :span="24">
      <c-col :span="12" class="col-left">
        <el-form-item label="上传文件路径" style="width:100%">
          <c-fullbox>
            <c-input clearable v-model="model.uppath" placeholder="请输入上传文件路径" style="width: 100%">
            </c-input>
            <template slot="footer">
              <c-button
                style="margin: 0 0 0 10px; padding: 0 12px"
                size="small"
                type="primary"
                @click="uploadfile()"
              >
                上 传
              </c-button>
            </template>
          </c-fullbox>
        </el-form-item>
      </c-col>
    </c-col>
    <!-- 上传路径 -->
    <c-col :span="24">
      <c-col :span="12" class="col-left">
        <el-form-item label="目标路径" style="width:100%">
          <c-input 
            v-model="model.tarpath" 
            placeholder="请输入目标路径" 
            style="width: 100%" 
            :disabled="true">
          </c-input>
        </el-form-item>
      </c-col>
    </c-col>
    <!-- 下载 -->
    <c-col :span="24">
      <c-col :span="12" class="col-left">
        <el-form-item label="下载文件路径" style="width:100%">
          <c-fullbox>
            <c-input clearable v-model="model.downpath" placeholder="请输入下载文件路径" style="width: 100%">
            </c-input>
            <template slot="footer">
              <c-button
                style="margin: 0 0 0 10px; padding: 0 12px"
                size="small"
                type="primary"
                @click="download()"
              >
                下 载
              </c-button>
            </template>
          </c-fullbox>
        </el-form-item>
      </c-col>
    </c-col>
    
    <!-- 操作按钮 -->
    <c-col>
      <el-dialog title="选取文件" :visible.sync="dialog" :close-on-click-modal="false" @close="cancel" center>
        <c-col :span="24">
          <c-col :span="24">
            <div class="upload-file">
              <el-upload action="/webapi/manager/fileupdown/upload" :limit="1"
              :data="uploaddata"
               :file-list="fileList" :on-exceed="handleExceed" :auto-upload="false"
                 ref="uploadff">
                <!--上传按钮-->
                <el-button slot="trigger" size="mini" type="primary">选取文件</el-button>
                <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">确 认</el-button>
              </el-upload>
              <!-- 文件列表 -->
              <transition-group class="upload-file-list el-upload-list el-upload-list--text" name="el-fade-in-linear"
                tag="ul">
                <li :key="file.uid" class="el-upload-list__item ele-upload-list__item-content"
                  v-for="(file, index) in fileList">
                  <el-link :href="file.url" :underline="false" target="_blank">
                    <span class="el-icon-document"> {{ getFileName(file.name) }} </span>
                  </el-link>
                  <div class="ele-upload-list__item-content-action">
                    <el-link :underline="false" @click="handleDelete(index)" type="danger">删除</el-link>
                  </div>
                </li>
              </transition-group>
            </div>
            <div>
              <el-form-item label="目标路径" style="width:100%; padding: 20px 10px 0 0; margin: 0 0 0 0" label-width="80px">
                <c-input 
                  clearable
                  v-model="model.tarpath" 
                  placeholder="请输入目标路径" 
                  style="width: 100%">
                </c-input>
              </el-form-item>
            </div>
          </c-col>
        </c-col>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="cancel">取 消</el-button>
        </span>
      </el-dialog>
    </c-col>
  </div>
</template>

<script>
  import { upload, moveFile, fileDown } from "~/service/manage/txm.js";
  import Api from "~/service/Api";
  import commonFunction from '~/mixin/commonFunctions.js';

  export default {
    mixins: [commonFunction],
    props: ["model"],
    inject: [],
    data() {
      return {
        name: "",
        uploaddata: {
          tarpath: "sstf/data/temp",
        },
        // 已选择文件列表
        fileList: [],
        // 是否显示文件上传弹窗
        dialog: false,
        action: 'action',
      };
    },
    
    methods: {
      handleReset() {
        this.model.uppath = "";
        this.model.tarpath = "sstf/data/temp";
        this.model.downpath = "";
      },
      // 文件个数超出
      handleExceed() {
        this.$notify.error(`只允许上传1个文件`);
      },
      // 删除文件
      handleDelete(index) {
        this.fileList.splice(index, 1);
      },
      // 获取文件名称
      getFileName(name) {
        if (name.lastIndexOf("/") > -1) {
          this.model.uppath = name.slice(name.lastIndexOf("/") + 1).toLowerCase();
          return name.slice(name.lastIndexOf("/") + 1).toLowerCase();
        } else {
          return "";
        }
      },
      /** 手动提交上传 */
      async submitUpload() {
        if (!this.model.tarpath) {
          this.$notify.error("目标路径不能为空!")
          return
        }
        this.uploaddata.tarpath = this.model.tarpath
        this.$refs.uploadff.submit()
        this.$message.success("上传成功")
        // let rtnmsg = await Api.post("/manager/fileupdown/upload");
        //   if (rtnmsg.respCode == "AAAAAA") {
        //     this.$notify.success("上传成功!");
        //   }else{
        //     this.$notify.error("上传失败!");
        //   }
        this.cancel()
      },
      /** 关闭上传弹框 */
      cancel() {
        this.fileList = [];
        this.dialog = false;
      },
      async download(){
        if (!this.model.downpath) {
          this.$message.info("下载路径为空，请输入下载路径");
          return;
        }
        let params = {
          path:this.model.downpath
        } 
        let res = await Api.post("/manager/fileupdown/fileDown", params);
        if (res.respCode == "AAAAAA") {
				//res.data 内容为 TextResultVo 
          if (res.data.data) {
            let type, code = res.data;
            const loading = this.loading()
            this.base64ToBlob(code,type)
            loading.close()
            this.$notify({
              title: "成功",
              message: "文件下载成功！",
              type: "success",
            });
          }
          else {
            this.$notify({
              title: '失败',
              message: '文件下载失败！',
              type: 'error',
            });
          }
			  }
      },
      base64ToBlob(code, type) {
        if(type == 'application/pdf') {
          code.data = code.data.replace(/[\n\r]/g, "")
        }
        const raw = window.atob(code.data);
        const rawLength = raw.length;
        const uInt8Array = new Uint8Array(rawLength);
        for (let i = 0; i < rawLength; ++i) {
          uInt8Array[i] = raw.charCodeAt(i);
        }
        const blob = new Blob([uInt8Array], { type: type });
        // const fileURL = URL.createObjectURL(blob);
        // window.open(fileURL)
        let fileName = code.filename;
        var downloadElement = document.createElement('a');
        var href = window.URL.createObjectURL(blob);
        downloadElement.href = href;
        downloadElement.download = fileName;
        document.body.appendChild(downloadElement);
        downloadElement.click();
        document.body.removeChild(downloadElement);
        window.URL.revokeObjectURL(href);
      },
      uploadfile() {
        this.dialog = true;
      },

    },
  };
</script>

<style scoped>
  .table-button-item-list {
    padding: 0;
    margin: 0;
  }

  .table-button-item-list li {
    list-style: none;
    padding: 5px 0;
    text-align: center;
    color: #606266;
    cursor: pointer;
  }
</style>