<template>
  <div style="padding-top: 10px;">
    <span v-if="html">
      <template-dynamic-view
        :templateKey="templateKey"
        :html="html"
        :taskType="taskType"
        :single="isJoinFlow?isJoinFlow:single"
        :dataView="dataView"
        :isJoinFlow="isJoinFlow"
        :defKey="defKey"
        :parameterqQuerys="parameterqQuerys"
        :templateInfo="templateInfo"
        v-if="loadComplete"
      />
    </span>
    <div class="loaded-fail__div" v-if="loadedFail">报表不存在...</div>
  </div>
</template>

<script>
import { mapState, mapActions } from "vuex";
import { Message } from "element-ui";
import HtCheckbox from "@/components/control/HtCheckbox.vue";
import HtDialog from "@/components/control/HtDialog.vue";
import TemplateDynamicView from "@/components/dataTemplate/TemplateDynamicView.vue";
import HtDialogBtn from "@/components/control/htDialogBtn.vue";
import VRuntimeTemplate from "v-runtime-template";
import utils from "@/utils.js";
import { Base64 } from "js-base64";

export default {
  name: "templatePreview",
  props: {
    templateKey: String,
    parameterqQuerys: String,
    single: String,
    taskType: {
      default: ""
    },
    defKey: String,
    dataView: Object,
    isJoinFlow: {
      default: false
    }
  },
  data() {
    return {
      html: "",
      templateInfo: {},
      tableData: { selectRows: [], querys: "" },
      dialogExportVisible: false,
      exportData: { getType: "all", expField: [] },
      displayFields: [],
      exportSellection: [],
      searchForm: { F_xb: "", F_xm: "" },
      queryForm: {
        queryData: ""
      },
      formType: false,
      labelPosition: "left",
      incons: "el-icon-arrow-down",
      options: {
        fullscreen: true,
        lock: true
      },
      loadedFail: false,
      loadComplete:false
    };
  },
  computed: {
    ...mapState({
      dialogSubVisible: state => state.form.bpmTemplateSubData.dialogSubVisible,
      tabs: state => state.form.bpmTemplateSubData.tabs,
      ents: state => state.form.bpmTemplateSubData.ents,
      refId: state => state.form.bpmTemplateSubData.refId
    })
  },
  components: {
    VRuntimeTemplate,
    HtCheckbox,
    HtDialog,
    HtDialogBtn,
    TemplateDynamicView
  },
  watch: {
    templateKey: function(newVal) {
      if (newVal) {
        this.init();
      }
    }
  },
  created() {
    this.init();
  },
  methods: {
    // 根据当前formKey初始化
    init() {
      let _me = this;
      this.loadComplete = false;
      this.$store.dispatch("form/getBpmDataTemplateInfo", {
        templateKey: this.templateKey
      }).then(result => {
        if (result.state) {
          _me.templateInfo = result.value;
          this.loadComplete = true;
        }
      });
      this.$store
          .dispatch("form/getTemplateDataListForm", this.templateKey)
          .then(result => {
            if (result.state) {
              _me.html = result.value;
            }else{
              this.loadedFail = true;
            }
          })
    }
  }
};
</script>

<style lang="scss" scoped>
@import "@/assets/css/element-variables.scss";
/deep/ th.todo-header-row {
  background-color: #fafafa;
  font-size: 13px;
}

/deep/ tr.todo-row {
  font-size: 13px;
  color: $--color-text-regular;
}

.el-container {
  background-color: #fff;
}

.el-row {
  margin-bottom: 20px;
}

.el-header {
  border-bottom: 1.5px solid #ededed;
}

.i {
  margin-right: 4px;
}

.todo-subject {
  cursor: pointer;
}

.todo-subject:hover {
  color: $--theme-color;
}

/deep/ .el-dialog__body {
  padding: 15px 10px;
}

/deep/ .el-checkbox {
  margin-left: 15px;
}

/deep/ .el-radio {
  margin-left: 15px;
}

/deep/ .el-button{
  margin-left: 0px;
}
.loaded-fail__div {
  text-align: center;
  font-size: 14px;
  font-weight: bold;
  color: #f56c6c;
}
</style>
