<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 type="primary" @click="templateEvents(1)">获取所有数据</el-button>
        <el-button type="primary" @click="templateEvents(2)">校验所有模块</el-button>
        <el-button @click="onReset">重置</el-button>
      </el-form-item>
    </el-form>
    <EasyDataTemplate v-if="templateId" ref="TemplateView" :biz-params="bizParams" :templateId="templateId"
                   @loadOk="bizParamsOk"></EasyDataTemplate>
  </ed-dialog>
</template>
<script>

export default {
  name: "TemplatePreview",
  props: {
    showBizParams: {
      type: Boolean,
      default: true
    },
    title: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      visible: false,
      loading: false,
      url: {
        getTemplate: '/easydata/template/getModule'
      },
      templateId: null,
      config: {},
      bizParams: {},
      bizParamMaps: []
    }
  },
  methods: {
    /**
     * 根据模版编号查询加载
     * @param {*} templateId
     * @param config
     */
    showModal(templateId, config) {
      this.templateId = templateId;
      this.config = config
      this.visible = true;
    },
    bizParamsOk() {
      const bizParams = this.$refs.TemplateView.getBizParams();
      Object.keys(bizParams).map((item) => {
        let hasParam = this.bizParamMaps.filter(t => t.label === item);
        if (hasParam.length === 0) {
          this.bizParamMaps.push({label: item, value: bizParams[item]})
        }
      });
    },
    onChange() {


      console.log(this.bizParams)
    },
    onSubmit() {
      this.bizParamMaps.map(item => {
        this.$set(this.bizParams, item.label, item.value)
      })
    },
    async templateEvents(ev) {
      if (ev === 1) {
        let data = await this.$refs.TemplateView.getFormData()
        console.log(data)
      } else if (ev === 2) {
        let valid = await this.$refs.TemplateView.validate()
        console.log(valid)
      }
    },
    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>
