<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=820 height=450 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/system.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: {
    //表单提交
    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;
        }
      });
    },
    //新增
    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)
        }
      })
    },
    //编辑
    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)
        }
      })
    },
    closeDialog () {
      this.$popupCacel()
      this.ruleForm = {
        tmpno: '',
        tmpname: '',
        tmpfont: '',
        tmpfontsize: '',
        tmpcontent: ''
      }
      this.loadStatus = '0'
      this.editFlag = false;
    },
    getDetailInfo (item) {
      this.ruleForm = item;
      this.editFlag = true;
    },
    //设计打印模板
    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>