<template>
  <div>
    <easy-data-list ref="EasyDataList" :dataSourceName="dataSourceName" :formProps="formProps" :tableProps="{operateFixed: 'right', operateWidth: 280}">
      <template v-slot:extra>
        <el-upload :file-list="fileList" :http-request="handlerImport" :limit="1" :multiple="false"
                   :show-file-list="false" action="" style="display: inline-block;margin: 0px 10px">
          <el-button :loading="operLoading" icon="el-icon-upload2" plain size="mini" type="primary">导入</el-button>
        </el-upload>
      </template>
      <template #tableSlot="{ row }">
        <div class="operation" data-width="180">
          <el-button size="mini" type="text" @click="handlerEdit(row)">编辑</el-button>
          <el-divider direction='vertical'/>
          <el-button size="mini" type="text" @click="handlerDesigner(row)">定义</el-button>
          <el-divider direction='vertical'/>
          <el-button size="mini" type="text" @click="handlerPreview(row)">预览</el-button>
          <el-divider direction='vertical'/>
          <el-dropdown trigger="click">
            <span class="el-dropdown-link">
                更多<i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item @click.native="handlerCopy(row)">复制</el-dropdown-item>
              <el-dropdown-item @click.native="handlerExport(row)">导出</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
          <el-divider direction='vertical'/>
          <el-popconfirm title="确定删除数据吗？" @confirm="handlerDelete(row.id)">
            <el-button slot="reference" size="mini" style="color: red" type="text">删除</el-button>
          </el-popconfirm>
        </div>
      </template>
    </easy-data-list>
    <DefineModal ref="DefineModal"></DefineModal>
    <TemplatePreview ref="TemplatePreview" :title="previewTitle"></TemplatePreview>
  </div>
</template>

<script>
import DefineModal     from "./components/DefineModal";
import TemplatePreview from "./components/TemplatePreview";

export default {
  name: "TemplateList",
  components: {DefineModal, TemplatePreview},
  data() {
    return {
      dataSourceName: 'easy_template_info',
      actionProps: {showAddBtn: true, showExportBtn: false},
      previewTitle: '',
      fileList: [],
      operLoading: false,
      url: {
        copyTemplate: "/easydata/template/copyTemplate",
        exportTemplate: '/easydata/template/exportTemplate',
        importTemplate: '/easydata/template/importTemplate'
      }
    }
  },
  methods: {
    handlerPreview(record) {
      this.previewTitle = record.keyInfoObject.template_name + ' -预览'
      this.$refs.TemplatePreview.showModal(record.id)
    },
    handlerDesigner(record) {
      this.$refs.DefineModal.showModal(record)
    },
    handlerEdit(record) {
      this.$refs.EasyDataList.handlerEdit(record)
    },
    handlerDelete(record) {
      this.$refs.EasyDataList.handlerDelete(record)
    },
    handlerCopy(record) {
      this.$EdFrame.getAction(this.url.copyTemplate, {templateId: record.id}).then(res => {
        if (res && res.success) {
          this.$message.success(res.msg)
          this.$refs.EasyDataList.searchQuery()
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    handlerExport(record) {
      this.$EdFrame.getAction(this.url.exportTemplate, {templateId: record.id}).then((resp) => {
        if (resp.success) {
          let blob = new Blob([JSON.stringify(resp.data)], {
            type: 'text/plain'
          })
          console.log(blob)
          let fileName = record.keyInfoObject.template_name + '.tex'
          if (window.navigator.msSaveOrOpenBlob) {
            navigator.msSaveBlob(blob, fileName)
          } else {
            var link = document.createElement('a')
            link.href = window.URL.createObjectURL(blob)
            link.download = fileName
            link.click()
            //释放内存
            window.URL.revokeObjectURL(link.href)
          }
        }
      }).finally(() => {
        this.$refs.EasyDataList.initLoading = false
      })
    },
    handlerImport(param) {
      let reader = new FileReader(); //新建一个FileReader
      reader.readAsText(param.file, "UTF-8"); //读取文件
      reader.onload = (evt) => { //读取完文件之后会回来这里
        this.operLoading = true;
        let fileString = evt.target.result; // 读取文件内容
        this.$EdFrame.postAction(this.url.importTemplate, fileString).then((resp) => {
          this.$message.success(resp.data || "操作成功!")
          this.fileList = []
          this.loadData()
        }).finally(() => {
          this.operLoading = false;
        })
      }
    }
  }
}
</script>
