<template>
  <ContainerLayout :options="view.layout" ref="layout" class="body-content form" :style="[view.height]" @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>
    <dynamic-form ref="form" :options="view.formView"></dynamic-form>
    <!--使用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>

    <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';
import DynamicForm from "../Common/DynamicForm";
// import form from '../Common/form'
export default {
  name: "FormView",
  mixins: [resize, page],//监听外部框架的大小改变事件
  components: {
    DynamicForm
  },
  data() {
    return {
      cache:{},
      view: {//布局控制配置
        validateOnRuleChange:false,
        idKey: "id",
        layout: {
          north: {visible: true, resize: false, size: "auto"},
          south: {visible: false, size: "100px", params: {showTitle: false,inited:false}}
        },
        formView: {
          params:{},
          enableQuery:false,  //是否允许其他页面查询
          saveAndClose: true,
          columnCount: 2, //表单列数计算范围
          width: "100%",  //表单内容占表单总允许宽度
          labelWidth: "100px" //标题的宽度
        }
      }, tools: [
        {type: "save", code: "save", name: "[toolbar.save]", remark: "[toolbar.save_remark]", style: "icon-save"}
      ],
    }
  }, 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];
        })
      }
      this.$core.debug().log("检查form参数",cache)
      if(cache.view) {
        if (cache.view.formView && cache.view.formView.layout)
          this.$_page_updateLayoutSetting(cache.view.formView);
        //完成工具栏数据布局
        if (cache.view.formView)
          for (let key in cache.view.formView)
            this.$set(this.view.formView, key, cache.view.formView[key])
      }
      if (this.view.formView.tools && this.view.formView.tools.length) {//如果需要重写，则在这边配置，比如选择并返回
        this.tools = this.view.formView.tools;
      }
      if (cache.tools) {
        for (let i in cache.tools) {
          if (cache.tools[i].position === "5") {
            this.tools.push(cache.tools[i])
          }
        }
      }
      this.$core.debug().log(this.tools.length);
      this.$nextTick(()=>{
        this.$refs.toolbar.updateTools(this.tools);
      })

      let formData=null;
      if (this.view.formView.configId) {
        await this.$async({
          url: this.$store.state.api.json.loadData+this.view.formView.configId,
          params:this.view.formView.params,
          keymap: {format:"formatString",column_count:"columnCount"}//很多非标准字段要映射成标准字段
        }).then(async res => {
          cache.items = res.data || [];
          formData=[];
        })
      }

      if(this.queryParams.readonly){//是否允许其他页面联动查询
        this.cache.items=cache.items;
        // this.customQuery(this.queryParams);
      }else {
        await this.updateForm(cache.items,formData);
        if(this.view.layout.south.visible) {
          this.$nextTick(()=>{
            this.$refs.layout.updateLayout(this.view.layout);
            this.$_page_linkageLayout("south");
          })
        }
      }
    }
    this.$refs.layout.updateLayout(this.view.layout);
    this.resize();
  },
  computed: {},
  methods: {
      checkVisible(item){ //此方法重写了page.js的方法，如果以后需要性能提升时，分离stepview和formview的页面逻辑
          if(item.type=="processlist") {
              if(this.queryParams.cid){
                  return item.isVisible
              }
              return false;
          }
          return item.isVisible;
    }, async customQuery(params) {
      if(this.queryParams.readonly&&this.queryParams.id) {//是否允许其他页面查询
        if (this.cache.items) {
          this.$core.extend(this.queryParams, params);
          await this.updateForm(this.cache.items);
          delete this.cache.items;
        } else {
          this.$core.extend(this.queryParams, params);
          await this.updateForm();
        }
        if(this.view.layout.south.visible)
          this.$_page_linkageLayout("south");
      }
    }, updatePageParams(pageParams) {
      if (pageParams.reportName) {
        this.view.title = pageParams.reportName;
        delete pageParams.reportName;
      }
      if (pageParams.fid) {
        this.fid = pageParams.fid;//拦截无穷递归
        delete pageParams.fid;
        delete this.queryParams.fid;
      }
      if (pageParams.columnCount)
        this.view.formView.columnCount = pageParams.columnCount;
      if(pageParams.novali){
        this.form.novali=pageParams.novali.split(",")
      }
    }, resize() {
      this.$nextTick(()=>{
        if(this.view.layout.south.visible&&this.$refs.south) {
          // this.$core.debug().log("调整底部组件大小");
          this.$refs.south.resize();
        }
      })    
    }, completed() {
      // this.$core.debug().log("收到工具栏加载完成事件", this.params);
    },async updateForm(items,formData){
      this.view.formView.params=this.queryParams;
      if(formData==null) {
        await this.$async({
          url: this.$store.state.api.form.loadFormData + this.fid,
          data: this.queryParams
        }).then(async (res) => {
          formData = res.data;
        });
      }
      await this.$refs.form.updateForm(items,formData);
    },validateCallback(item, key,data) {
      if(data==null){
        data=this.getPageParams();
      }
      // this.$core.debug().log("执行表单内容验证", item, data);
      return this.validateData(item,key,data);
    }
  }
}
</script>

 