17pdf_front_end/pages/converter.vue

<template>
    <div class="page-converter">
      <div class="date-tips flex content-center justify-center py-6px">
        <img src="http://cn-file.17pdf.com/website/common/ic_notice.svg" class="align-middle">
        <div class="text-container">
          <span class="text">
            转档后的文件支持在云端保留24小时<span v-if="userInfo.name">，<span v-if="userInfo?.subscriberType === 1">会员尊享5G容量，</span>请在24小时内下载文件至本地永久保存</span> 
          </span>
          <span v-if="userInfo?.subscriberType === 1" class="vip tip">
            <img src="http://cn-file.17pdf.com/website/common/ic_info.svg" alt="">
            <div class="tip-text">
              若已有文件大小超出5G，将按转档时间计算（从最近一次转档往过去推算），即保留最近的5G容量文件，超出部分文件将不再保留
            </div>
          </span>
        </div>
      </div>
      <h1 class="text-48px text-opacity-100 font-500 text-[#3333] mt-48px mb-10px text-center">文件转换器</h1>
      <h2 class="text-20px text-center text-[#666] mt-20px font-normal">PDF文件格式转换器，一键转档，支持批量转换，精准快速。</h2>
      <div class="text-center mb-80px">
        <a
  class="mt-20px text-[#4D4D4D] text-16px font-600 inline-flex items-center leading-22px hover:text-$btn-color-primary hover:underline"
          href="https://www.compdf.com/pdf-conversion-sdk?utm_source=anroidapp&utm_medium=17pdfweb&utm_campaign=pdfsdk" target="_blank">由 ComPDFKit Conversion SDK 提供技术支持
          <svg class="ml-8px" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M6 12.9567L10.714 8.24261L6 3.52856" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg>
        </a>
      </div>
      <div class="transfer-container-wrap">
        <div class="index-converter w-[80%] h-700px relative top-0 left-[50%] -ml-[40%]">
          <div class="transfer-container absolute w-full h-auto my-0 -mx-15px bg-white pb-60px">
            <button type="button" class="close hidden" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">×</span>
            </button>
            <div class="recharge py-0 px-[10%] h-48px mx-0 mt-24px mb-14px absolute right-0 -top-70px z-2">
              <span @click="handlSubmit($event, 'buy')" class="recharge-btn float-right bg-white border border-[#ff4f4f] boder-solid text-16px py-7px px-18px rounded-4px mt-4px cursor-pointer hover:bg-[#ff4f4f]">
                <a class="text-[#ff4f4f] no-underline leading-normal">充值</a>
              </span>
              <div class="need-volume float-right right-48px text-16px text-[#666] leading-48px mr-20px">
                所需券：
                <span class="text-[#0dd299] text-16px" :class="{'text-red-500': requiredCoupon > userInfo?.points}">
                  {{ requiredCoupon }}券
                </span> 
                / 剩余券：
                <span class="text-[#0dd299] text-16px">
                  {{ Object.keys(this.userInfo).length === 0 ? 0 : userInfo.points }}券
                </span>
              </div>
            </div>
            <div class="transfer-panel">
              <div>
                <form enctype="multipart/form-data">
                  <input type="hidden" name="folder" value="converter/input"/>

                  <!-- 转档框 -->
                  <div class="file-input theme-explorer file-input-ajax-new h-380px mt-17px py-0 px-[10%]">
                    <div class="file-preview rounded-5px w-[100%] h-[100%]">
                      <div  ref="drag" @drop="handleEvent" @dragleave="handleEvent" @dragenter="handleEvent" @dragover="handleEvent"
                      class="file-drop-zone border border-dashed border-[#d1d1d1] rounded-4px h-[100%] text-center align-middle overflow-y-auto">
                        <div v-show="fileList.length <= 0" class="file-drop-zone-title text-[#999] text-16px leading-[1.428571429] pt-222px cursor-default">
                          <div></div>
                          点击从电脑上传文件或把文件拖到这里
                          <p class="text-14px leading-[1.428571429]">（支持PDF to Word、PPT、Excel、TXT、JPG/PNG无限次数转换）</p>
                        </div>
                        <table id="table-fileinput" class="table table-hover w-[100%] max-w-[100%]">
                          <thead v-show="fileList.length > 0">
                            <tr class="h-40px bg-[#eee]">
                              <th class="!w-[5.5%]"></th>
                              <th class="!text-left w-[40.5%]">文档名</th>
                              <th class="!w-[13%]">大小</th>
                              <th class="!w-[13%]">所需券</th>
                              <th class="!w-[9.5%]">转为</th>
                              <th class="!w-[13%]">状态</th>
                              <th class="!w-[4.5%]"></th>
                            </tr>
                          </thead>
                          <tbody v-show="fileList.length > 0" class="file-preview-thumbnails cursor-default">
                            <tr v-for="(item, index) in fileList" id="preview-1668340925733-0" :key="index" class="file-preview-frame explorer-frame  kv-preview-thumb w-100px h-38px hover:bg-[#f5f5f5]" data-fileindex="0" data-template="pdf" :title="item.name">
                              <td class="file-details-cell">{{ index+1 }}</td>
                              <td class="file-details-cell !text-left">
                                <div class="explorer-caption max-w-260px truncate block text-[#777]" :title="item.name">{{ item.name }}</div>
                              </td>
                              <td class="file-details-cell text-[#999]">{{ getfilesize(item.size) }}</td>
                              <td class="file-details-cell points">{{ userInfo?.subscriberType === 1 ? 0 : item.price }}</td>
                              <td class="file-details-cell select w-106px">
                                <select v-show="item.status !== 6" v-model="item.output" class="transfer-select appearance-none text-center min-w-90px" @change="changeOutput(item, index)" :disabled =" !changeFileFlag">
                                  <option value="docx" class="text-center">DOCX</option>
                                  <option value="pptx" class="text-center">PPTX</option>
                                  <option value="xlsx" class="text-center">XLSX</option>
                                  <option value="txt" class="text-center">TXT</option>
                                  <option value="jpg" class="text-center">JPG</option>
                                  <option value="png" class="text-center">PNG</option>
                                </select>
                                <span v-show="item.status == 6">{{ item.output.toUpperCase() }}</span>
                              </td>
                              <td class="file-details-cell state text-14px text-[#878787]" v-html="fileStatus(item, index)"></td>
                              <!-- <td v-else class="file-details-cell state text-14px text-red-500">转换失败<img src="/converter/menu_ic_pdfconvert.png" @click="rechangeFile" /></td> -->
                              <td class="file-actions-cell w-50px p-0">
                                <div class="file-actions text-center">
                                  <div class="file-footer-buttons" @click="deleteFile(index,item)" v-if="changeFileFlag">
                                      <button type="button" class="kv-file-remove btn btn-xs btn-default bg-inherit !border-none pr-7px py-1px pl-5px text-12px leading-normal rounded-3px" title="删除文件"><i class="pdf-removeicon"></i></button>
                                  </div>
                                </div>
                              </td>
                            </tr>
                          </tbody>
                        </table>
                        <div class="clearfix"></div>
                        <div class="file-preview-status text-success text-center text-[#3c763d]"></div>
                      </div>
                    </div>
                    <div class="kv-upload-progress hide">
                      <div class="progress overflow-hidden h-20px mb-20px bg-[#f5f5f5] rounded-4px ring-inset-2 ring-[rgba(0,0,0/10%)]">
                        <div class="progress-bar progress-bar-success progress-bar-striped active w-0 bg-[#5cb85c]" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
                          0%
                        </div>
                      </div>
                    </div>
                    <div class="input-group file-caption-main w-[100%] -top-450px relative table border-separate">
                      <div v-show="changeFileFlag" class="input-group-btn relative text-0px whitespace-nowrap !flex">
                        <div tabindex="500" class="btn btn-file" :class="{'btn-file-left' : fileList.length > 0}" v-if="changeFileFlag">
                          <div class="add-file" :class="{'add-file-left':(fileList.length > 0)}">
                            {{ fileList.length > 0 ? '添加文件' : '' }}
                          </div>
                          <!-- 未登录时 -->
                          <input id="fileinput-explorer" ref="file" name="file" accept=".pdf" title="上传文件" type="file" multiple=""
                          class="absolute top-0 right-0 p-0 m-0 min-w-[100%] h-[100%] w-90px text-right opacity-0 bg-none bg-repeat bg-scroll block outline-none border-0 cursor-not-allowed"
                          :disabled='true' v-if = " showInputDisable "/>
                          <!-- 登录 -->
                          <input id="fileinput-explorer" ref="file" name="file" accept=".pdf" title="上传文件" type="file" multiple=""
                          class="absolute top-0 right-0 p-0 m-0 min-w-[100%] h-[100%] w-90px text-right opacity-0 bg-none bg-repeat bg-scroll block outline-none border-0 cursor-pointer"
                          @change="addFile($event)" @click="handlSubmit($event, '')" v-if = " !showInputDisable "/>
                        </div>
                        <div v-show="fileList.length > 0 && changeFileFlag" class="inline-block ml-30px bg-white border border-[#ff4f4f] boder-solid text-16px py-7px px-18px rounded-4px mt-4px cursor-pointer text-[#ff4f4f] leading-normal hover:bg-[#ff4f4f] hover:text-white" 
                          @click="deleteAllFile">清空</div>
                      </div>
                    </div>
                  </div>
                </form>
              </div>
  
              <div class="transfer-btn mt-30px h-64px text-center">
                <div class="cursor-not-allowed inline-block">
                    <span :class="{'disabledBtn' : !checkbox || !changeFileFlag||fileList.length === 0 }" class="btn transfer-start-btn bg-[#ff524f] text-20px py-0 px-150px rounded-4px h-60px w-386px text-white hover:bg-[#f34545]"
                    @click="handlSubmit($event, 'change')">
                      <a class="text-white leading-60px">{{ !changeFileFlag ? '转换中...' : '开始转换' }}</a>
                      <span v-show="!changeFileFlag" class="loading"></span>
                    </span>
                </div>
                <span class="hide btn btn-down small w-240px h-60px bg-[#0dd299] rounded-4px text-20px ml-15px hover:bg-[#0fc993]"><a class="leading-60px text-white">下载全部</a></span>
              </div>
            </div>
            <div class="transfer-remember mt-23px text-center">
              <div class="checkbox checkbox-danger relative block mt-10px mb-10px">
                <label for="remember" class="text-12px font-normal text-[#999] min-h-20px pl-20px mb-0 inline-block max-w-[100%]">
                  <input v-model="checkbox" type="checkbox" name="remember" class="remember_pass cursor-pointer" :disabled="!changeFileFlag" :class="{'cursor-not-allowed' : !changeFileFlag }" />确保上传的文档不涉及版权问题及违法内容
                </label>
              </div>
            </div>
          </div>
          <div class="modal verifi-modal top-[20%!important]" d="verifiPayModal" tabindex="-1" role="dialog" aria-labelledby="verifiPayModal">
            <div class="modal-dialog verifi-dialog w-480px h-426px my-50px" role="document">
              <div class="modal-content relative bg-white rounded-6px border border-solid border-[rgba(0,0,0,0.2)] outline-0 bg-clip-padding ring-[rgba(0,0,0/50%)] ring-offseet-3px ring-9px md:ring-offset-5 md:ring-15px">
                <div class="">
                  <button id="verifi-close" type="button" class="close pompt_close py-5px px-10px outline-none" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">×</span>
                  </button>
                </div>
                <div class="verifi-content text-center pt-60px px-0 pb-35px">
                  <img src="http://cn-file.17pdf.com/website/converter/pic_trans_diomands.png"/>
                  <p>该功能为付费套餐专属</p>
                  <p>订阅解锁更多特权</p>
                  <a href="javascript:;" class="now_pricing" value="0"
                    >立即订阅</a
                  >
                </div>
              </div>
            </div>
          </div>
        </div>
  
        <div class="file_num w-[100%] h-120px text-center text-white leading-120px text-30px mb-76px">
          17PDF Reader，当前已转换了<span class="text-32px"> 1,859,726 </span> 个文件
        </div>
        <div id="more_type" class="pdf_converter clear w-[80%] my-0 mx-auto">
          <div class="package_type">
            <h3 class="text-24px text-[#333] font-normal mx-0 mt-0 mb-49px h-30px leading-30px">会员专享格式</h3>
            <ul class="flex justify-center w-[100%] min-w-340px p-0 mt-0 mb-10">
              <li>
                <a href=' /converter?type=docx'>
                  <img src="/converter/ic_pdf_word.png" />
                  <span>PDF To Word</span>
                </a>
              </li>
              <li>
                <a href=' /converter?type=pptx'>
                  <img src="/converter/ic_pdf_ppt.png"/>
                  <span>PDF to PowerPoint</span>
                </a>
              </li>
              <li>
                <a href=' /converter?type=xlsx'>
                  <img src="/converter/ic_pdf_execl.png"/>
                  <span>PDF to EXCEL</span>
                </a>
              </li>
              <li>
                <a href=' /converter?type=txt'>
                  <img src="/converter/ic_pdf_txt.png" />
                  <span>PDF to TXT</span>
                </a>
              </li>
              <li>
                <a href=' /converter?type=jpg'>
                  <img src="/converter/imagePDFtoJPG.png" />
                  <span>PDF to JPG</span>
                </a>
              </li>
              <li>
                <a href=' /converter?type=png'>
                  <img src="/converter/pngPDFtoPNG.png" />
                  <span>PDF to PNG</span>
                </a>
              </li>
            </ul>
          </div>
        </div>
  
        <div class="about_converter w-[100%] bg-[#fafafa] py-60px px-[10%] mt-102px">
          <h3 class="name text-24px text-[#333] font-normal mx-0 mt-0 mb-49px h-30px leading-30px">关于转档</h3>
          <ul class="clear p-0">
            <li>
              <img src="http://cn-file.17pdf.com/website/converter/ic_way.png" />
              <div class="content">
                <h3>如何转档</h3>
                <p>
                  进入“文件转换器”区域。点击下方“添加文件”选择添加本地目标文件，然后在“转为”栏选择转换目标格式，最后点击“开始转换”即可。
                </p>
              </div>
            </li>
            <li>
              <img
                src="http://cn-file.17pdf.com/website/converter/ic_quality.png"
              />
              <div class="content">
                <h3>领先品质</h3>
                <p>
                  行业领先的转换品质，经过转换的文件版面清晰、保持格式的一致，支持一键转档，批量转换，精准快速的文件格式转换，稳定的转换品质，是您处理转格式转换的首选。
                </p>
              </div>
            </li>
            <li>
              <img src="http://cn-file.17pdf.com/website/converter/ic_safe.png" />
              <div class="content">
                <h3>文件安全</h3>
                <p>
                  我们尊重每位用户的隐私信息和文件安全。转档后的文件仅在云端保留24小时，让您免去后顾之忧。
                </p>
              </div>
            </li>
            <li>
              <img src="http://cn-file.17pdf.com/website/converter/ic_more.png" />
              <div class="content">
                <h3>多平台支持</h3>
                <p>
                  文件格式转换器可以在所有计算机（Mac、Windows及Linux）上使用，也可下载App
                  17PDF Reader在移动端使用，让您在手机上也能轻松转档文件。
                </p>
              </div>
            </li>
          </ul>
        </div>
  
        <div class="converter_question px-[10%] pt-76px pb-60px text-center">
          <h3 class="name text-24px text-[#333] font-normal m-0 h-30px leading-30px text-left">常见问题</h3>
          <table class="w-[100%] p-0 bg-transparent">
            <tbody>
              <tr>
                <td>
                  <h3>1. 支持哪些格式转换？</h3>
                  <p>
                    <span></span>支持PDF to
                    Word、PPT、Excel、TXT、JPG/PNG无限次数转换
                  </p>
                </td>
                <td>
                  <h3>2. 为什么图片格式的文件转档效果不好？</h3>
                  <p>
                    如原文件为图片格式或者通过扫描文档保存为PDF文件的，转档后的文件可能无法选取文字进行高亮等编辑。
                  </p>
                </td>
              </tr>
              <tr>
                <td>
                  <h3>3. 文件转档后出现乱码？</h3>
                  <p>
                    如果是原文件就有乱码问题，先处理好文件再提交转档；如果原文件正常而转档后目标文件乱码，请联系我们处理。
                  </p>
                </td>
              </tr>
            </tbody>
          </table>
          <a class="more w-auto h-30px leading-30px text-[#666] inline-block text-center mx-auto mt-48px mb-0 link:no-underline hover:(!border-[#ff4f4f] text-[#ff4f4f])" href="/question#convert">更多问题请查看帮助</a>
        </div>
  
        <div class="download_code fixed right-14px bottom-50px bg-white w-134px py-12px px-0 rounded-6px text-center ">
          <span class="large text-16px inline-block w-[100%] my-6px mx-0">下载APP</span>
          <img src="http://cn-file.17pdf.com/website/download/android_code.png" class="w-110px border-0 align-middle inline-block" />
          <span class="inline-block w-[100%] text-14px my-6px mx-0">使用更便捷</span>
        </div>
      </div>
      <client-only>
        <el-dialog :visible.sync="visiable" :close-on-click-modal="true" :close-on-press-escape="false" width="480px" append-to-body center top="25vh">
          <div class="changepwd-tittle">
            <p class="text-20px text-center text-$btn-color-primary">提示</p>
          </div>
          <div class="text-16px text-[#707070] text-center my-30px">
            您还未登录或注册，请先
            <span class="text-$btn-color-primary cursor-pointer" @click="login">登录</span>
            或
            <span class="text-$btn-color-primary cursor-pointer" @click="register">注册</span>
          </div>
        </el-dialog>

        <el-dialog :visible.sync="noMia" width="480px" append-to-body center top = "25vh" >
          <div class="modal-content">
            <div class="less-tittle w-full h-64px leading-64px text-[20px] text-[#ff4f4f] text-center mt-[-50px] mb-30px">劵不足</div>
            <div class="less-content text-center mb-30px">
              <img src="~/assets/images/converter/pic.svg" class="mb-26px mx-auto">
              <p class="text-[14px] text-[#00000099]">您的券不足了，请尽快充值</p>
            </div>
            <div class="flex justify-center">
              <button class="block w-128px h-40px text-[16px] text-[#FF4F4F] leading-20px ml-0px mt-10px text-center border border-[#FF4F4F] border-solid rounded-4px" @click="changeNoMia">返回</button>
              <button class="block w-128px h-40px text-[16px] text-[#fff] bg-[#FF4F4F] leading-20px ml-50px mt-10px text-center border border-[#FF4F4F] border-solid rounded-4px" @click="handlSubmit($event, 'buy')">立即充值</button>
            </div>
          </div>
        </el-dialog>
      </client-only>
    </div>
</template>

<script>
import { mapState } from 'vuex'

export default {
    data() {
        return {
            fileList: [],
            uniqFileArr: [],
            checkbox: true,
            // 转档中,默认没在
            changeFileFlag: true,
            uploadNum: 0,
            uploadErrNum: 0,
            uploadSuccessNum: 0,
            getFileStatusTimer: null,
            changeSucesssNumTotal: 0,
            changeSucesssFileList: [],
            visiable: false,
            noMia:false,
            showInputDisable:false,
        };
    },
    middleware: "user",
    head() {
        return {
            title: "PDF转换器免费在线转档",
            meta: [
                {
                    hid: "description",
                    content: "17PDF Reader免费提供在线PDF格式转换文件转档服务，支持PDF转word,PDF转doc,PDF转PPT,PDF转png,PDF转html,PDF转epub,PDF转xls,psd转ai等。轻松拖曳，一键转档，批量转换，支持多种常用格式相互转档。先进的转换引擎，极速转换，精准度高达99.99%。",
                },
                {
                    name: "keywords",
                    content: "格式转换,文件转档,pdf convert,converter, word to pdf"
                }
            ]
        };
    },
    computed: {
        ...mapState([
            'token',
            "userInfo"
        ]),
        // 所需券数
        requiredCoupon() {
            let total = 0;
            for (let i = 0; i < this.fileList.length; i++) {
                total += this.fileList[i].price;
            }
            for (const file of this.fileList) {
                if (file.status === 6) {
                    total -= file.price;
                }
            }
            if (this.userInfo && this.userInfo.subscriberType === 1) {
                total = 0;
            }
            return total;
        }
    },
    mounted() {
        if (localStorage.getItem("file") !== null) {
            this.fileList = JSON.parse(localStorage.getItem("file"));
            this.changeSucesssFileList = JSON.parse(localStorage.getItem("file"));
        }
    },
    methods: {
        getUserInfo() {
          this.$axios.get('members/getMemberInfo').then((res)=> {
            if(res.code === 200) {
              this.$store.commit('setUser',res.result.memberInfo)
            }
          })
        },
        handlSubmit(event, type) {
            if (!this.$store.state.token) {
              event.preventDefault();
              this.visiable = true;
              this.showInputDisable = true
              return;
            }
            if (type === "buy") {
              this.noMia = false
              this.handlerBuy("ticket");
            }
            else if (type === "change") {
              this.createFileMission();
            }
            // this.$store.commit('OPEN_LOGIN', true)
            // this.$store.commit('SET_INTERFACE', 'vip')
        },
        login() {
            this.visiable = false;
            this.showInputDisable = false;
            this.$store.commit("OPEN_LOGIN", true);
            this.$store.commit("SET_INTERFACE", "login");
        },
        register() {
            this.visiable = false;
            this.showInputDisable = false;
            this.$store.commit("OPEN_LOGIN", true);
            this.$store.commit("SET_INTERFACE", "register");
        },
        // 充值弹框
        handlerBuy(type) {
            this.$store.commit("OPEN_LOGIN", true);
            this.$store.commit("SET_INTERFACE", type);
        },
        //拖拽事件
        handleEvent(event) {
          // 阻止事件的默认行为
          event.preventDefault();
          if (event.type === 'drop') {
            // 文件进入并松开鼠标,文件边框恢复正常
            this.$refs.drag.style.background = '#fff'
            this.$refs.drag.style.border = "thin dashed #d1d1d1"
            if (!this.$store.state.token) {
              event.preventDefault();
              this.visiable = true;
              return;
            }
            if( !this.changeFileFlag ){
              return;
            }
            //传递拖拽的文件,限制只能传pdf文件
            let dropFile = event.dataTransfer.files
            let newArr= [];
            for(var item of dropFile){
              if(item.type.indexOf('pdf') !== -1){
                newArr.push(item);
              }
            }
            dropFile = newArr
            this.addFile(dropFile)
          } else if (event.type === 'dragleave') {
            // 离开时
            this.$refs.drag.style.background = '#fff'
            this.$refs.drag.style.border = "thin dashed #d1d1d1"
          } else {
            // 进入时
            this.$refs.drag.style.background = '#f0f0f0'
            this.$refs.drag.style.border = "3px dashed #d1d1d1"            
          }
        },
        // 添加文件
        async addFile(event) {
            let array = {} 
            if(event.target){
              array = event.target.files
            }else{
              array = event
            }
            //获取用户选择要转的格式
            const urlObj = new URL(document.URL);
            let [a] = urlObj.searchParams.values();
            if(a != "docx" && a != "pptx" && a != "xlsx" && a != "txt" && a != "jpg" && a != "png"){
              a = "docx"
            }
            const defaultPrice = await this.getFilePrice("pdf", a);
            for (let i = 0; i < array.length; i++) {
                const id = Date.now() + Math.random().toString(36).slice(-8)
                const fileObj = {
                    name: array[i].name,
                    size: array[i].size,
                    price: defaultPrice,
                    input: "pdf",
                    output: a,
                    status: 0,
                    id: id
                };
                array[i].output = a
                array[i].id = id
                this.fileList.push(fileObj);
                this.uniqFileArr.push(array[i]);
            }
            // this.fileList,this.uniqFileArr数组去重
            let newArr= [];
            let arrName = [];
            let arrStatus = []
            for(var item of this.fileList){
              if(arrName.indexOf(item['name']) == -1 || arrStatus.indexOf(item['status']) == -1){
              // if(arrName.indexOf(item['name']) == -1){
                arrName.push(item['name']);
                arrStatus.push(item['status'])
                newArr.push(item);
              }else if(item['status'] === 6){
                newArr.push(item);
              }
            }
            this.fileList=newArr
            newArr=[]
            arrName=[]
            arrStatus = []
            for(var item of this.uniqFileArr){
              if(arrName.indexOf(item['name']) == -1 || arrStatus.indexOf(item['status']) == -1){
                arrName.push(item['name']);
                arrStatus.push(item['status'])
                newArr.push(item);
              }
            }
            this.uniqFileArr=newArr           
            if(event.target){
              event.target.value=''
            }
        },
        // 查询文件所需券数
        async getFilePrice(input, output) {
            let price = 0;
            await this.$axios.get(`/convertType/getConvertTypeList?input=${input}&output=${output}`).then((res) => {
                if (res.code === 200) {
                    price = res.result[0].price;
                }
            });
            return price;
        },
        // 改变要转换的格式
        async changeOutput(item, index) {
            const price = await this.getFilePrice(item.input, item.output);
            this.$set(this.fileList[index], "price", price);
            this.$set(this.fileList[index], "output", item.output);
            for(let i=0;i<this.uniqFileArr.length;i++){
              if(item.id === this.uniqFileArr[i].id){
                this.$set(this.uniqFileArr[i], "output", item.output);
              }
            }
        },
        // 计算文件大小函数(保留两位小数),Size为字节大小
        getfilesize(size) {
            if (!size)
                return "";
            const num = 1024; // byte
            if (size < num) {
                return size + "B";
            }
            if (size < Math.pow(num, 2)) {
                return (size / num).toFixed(2) + "K";
            }
            if (size < Math.pow(num, 3)) {
                return (size / Math.pow(num, 2)).toFixed(2) + "M";
            }
            if (size < Math.pow(num, 4)) {
                return (size / Math.pow(num, 3)).toFixed(2) + "G";
            }
            else {
                return (size / Math.pow(num, 4)).toFixed(2) + "T";
            }
        },
        // 删除文件
        deleteFile(index, item) {
          for(let i=0;i<this.uniqFileArr.length;i++){
            if(item.id === this.uniqFileArr[i].id){
              this.uniqFileArr.splice(i,1)
            }
          }
          this.fileList.splice(index, 1);
            this.changeSucesssFileList = [];
            localStorage.removeItem("file");
            this.fileList.forEach(item => {
                if (item.status === 6) {
                    this.changeSucesssFileList.push(item);
                }
            });
            localStorage.setItem("file", JSON.stringify(this.changeSucesssFileList));
        },
        // 清空
        deleteAllFile() {
            this.fileList = [];
            this.uniqFileArr = [];
            this.changeFileStatus("all", 5);
            this.changeSucesssFileList = [];        
            localStorage.removeItem("file");
            this.showFileBig = false
        },
        // 修改文件状态
        changeFileStatus(fileName, status,outputType) {
            if (fileName === "all") {
                this.fileList.forEach(item => {
                  if (item.status !== 6) {
                    this.$set(item, "status", status);
                  }
                });
            } else {
                this.fileList.forEach(item => {
                    if (item.name === fileName && item.output === outputType && item.status !=6) {
                      this.$set(item, "status", status);
                    }
                });
            }
        },
        // 文件状态: 0未转换，1上传中，2上传完成，3转换中，4转换成功，5转换失败，6已转档
        fileStatus(item, index) {
            switch (item.status) {
                case 0:
                    this.$set(this.fileList[index], "status", 0);
                    return "未转换";
                case 1:
                    this.$set(this.fileList[index], "status", 1);
                    return "上传中...";
                case 2:
                    this.$set(this.fileList[index], "status", 2);
                    return "<span style=\"color: #666666\">上传完成</span>";
                case 3:
                    this.$set(this.fileList[index], "status", 3);
                    return "<span style=\"color: #FEA92D\">转换中</span>";
                case 4:
                    this.$set(this.fileList[index], "status", 4);
                    return "<span style=\"color: orange\">转换成功</span>";
                case 5:
                    this.$set(this.fileList[index], "status", 5);
                    return "<span style=\"color: red\">转换失败</span>";
                case 6:
                    this.$set(this.fileList[index], "status", 6);
                    return `<a href="${item.path}" style="color: #0dd299">下载</a>`;
            }
        },
        // 转档第一步，根据文件列表创建任务和插入文件信息
        createFileMission() {
            // if (this.fileList.length === 0) return
            const points = this.userInfo.points;
            if (this.requiredCoupon > points) {
                // alert("券数不足，请充值");
                this.noMia = true
                return;
            }
            const filterFileList = this.fileList.filter(function (item) {
                return item.status !== 6;
            });
            let fileArr = [];
            
            for (let i = 0; i < filterFileList.length; i++) {
                const file = {};
                file.sourceType = 0;
                file.size = filterFileList[i].size;
                file.input = "pdf";
                file.output = filterFileList[i].output;
                file.filename = filterFileList[i].name;
                fileArr[i] = file;
            }
            if(fileArr.length === 0){
              return;
            }
            fileArr = JSON.stringify(fileArr);
            this.changeFileFlag = false;
            this.changeFileStatus("all", 1);
            const config = {
                method: "post",
                url: "/mission/create",
                headers: {
                    "Accept": "*/*",
                    "Content-Type": "application/json"
                },
                data: fileArr
            };
            this.$axios("/mission/create", config).then((res) => {
                if (res.code === 200) {
                    const missionFiles = res.result.missionFilePoJos;
                    for (let i = 0; i < missionFiles.length; i++) {
                        this.changeFileStatus(missionFiles[i].fileName, 1, missionFiles[i].outputType);
                        this.uploadFile(this.uniqFileArr[i], missionFiles[i].id, res.result.id);
                    }
                }
                else {
                    this.changeFileFlag = true;
                    this.changeFileStatus("all", 5);
                }
            });
        },       
        // 转档第二步，上传文件download="${item.name}"
        uploadFile(file, id, missionId) {
            this.uploadNum = 0;
            this.uploadSuccessNum = 0
            this.uploadErrNum = 0
            const formData = new FormData();
            formData.append("file", file);
            formData.append("missionFileId", id);
            const config = {
                headers: {
                    "Content-Type": "multipart/form-data;boundary = " + new Date().getTime()
                }
            };
            this.$axios.post("/missionFile/upload", formData, config).then((res) => {
                if (res.code === 200) {
                    this.changeFileStatus(file.name, 2,file.output);
                    this.uploadNum++;
                    this.uploadSuccessNum++;
                    if (this.uploadNum === this.uniqFileArr.length) {
                        this.convertFile(file.name, missionId);
                    }
                    let uploadAllNum = this.uploadErrNum + this.uploadSuccessNum
                    if(uploadAllNum === this.uniqFileArr.length && this.uploadErrNum > 0){
                      this.changeFileFlag = true;
                      this.changeFileStatus("all", 5);
                    }
                }
                else {
                    this.uploadErrNum++;
                    let uploadAllNum = this.uploadErrNum + this.uploadSuccessNum
                    if(uploadAllNum === this.uniqFileArr.length){
                      this.changeFileFlag = true;
                      this.changeFileStatus("all", 5);
                    }
                }
            });
        },
        // 转档第三步，开始转档
        convertFile(file, missionId) {          
            const formData = new FormData();
            formData.append("missionId", missionId);
            const config = {
                headers: {
                    "Content-Type": "multipart/form-data;boundary = " + new Date().getTime()
                }
            };
            this.$axios.post("/mission/convertFile", formData, config).then((res) => {
                if (res.code === 200) {
                    this.changeFileStatus("all", 3);
                    this.getFileStatusTimer = window.setInterval(() => {
                        setTimeout(this.getFileStatus(formData, config), 0);
                    }, 5000);
                }
                else {
                    this.uploadNum = 0;
                    this.changeFileStatus("all", 5);
                    this.changeFileFlag = true;
                }
            });
        },
        // 转档最后一步，轮询文件状态和下载链接
        getFileStatus(formData, config) {
            this.$axios.post("/mission/queryFileStatus", formData, config).then((res) => {
                if (res.code === 200) {
                    // 转档文件列表
                    const getFileList = res.result[0].missionFilePoJos;
                    // 转档成功与失败的数量
                    let changeSucesssNum = 0;
                    let changeErrNum = 0;
                    for (let i = 0; i < getFileList.length; i++) {
                        if (getFileList[i].status === 2) {
                            this.changeFileStatus(getFileList[i].fileName, 4, getFileList[i].targetType);
                            this.fileList.forEach(item => {
                                //获取输出的目标文件名
                                let name = item.name
                                let num= name.lastIndexOf("pdf")
                                const outFilename = name.slice(0,num)+item.output
                                if (outFilename === getFileList[i].outFilename) {
                                    this.changeFileStatus(getFileList[i].fileName, 6, getFileList[i].targetType);
                                    this.$set(item, "path", getFileList[i].path);
                                    // 对相同文件名与相同转换后文件进行去重
                                    this.changeSucesssFileList.forEach((iten,index)=>{
                                      if(iten.id.indexOf(item.id) !== -1){
                                        this.changeSucesssFileList.splice(index,1)                                      
                                      }
                                    })
                                    this.changeSucesssFileList.push(item);
                                }
                            });
                            changeSucesssNum++;
                        }
                        else if (getFileList[i].status === 3) {
                            this.changeFileStatus(getFileList[i].fileName, 5, getFileList[i].targetType);
                            changeErrNum++;
                        }                        
                    }
                    let changeAllNum = changeSucesssNum + changeErrNum
                    if (changeAllNum === getFileList.length) {
                        clearInterval(this.getFileStatusTimer);
                        this.getFileStatusTimer = null;
                        this.changeSucesssNumTotal += changeSucesssNum;
                        let failedFileList = getFileList.filter((val) => val.status === 3);
                        let failedFileNameArr = failedFileList.map(val => val.fileName);
                        let result = [];
                        for (let i = 0; i < failedFileNameArr.length; i++) {
                            this.uniqFileArr.forEach(item => {
                                if (item.name === failedFileNameArr[i]) {
                                    result.unshift(item);
                                }
                            });
                        }
                        this.uniqFileArr = result;
                        this.getUserInfo()
                        this.uploadNum = 0;
                        this.changeFileFlag = true;
                    }
                    localStorage.setItem("file", JSON.stringify(this.changeSucesssFileList));
                }
                else {
                    this.changeFileStatus("all", 5);
                    // 多失败就关闭查询
                    clearInterval(this.getFileStatusTimer);
                    this.uploadNum = 0;
                    this.changeFileFlag = true;
                }
            });
        },
        //改变劵不足弹出框
        changeNoMia(){
          this.noMia = false
        }
    },
    watch: {
      token(newValue){
        if(newValue){
          this.showInputDisable = false;
        }
      }
    }
}
</script>

<style lang="scss" scoped>
::v-deep body {
  min-width: 1200px !important;
}
::v-deep .el-dialog {
  border-radius: 10px;
  box-shadow: 0 5px 15px rgb(0, 0 ,0 ,.5)
}
.page-converter {
  .date-tips {
    background: linear-gradient(0deg, #fff2f6, #fff2f6),
      linear-gradient(90deg, snow 10.37%, rgba(255, 243, 243, 0) 91.75%),
      linear-gradient(90deg, #fff2f6 2.26%, rgba(255, 242, 246, 0.21) 101.41%);
    .text-container {
      display: flex;
      align-items: center;
      margin-left: 16px;
      img {
        margin-left: 8px;
      }
    }
    span {
      font-size: 14px;
      line-height: 24px;
      vertical-align: middle;
    }
    .text {
      display: inline-flex;
      align-items: center;
    }
    .tip {
      position: relative;
      font-size: 0;
      .tip-text {
        display: none;
        position: absolute;
        left: -3px;
        width: 258px;
        padding: 15px 14px 10px 10px;
        background: url('http://cn-file.17pdf.com/website/members/ic_tip.svg')
          left top no-repeat;
        background-size: auto 100%;
        font-size: 12px;
        line-height: 18px;
        color: #fff;
        border-radius: 4px;
      }
      &:hover .tip-text {
        display: block;
      }
    }
  }
  .transfer-container {
    .hide {
      display: none !important;
    }
    button {
      padding-right: 7px;
    }
    .close {
      float: right;
      font-size: 21px;
      font-weight: bold;
      line-height: 1;
      color: #000;
      text-shadow: 0 1px 0 #fff;
      opacity: 0.2;
      filter: alpha(opacity=20);
    }
    button.close {
      padding: 0;
      cursor: pointer;
      background: transparent;
      border: 0;
      -webkit-appearance: none;
    }
    button:focus {
      outline: none;
    }
    .close:hover,
    .close:focus {
      color: #000;
      text-decoration: none;
      cursor: pointer;
      opacity: 0.5;
      filter: alpha(opacity=50);
    }
    .recharge .recharge-btn:hover a {
      color: #fff;
    }
    .transfer-btn .loading {
      display: inline-block;
      border: 3px solid #fff;
      border-bottom: 3px solid #cccccc;
      height: 35px;
      width: 35px;
      border-radius: 50%;
      position: relative;
      top: 10px;
      left: 100px;
      -webkit-animation: loading 1s infinite linear;
      -moz-animation: loading 1s infinite linear;
      -o-animation: loading 1s infinite linear;
      animation: loading 1s infinite linear;
    }
  }
  .table>caption+thead>tr:first-child>th, .table>caption+thead>tr:first-child>td, .table>colgroup+thead>tr:first-child>th, .table>colgroup+thead>tr:first-child>td, .table>thead:first-child>tr:first-child>th, .table>thead:first-child>tr:first-child>td {
    border-top: 0;
  }
  .file-drop-zone .table thead tr th {
    color: #666666;
    text-align: center;
  }
  .table>thead>tr>th {
    vertical-align: bottom;
    border-bottom: 2px solid #ddd;
  }
  .table>thead>tr>th, .table>thead>tr>td, .table>tbody>tr>th, .table>tbody>tr>td, .table>tfoot>tr>th, .table>tfoot>tr>td {
    padding: 8px;
    line-height: 1.428571429;
    vertical-align: top;
    border-top: 1px solid #ddd;
  }
  .table th, .table td {
    vertical-align: middle;
    box-sizing: border-box;
  }
  th {
    text-align: left;
  }
  td, th {
    padding: 0;
  }
  .input-group-btn {
    position: relative;
    font-size: 0;
    white-space: nowrap;
  }
  .input-group-addon, .input-group-btn {
    white-space: nowrap;
    vertical-align: middle;
  }
  .input-group-addon, .input-group-btn, .input-group .form-control {
    display: table-cell;
  }
  .clearfix:before, .clearfix:after {
    content: " ";
    display: table;
  }
  .input-group-btn:last-child>.btn, .input-group-btn:last-child>.btn-group {
    z-index: 2;
    margin-left: -1px;
  }
  .input-group-btn:first-child>.btn, .input-group-btn:first-child>.btn-group {
    margin-right: -1px;
  }

  .input-group .form-control:last-child, .input-group-addon:last-child, .input-group-btn:last-child>.btn, .input-group-btn:last-child>.btn-group>.btn, .input-group-btn:last-child>.dropdown-toggle, .input-group-btn:first-child>.btn:not(:first-child), .input-group-btn:first-child>.btn-group:not(:first-child)>.btn {
    border-bottom-left-radius: 0;
    border-top-left-radius: 0;
  }
  .input-group .form-control:first-child, .input-group-addon:first-child, .input-group-btn:first-child>.btn, .input-group-btn:first-child>.btn-group>.btn, .input-group-btn:first-child>.dropdown-toggle, .input-group-btn:last-child>.btn:not(:last-child):not(.dropdown-toggle), .input-group-btn:last-child>.btn-group:not(:last-child)>.btn {
    border-bottom-right-radius: 0;
    border-top-right-radius: 0;
  }
  .input-group-btn>.btn {
    position: relative;
  }
  .btn.disabled, .btn[disabled], fieldset[disabled] .btn {
    cursor: not-allowed;
    opacity: 0.65;
    filter: alpha(opacity=65);
    -webkit-box-shadow: none;
    box-shadow: none;
  }
  .btn-file {
    position: relative;
    overflow: hidden;
    margin: 0;
    top: 170px;
    left: 50%;
    margin-left: -45px !important;
    outline: none;
    cursor: pointer;
  }
  .btn {
    display: inline-block;
    margin-bottom: 0;
    font-weight: normal;
    text-align: center;
    vertical-align: middle;
    touch-action: manipulation;
    cursor: pointer;
    background-image: none;
    border: 1px solid transparent;
    white-space: nowrap;
    border-radius: 4px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }
  .btn-file .add-file {
    background: url(http://cn-file.17pdf.com/website/fileinput/ic_file_add.png) no-repeat;
    width: 90px;
    height: 100px;
  }
  .btn-file .add-file-left {
    background: url(http://cn-file.17pdf.com/website/fileinput/ic_add.png) no-repeat;
    width: 120px;
    height: 30px;
    margin-top: 10px;
    margin-left: 10px;
    padding-left: 38px;
    font-size: 16px;
    line-height: 30px;
    color: #666666;
  }
  .btn-file-left {
    position: relative;
    top: 0px;
    left: 20px;
  }
  .transfer-container .transfer-remember .checkbox input[type="checkbox"] {
    top: 3px;
  }
  .radio input[type="radio"], .radio-inline input[type="radio"], .checkbox input[type="checkbox"], .checkbox-inline input[type="checkbox"] {
    position: absolute;
    margin-left: -20px;
  }

  input[type="radio"], input[type="checkbox"] {
    margin: 4px 0 0;
    line-height: normal;
  }
  .modal {
    display: none;
    overflow: hidden;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1050;
    -webkit-overflow-scrolling: touch;
    outline: 0;
  }
  .file-drop-zone .table tbody tr:hover td {
    background: #dfdfdf;
  }
  .file-drop-zone .table tbody tr td {
    border-top: 0px;
  }
  .theme-explorer .explorer-frame td {
    vertical-align: middle;
    text-align: center;
  }
  .file-drop-zone .table tbody tr:hover td .transfer-select {
    border-color: #ff4f4f;
    background: url(http://cn-file.17pdf.com/website/converter/ic_trans_xiala_hover.png) no-repeat 72px 6px;
  }
  .file-drop-zone .table tbody tr .transfer-select {
    width: 100%;
    height: 22px;
    border: 1px solid #dadada;
    padding: 0px;
    outline: none;
    font-size: 14px;
    color: #ff4f4f;
    line-height: 22px;
    // padding-left: 30px;
    border-radius: 2px;
    background: url(http://cn-file.17pdf.com/website/converter/ic_trans_xiala_nor.png) no-repeat 72px 6px;
  }
  .theme-explorer .file-actions-cell .file-actions .file-footer-buttons .pdf-removeicon:before {
    content: url(https://cn-file.17pdf.com/website/converter/ic_delet_red.png) !important;
    display: none;
  }
  .file-drop-zone .table tbody tr:hover td .file-actions .file-footer-buttons .pdf-removeicon:before {
    display: block;
  }
  .btn.disabledBtn {
    background-color: rgb(204, 204, 204);
    pointer-events: none;
  }

  .file_num {
    background: url(http://cn-file.17pdf.com/website/converter/pic_account_bg.png) repeat -10px 0px;
  }
  .clear {
    zoom: 1;
  }
  .clear:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
  }
  .pdf_converter .package_type h3:before,
  .about_converter .name:before,
  .converter_question .name:before {
    content: '';
    display: inline-block;
    width: 5px;
    height: 22px;
    background: #ff4f4f;
    margin-right: 10px;
    margin-top: 4px;
    vertical-align: top;
  }
  .pdf_converter .package_type ul li {
    width: 120px;
    list-style: none;
    text-align: center;
    margin-right: 30px;
    cursor: pointer;
    a {
      display: block;
      font-size: 14px;
      color: #333333;
      img {
        display: inline-block;
        width: 80px;
        height: 80px;
        margin-bottom: 20px;
        vertical-align: middle;
      }
      span {
        display: block;
        white-space: nowrap;
        transition: all .5s;
      }
      &:hover{
        img {
          box-shadow: 0px 0px 6px rgb(255 79 79 / 25%);
        }
        span {
          color: #ff4f4f;
        }
      }
    }
  }
  .about_converter ul li {
    width: 50%;
    float: left;
    list-style: none;
    margin-bottom: 85px;
    img {
      width: 70px;
      height: 70px;
      float: left;
      margin: 10px 36px 0px 0px;
    }
    .content {
      width: 330px;
      float: left;
      h3 {
        font-size: 20px;
        color: #333333;
        margin: 0px 0px 10px;
        font-weight: normal;
      }
      p {
        font-size: 16px;
        color: #4c4c4c;
        margin: 0px !important;
      }
    }
  }
  table {
    border-collapse: collapse;
    border-spacing: 0;
  }
  .converter_question table td {
    width: 50%;
    vertical-align: top;
    h3 {
      font-size: 18px;
      color: #333333;
      margin: 54px 0px 14px;
      font-weight: normal;
      text-align: left;
    }
    p {
      width: 75%;
      font-size: 16px;
      color: #4c4c4c;
      text-align: left;
      span {
        width: 8px;
        height: 8px;
        display: inline-block;
        border-radius: 100%;
        background: #333333;
        margin-right: 12px;
        margin-left: 4px;
      }
    }
  }
  .converter_question .more {
    border-bottom: 1px solid #999999;
  }
  .download_code {
    box-shadow: 0px 1px 5px rgb(0 0 0 / 12%);
  }
  .file-details-cell.state img {
    display: inline-block;
    cursor: pointer;
  }
}
</style>