<template>
  <div class="attachment-wrapper">
    <el-tabs v-model="activeTab" @tab-click="clickTab">
      <el-tab-pane
        v-for="item in $d.Common_File_Type"
        :key="item.value"
        :label="item.label"
        :name="String(item.value)"
      >
        <UploadTemplate
          v-if="activeTab === '1' && item.value == activeTab"
          @PreviewFile="PreviewFile"
        />
        <ExportTemplate
          v-if="activeTab === '2' && item.value == activeTab"
          @PreviewFile="PreviewFile"
        />
        <EmailTemplate v-if="activeTab === '3' && item.value == activeTab" />
        <CommonTemplate v-if="activeTab === '4' && item.value == activeTab" />
        <SignatureTemplate
          v-if="activeTab === '5' && item.value == activeTab"
        />
      </el-tab-pane>
    </el-tabs>
    <!-- 预览 -->
    <el-dialog
      v-if="Preview.visible"
      :visible.sync="Preview.visible"
      :close-on-click-modal="false"
      :fullscreen="true"
      :title="Preview.title"
      width="600px"
      custom-class="base-dialog-wrapper"
    >
      <vue-office-docx
        v-if="docxTypes.includes(Preview.type)"
        :src="Preview.path"
        style="height: calc(100vh - 70px)"
        @rendered="renderedHandler"
        @error="errorHandler"
      />
      <vue-office-excel
        v-else-if="excelTypes.includes(Preview.type)"
        :src="Preview.path"
        :options="options"
        style="height: calc(100vh - 70px)"
        @rendered="renderedHandler"
        @error="errorHandler"
      />
      <PreviewFile v-else :file-path="Preview.path" :file-type="Preview.type" />
    </el-dialog>
  </div>
</template>
<script>
import UploadTemplate from './components/UploadTemplate'
import ExportTemplate from './components/ExportTemplate'
import EmailTemplate from './components/EmailTemplate'
import CommonTemplate from './components/CommonTemplate'
import SignatureTemplate from './components/SignatureTemplate'
import VueOfficeDocx from '@vue-office/docx'
import '@vue-office/docx/lib/index.css'
import VueOfficeExcel from '@vue-office/excel'
import '@vue-office/excel/lib/index.css'
import PreviewFile from '@/components/PreviewFile/index'
export default {
  name: 'Attachment',
  components: {
    UploadTemplate,
    ExportTemplate,
    EmailTemplate,
    CommonTemplate,
    SignatureTemplate,
    VueOfficeDocx,
    VueOfficeExcel,
    PreviewFile,
  },
  data() {
    return {
      activeTab: null,
      Preview: {
        visible: false,
        title: '',
        type: null,
        path: null,
      },
      excelTypes: ['xlsx', 'xls'],
      docxTypes: ['docx', 'doc'],
      options: {
        xls: false, //预览xlsx文件设为false；预览xls文件设为true
        minColLength: 0, // excel最少渲染多少列，如果想实现xlsx文件内容有几列，就渲染几列，可以将此值设置为0.
        minRowLength: 0, // excel最少渲染多少行，如果想实现根据xlsx实际函数渲染，可以将此值设置为0.
        widthOffset: 10, //如果渲染出来的结果感觉单元格宽度不够，可以在默认渲染的列表宽度上再加 Npx宽
        heightOffset: 10, //在默认渲染的列表高度上再加 Npx高
        beforeTransformData: (workbookData) => {
          return workbookData
        }, //底层通过exceljs获取excel文件内容，通过该钩子函数，可以对获取的excel文件内容进行修改，比如某个单元格的数据显示不正确，可以在此自行修改每个单元格的value值。
        transformData: (workbookData) => {
          return workbookData
        }, //将获取到的excel数据进行处理之后且渲染到页面之前，可通过transformData对即将渲染的数据及样式进行修改，此时每个单元格的text值就是即将渲染到页面上的内容
      },
    }
  },
  mounted() {
    if (this.$route.query.tabActive) {
      this.activeTab = this.$route.query.tabActive
    } else {
      this.activeTab = String(this.$d.Common_File_Type[0].value)
    }
  },
  methods: {
    clickTab(tab, event) {
      this.$router.push({
        path: `/dictionary/attachment?tabActive=${tab.name}`,
      })
    },
    PreviewFile(data) {
      if (!data.path) return false
      let type = data.path
        .substring(data.path.lastIndexOf('.') + 1)
        .toLocaleLowerCase()
      this.Preview.path = data.path
      this.Preview.type = type
      this.Preview.title = data.name
      if (this.excelTypes.includes(type)) {
        this.options.xls = type === 'xls'
      }
      this.Preview.visible = true
    },
    renderedHandler() {
      console.log('渲染完成')
    },
    errorHandler() {
      console.log('渲染失败')
    },
  },
}
</script>
<style lang="scss">
.attachment-wrapper {
  .el-tabs {
    height: 100%;
    display: flex;
    flex-direction: column;
  }
  .el-tabs__header {
    height: 40px;
    margin-bottom: 5px;
  }
  .el-tabs__content {
    flex: 1;
    .el-tab-pane {
      height: 100%;
    }
  }
}
</style>

