<template>
  <ContainerLayout :options="view.layout" ref="layout" class="body-content" @resize="resize">
    <div slot="north">
      <div class="title" v-if="view.showTitle" ref="title">{{$_i18n(view.title)||$_i18n("form.no_title")}}</div>
      <!--表单应用，不提供工具栏fid-->
      <CustomToolbar v-show="view.showToolbar" ref="toolbar" @click="$page_toolbar_clickHandler"
                     @ready="$_page_toolbar_initComplete" @resize="resize" @completed="completed"
                     :queryParams="queryParams"></CustomToolbar>
    </div>
    <!--使用vue动态组件加载适配-->
    <component v-if="view.layout.south && view.layout.south.component!=null && view.layout.south.visible"
               slot="south" ref="south" :is="view.layout.south.component" :params="view.layout.south.params">
    </component>
    <div class="news" v-html="content"></div>
    <Dialog refs="dialog" :title="dialog.title" :visible.sync="dialog.visible" :destroy-on-close="dialog.destroyOnClose"
            :width="dialog.width" :height="dialog.height" :close-on-click-modal="dialog.modalClose"
            :parentClass="view.parentClass" @close="handleDialogClose" :custom-class="view.customClass"
            :modal-append-to-body="false" :close-on-press-escape="false">
      <component v-if="dialog.visible" :is="dialog.component" :params="dialog.params"></component>
      <span v-if="dialog.footer&&dialog.footer.visible" slot="footer" class="dialog-footer">
            <el-button @click="dialog.visible = false">{{$_i18n("form.cancel")}}</el-button>
            <el-button type="primary" @click="dialog.visible = false">{{$_i18n("form.ok")}}</el-button>
          </span>
    </Dialog>
  </ContainerLayout>
</template>
<script>
  import resize from '../../utils/mixins/resize';
  import page from '../Common/page';
  export default {
    name: "Preview",
    mixins: [resize, page],//监听外部框架的大小改变事件
    components: {
    },
    data() {
      return {
        cache:{},
        view: {//布局控制配置
          showToolbar:true,
          layout: {
            north: {visible: true, resize: false, size: "auto"},
            south: {visible: false, size: "100px",
              params: {showTitle: false,inited:false}}
          }
        },
        tools: [],
        content: ""
      }
    }, created() {
      this.$_page_getRouter();
    },async mounted() {
      if (this.fid) {
        let cache = {};
        if (this.$store.state.form[this.fid]) {
          cache = this.$core.decodeData(this.$store.state.form[this.fid], {}).data[0];
        } else {
          await this.$async({
            url: this.$store.state.api.form.loadConfig + this.fid, keymap: {}, beforeDecode: (e) => {
              this.$store.dispatch('form/update', {key: this.fid, value: e});
            }
          }).then(async (res) => {
            cache = res.data[0];
          })
        }
        if (cache.tools) {
          for (let i in cache.tools) {
            if (cache.tools[i].position == "5") {
              this.tools.push(cache.tools[i])
            }
          }
        }
        if(cache.view)
          this.$_page_updateView(cache.view)
      }
      this.$refs.toolbar.updateTools(this.tools);
      if(this.$refs.layout)
        this.$refs.layout.updateLayout(this.view.layout);
      this.resize();
    },
    computed: {},
    methods: {
      customQuery(params) {
        if (this.rid) {
          this.$http({
            url: this.$store.state.api.report.loadReport + this.rid,
            data: this.queryParams,
          }).then(async (res) => {
            this.content =this.$core.resameUrl(this.$store.state.api.axios.baseURL,res,true);
            this.resize();
          });
        }
      }, updatePageParams(pageParams) {
        if (pageParams.fid) {
          this.fid = pageParams.fid;//拦截无穷递归
          delete pageParams.fid;
          delete this.queryParams.fid;
        }
        if (pageParams.rid) {
          this.rid = pageParams.rid;//拦截无穷递归
          delete pageParams.rid;
          delete this.queryParams.rid;
        }
      }, resize() {
        this.$nextTick(()=>{
          if(this.view.layout.south.visible&&this.$refs.south) {
            this.$refs.south.resize();
          }
        })
      }, completed() {
        this.$core.debug().log("收到工具栏加载完成事件", this.params);
      }
    }
  }
</script>