<template>
  <div class="home" >
    <el-button type="primary" size="small" @click="dialogVisibleOne = true" style="background: #FA8E00; border: none;">创建模板</el-button>
<!--    <el-button type="primary" size="small" @click="uploadTemplate">上传模板</el-button>-->
    <el-table
      :data="contractsList"
      style="width: 100%" class="mt-3">
      <el-table-column
        prop="label"
        label="模板名称">
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button @click="handleClick(scope.row)" type="text" size="small">编辑</el-button>
          <el-button @click="exportContent(scope.row)" type="text" size="small">导出</el-button>
          <el-button @click="deleteContent(scope.row)" type="text" size="small" >删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-drawer
      title="创建模板"
      :visible.sync="dialogVisibleOne" size="100%"
      direction="rtl"
      :before-close="handleClose">
      <div class="mx-2">
        <el-input type="text" v-model="fileName" placeholder="文件名称"></el-input>
        <UEditor
          :options="options"
          :policyContent="editorContent"
          v-on:editorContentValue="editorContentValue"
          v-bind:ShopData="editorContent1"
          :key="editorContent1" class="mt-2"
        ></UEditor>
        <el-button type="primary" size="small" @click="uploadTemplate">保存</el-button>
        <el-button type="primary" size="small" @click="dialogVisibleOne = false">返回</el-button>

      </div>
    </el-drawer>
    <el-drawer
        title="模板内容"
        :visible.sync="dialogVisible" size="100%"
        direction="rtl"
        :before-close="handleClose">
      <div class="mx-2">
        <UEditor
          :options="options"
          :policyContent="editorContent"
          v-on:editorContentValue="editorContentValue"
          v-bind:ShopData="editorContent1"
          :key="editorContent1" class="mt-2"
        ></UEditor>
        <el-button type="primary" size="small" @click="uploadTemplate">保存</el-button>
        <el-button type="primary" size="small" @click="dialogVisible = false">返回</el-button>

      </div>
    </el-drawer>
    <contractTemplate id="question_doc" :data="{}" v-show="false"></contractTemplate>
  </div>
</template>

<script>
import { saveAs } from 'file-saver';
import htmlDocx from 'html-docx-js/dist/html-docx';
import contractTemplate from "../../components/contractTemplate/contractTemplate.vue";
import UEditor from '../../components/editor/editor.vue'
import {httpGet, httpGet2, httpPost} from "../../api";

export default {
  name: "contractExportTemplate",
  data() {
    return {
      dialogVisibleOne:false,
      fileName:'',
      dialogVisible:false,
      contractsList:[],
      CompanyProfile:'',
      editorContent: "",
      editorContent1: "",
      options: {
        placeHolder: "this is placeHolder",
        toolbarFloat: false,
        toolbar: [
          "title",
          "bold",
          "italic",
          "underline",
          "strikethrough",
          "fontScale",
          "color",
          "|",
          "ol",
          "ul",
          "blockquote",
          "code",
          "table",
          "|",
          "link",
          "image",
          "hr",
          "|",
          "indent",
          "outdent",
          "alignment",
        ],
      },
    }
  },
  components: {contractTemplate, UEditor},
  mounted() {
    // this.getContractsMethods()
    this.getAllContracts()
  },
  methods: {
    // 删除模板
    deleteContent(row){
      this.$confirm('此操作将删除该模板, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let data=[row.label]
        httpPost(data,this.$api.deleteContracts).then(res=>{
          if(res.success){
            this.dialogVisible = false
            this.$message.success("删除成功")
            this.getAllContracts()
          }else{
            this.$message.error("删除失败")
          }
        })
      })
    },
    // 打开编辑弹窗
    handleClick(row){
      this.dialogVisible = true
      this.fileName = row.label
      this.getContractsMethods()
    },
    // 关闭弹窗
    handleClose() {
      this.dialogVisible = false
    },
    // 获取所有模板
    getAllContracts(){
      httpGet('',this.$api.getContracts).then(res=>{
        if(res.success){
          let list=[]
          res.data.map(li=>{
            let obj={
              label:li
            }
            list.push(obj)
          })
          this.contractsList = list
        }
      })
    },
    getContractsMethods(){
      let data={
        "fileName":this.fileName,
      }
      httpPost(data,this.$api.getOrderContract).then(res=>{
        if(res.success){
          this.editorContent = res.data
          console.log(this.editorContent)
        }
      })
    },
    editorContentValue(val) {
      this.CompanyProfile = val;
    },
    // 导出合同模板名称
    async exportContent(row){
      this.fileName = row.label
      this.dialogVisible = true
      await this.getContractsMethods()
      await this.exportHtmlWord()
    },
    // 上传模板
    uploadTemplate(){
      let html = this.CompanyProfile //获取html的内容
      // let arr = document.querySelector('#question_doc')
      // let html = arr.innerHTML
      let htmlStr = `
      <!DOCTYPE html>
      <html lang="en">
        <body style="font-family:方正仿宋_GBK;mso-ascii-font-family:'Times New Roman';">
          ${html}
        </body>
      </html>`;
      let data={
        "fileName":this.fileName,
        "content":htmlStr
      }
      httpPost(data,this.$api. createUpdateContractHandle).then(res=>{
        if(res.success){
          this.$message.success("上传成功")
          this.dialogVisible = false
          this.getAllContracts()
        }else{
          this.$message.error(`上传失败：${res.message}`)
        }
      })
    },
    // 导出模板
    exportHtmlWord() {
      // let arr = document.querySelector('#question_doc')  //获取dom
      let html = this.CompanyProfile //获取html的内容
      let htmlStr = `
      <!DOCTYPE html>
      <html lang="en">
        <body style="font-family:方正仿宋_GBK;mso-ascii-font-family:'Times New Roman';">
          ${html}
        </body>
      </html>`;  //把获取到的html放入到原生的html中  this.CompanyProfile
      this.editorContent = htmlStr
      saveAs(
        htmlDocx.asBlob(htmlStr, {orientation: 'landscape'}),
        '房屋租赁合同模板.doc'
      );  // 导出为word
    }
  }
};
</script>

<style scoped>

</style>
