<template>
  <el-card id="printFrom" :class="!showButtons ? 'box-card cms-page-form no-buttons' : 'box-card cms-page-form'">
    <div style="line-height: 30px;font-weight: 700;" slot="header" class="clearfix" v-if="formTitle">
      <i class="el-icon-document" style="margin-right: 5px;font-size: 18px;margin-top: -8px"></i>
      <span style="font-size: 18px;font-weight: 700;">{{ formTitle }}</span>
    </div>
    <cms-edit-form
      v-bind="$attrs"
      ref="formRef"
      :label-width="labelWidth"
      :form-model="formModel"
      :form-rules="formRules"
      :form-type="formType">
      <el-collapse v-if="formCollapseItem.length > 0" v-model="activeNames" :accordion="accordion">
        <div class="el-collapse-item-d" v-for="(item, index) in formCollapseItem" :key="index">
          <el-collapse-item :name="item.name" :id="item.name">
            <div slot="title" style="padding-left: 0">
              <i class="el-icon-notebook-1"></i> {{ item.title }}
            </div>
            <slot :name="item.name"></slot>
          </el-collapse-item>
        </div>
      </el-collapse>
    </cms-edit-form>
    <div id="no-print">
      <div class="cms-page-button" v-if="showButtons">
        <div class="form-item-anchor">
        <span v-for="(item, index) in formCollapseItem" :key="index">
          <a href="javascript:void(0)" :class="item.name === activeName ? 'active' : ''"
             @click="jumpToPosition(item.name)">
            <i class="el-icon-info"></i>
            {{ item.title }}</a>
        </span>
        </div>
        <div class="form-item-button">
          <slot name="buttons">
            <cms-button
              type="primary"
              v-if="showSubmit && !(formType === 'view' || formType === 'approval')"
              @click="onSubmit">
              <span>{{ $t("common.button.submit") }}</span>
            </cms-button>
            <cms-button
              @click="onSave"
              v-if="!(formType === 'view' || formType === 'approval')"
              type="primary">
              <span>{{ $t("common.button.save") }}</span>
            </cms-button>
            <cms-button @click="onBack">
              <span>{{ $t("common.button.back") }}</span>
            </cms-button>
          </slot>
          <cms-button
            v-if="showPrint && !(formType === 'view' || formType === 'approval')"
            @click="handlePrint(printData)">
            <span>{{ $t("common.button.print") }}</span>
          </cms-button>
          <cms-button
            @click="exportPdf">
            <span>{{ $t("common.button.export") }}</span>
          </cms-button>
          <cms-button
            @click="downloadPDF">
            <span>{{ $t("common.button.export") }}1</span>
          </cms-button>
        </div>
      </div>
    </div>
  </el-card>
</template>

<script>
import { EditFormMixin, CmsPageFormMixin } from './edit-form-mixin'
import print from 'print-js'
import htmlPdf from "@/utils/htmlPdf";
import { downloadPDF } from "@/utils/pdf-utils";

export default {
  name: "CmsPageForm",
  mixins: [ EditFormMixin, CmsPageFormMixin ],
  data() {
    return {
      printData: {
        printable: 'printFrom',
        header: '申请表',
        ignore: [ 'no-print' ]
      },
      activeName: this.formCollapseItem.length > 0 ? this.formCollapseItem[0].name : ''
    };
  },
  methods: {
    /**/
    jumpToPosition(name) {
      this.activeName = name;
      document.querySelector("#" + name).scrollIntoView(true);
    },
    /** 提交 */
    onSubmit() {
      this.$refs.formRef.validate((valid) => {
        if (valid) {
          this.$emit("submit", this.formModel);
        } else {
          return false;
        }
      });
    },
    /** 执行保存 */
    onSave() {
      this.$refs.formRef.validate((valid) => {
        if (valid) {
          this.$emit("save", this.formModel);
        } else {
          return false;
        }
      });
    },
    /** 重置表单 */
    resetFields() {
      this.$refs.formRef.resetFields();
    },
    /** 执行返回 */
    onBack() {
      this.$emit("back", false, this.formModel);
    },
    getForm() {
      return this.$refs.formRef;
    },
    validate(callback) {
      this.$refs.formRef.validate((valid) => {
        if (callback) callback(valid);
      });
    },
    handlePrint(params) {
      print({
        headerStyle: 'font-size: "16px";border: 1px soild #f2f2f2;background: "#f2f2f2"',
        printable: params.printable, // 'printFrom', // 标签元素id
        type: params.type || 'html',
        header: params.header, // '表单',
        targetStyles: [ '*' ],
        style: '@page {margin:1mm};', // 可选-打印时去掉眉页眉尾
        ignoreElements: params.ignore || [], // ['no-print']
        properties: params.properties || null
      })
    },
    exportPdf() {
      htmlPdf.getPdf('导出pdf', document.querySelector('#printFrom'))
    },
    downloadPDF() {
      downloadPDF('printFrom', new Date().getTime() + '.pdf');
    }
  },
  mounted() {
  },
  props: {},
};
</script>

<style scoped lang="scss">
.el-card__body {
  padding: 0 !important;
  position: static;
}

.edit-page-form {
  padding: 0 !important;
  margin: 20px 20px 0 0;
}

.edit-form-main {
  padding: 0;
}

.edit-page-form-1 {
  padding: 0 !important;
}

.el-collapse-item__wrap {
  padding: 10px 10px 10px 0 !important;
}
</style>
