<template>
  <ed-dialog ref="TemplatePreview" v-loading="loading" :destroy-on-close="true" :fullscreen="true" :title="title"
              :visible="visible"
              @close="close">
    <el-form v-if="showBizParams" ref="form" label-width="80px" size="mini">
      <el-form-item v-for="(bizParam, index) in bizParamMaps" :key="index" :label="bizParam.label">
        <el-input v-model="bizParam.value" @change="onChange"/>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
        <el-button @click="onReset">重置</el-button>
      </el-form-item>
    </el-form>
    <easy-data-template v-if="visible" ref="TemplateView" :bizParams="bizParams" :templateConfig="config" ></easy-data-template>
  </ed-dialog>
</template>
<script>

export default {
  name: "TemplatePreview2",
  props: {
    showBizParams: {
      type: Boolean,
      default: true
    },
    title: {
      type: String,
      default: ''
    },
    bizParamStr: {
      type: String,
      default: ''
    },
  },
  watch:{
    bizParamStr: {
      immediate: true,
      handler: function (newVal, oldVal) {
        if (newVal && newVal !== oldVal) {
          const temp = newVal.split(",")
          this.bizParamMaps = []
          temp.map(i=>this.bizParamMaps.push({label: i, value: ""}))
        }
      }
    },
  },
  data() {
    return {
      visible: false,
      loading: false,
      url: {
        getTemplate: '/easydata/template/getModule'
      },
      templateId: null,
      config: {},
      bizParams: {},
      bizParamMaps: []
    }
  },
  methods: {
    /**
     * 根据模版编号查询加载
     * @param {*} templateId
     * @param config
     */
    showModal(config) {
      this.config = config
      this.visible = true;
    },
    onChange() {

    },
    onSubmit() {
      this.bizParamMaps.map(item => {
        this.$set(this.bizParams, item.label, item.value)
      })
    },
    onReset() {
      this.bizParamMaps.map(item => {
        item.value = ""
      })
    },
    close() {
      this.visible = false
      this.bizParams = {}
      this.bizParamMaps = []
    }
  }
}
</script>

<style scoped>
.my-label {
  background: #E1F3D8;
}

.pages :deep(.el-dialog) {
  max-width: 95% !important;
  max-height: 98% !important;
}
</style>
