<!--
 * @Description:
 * @Autor: renchao
 * @LastEditTime: 2023-07-13 16:42:26
-->
<template>
  <el-form ref="ruleForm" :model="ruleForm" label-width="100px" :rules="rules">
    <el-row>
      <el-col :span="24">
        <el-form-item label="模板编码:" prop="tmpno">
          <el-input v-model="ruleForm.tmpno" :disabled="editFlag"></el-input>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <el-form-item label="模板名称:" prop="tmpname">
          <el-input v-model="ruleForm.tmpname" :disabled="editFlag"></el-input>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12">
        <el-form-item label="模板设计:">
          <el-button type="primary" @click="designByPRGData(ruleForm.tmpcontent)">模板设计</el-button>
          <i class="el-icon-loading" style="font-size:24px;margin-left:10px;" v-if="loadStatus == '1'"></i>
          <i class="el-icon-circle-check" style="font-size:24px;margin-left:10px;color:green"
            v-if="loadStatus == '2'"></i>
        </el-form-item>
      </el-col>
    </el-row>
    <object id="LODOP_OB" classid="clsid:2105C259-1E0C-4534-8141-A753534CB4CA" v-show="false">
      <embed id="LODOP_EM" type="application/x-print-lodop" width=800 height=600 pluginspage="install_lodop32.exe" />
    </object>
    <textarea rows="0" id="S1" cols="0" v-show="false"></textarea>

    <el-form-item class="text-center">
      <el-button @click="closeDialog">取消</el-button>
      <el-button type="primary" @click="submitForm" plain>确定</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
  import { getLodop } from "@/utils/LodopFuncs"
  import { mapGetters } from 'vuex'
  import store from '@/store/index.js'
  import { addPrintTemplate, editPrintTemplate } from "@/api/print.js"
  export default {
    computed: {
      ...mapGetters(['dictData']),
    },
    props: {
      formData: {
        type: Object,
        default: () => { }
      }
    },
    data () {
      return {
        editFlag: false,
        //打印模板设计保存状态 0：未操作  1：保存中 2：已保存
        loadStatus: '0',
        //表单提交数据
        ruleForm: {
          tmpno: '',
          tmpname: '',
          tmpfont: '',
          tmpfontsize: '',
          tmpcontent: ''
        },
        rules: {
          tmpno: [
            { required: true, message: '模板编号不能为空', trigger: 'blur' }
          ],
          tmpname: [
            { required: true, message: '模板名称不能为空', trigger: 'blur' }
          ],
        },
      }
    },
    mounted () {
      if (JSON.stringify(this.formData) != "{}") this.getDetailInfo(this.formData)
    },
    methods: {
      //表单提交
      /**
       * @description: 表单提交
       * @author: renchao
       */
      submitForm () {
        if (this.loadStatus == '1') {
          return this.$message.error("模板设计保存中，请等待...")
        }
        this.$refs.ruleForm.validate(valid => {
          if (valid) {
            if (this.editFlag) {
              this.editTemplate();
            } else {
              this.addTemplate();
            }
          } else {
            return false;
          }
        });
      },
      //新增
      /**
       * @description: 新增
       * @author: renchao
       */
      addTemplate () {
        addPrintTemplate(this.ruleForm).then(res => {
          if (res.code == 200) {
            store.dispatch('user/refreshPage', true);
            this.$message.success('保存成功');
            this.$popupCacel()
          } else {
            this.$message.error(res.message)
          }
        })
      },
      //编辑
      /**
       * @description: 编辑
       * @author: renchao
       */
      editTemplate () {
        editPrintTemplate(this.ruleForm).then(res => {
          if (res.code == 200) {
            store.dispatch('user/refreshPage', true);
            this.$message.success('保存成功');
            this.$popupCacel()
          } else {
            this.$message.error(res.message)
          }
        })
      },
      /**
       * @description: closeDialog
       * @author: renchao
       */
      closeDialog () {
        this.$popupCacel()
        this.ruleForm = {
          tmpno: '',
          tmpname: '',
          tmpfont: '',
          tmpfontsize: '',
          tmpcontent: ''
        }
        this.loadStatus = '0'
        this.editFlag = false;
      },
      /**
       * @description: getDetailInfo
       * @param {*} row
       * @author: renchao
       */
      getDetailInfo (item) {
        this.ruleForm = item;
        this.editFlag = true;
      },
      //设计打印模板
      /**
       * @description: 设计打印模板
       * @author: renchao
       */
      designByPRGData () {
        let that = this;
        that.loadStatus = '1';
        let LODOP = getLodop(document.getElementById('LODOP_OB'), document.getElementById('LODOP_EM'));
        LODOP.ADD_PRINT_DATA("ProgramData", this.ruleForm.tmpcontent); //装载模板
        //窗口关闭后，回调函数中保存的设计代码
        if (LODOP.CVERSION)
          CLODOP.On_Return = function (TaskID, printList) {
            if (LODOP.CVERSION)
              LODOP.On_Return = function (TaskID, Value) {
                document.getElementById("S1").value = Value;
              };
            document.getElementById("S1").value = LODOP.GET_VALUE(
              "ProgramData",
              0
            );
            setTimeout(() => {
              that.ruleForm.tmpcontent = document.getElementById("S1").value;
              that.loadStatus = '2';
            }, 1000);
          };
        LODOP.PRINT_DESIGN(); //打印设计或者打印维护需要放到最后
      }
    }
  }
</script>
<style scoped lang="scss">
  @import "~@/styles/mixin.scss";
  @import "~@/styles/dialogBoxheader.scss";

  .font-red {
    color: red;
  }

  .middle-margin-bottom {
    margin-top: 20px;
  }
</style>