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

::v-deep th.todo-header-row {
  background-color: #fafafa;
  font-size: 13px;
}

::v-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;
}

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

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

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

::v-deep .el-button {
  margin-left: 0px;
}

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