import { h, resolveComponent, defineAsyncComponent } from 'vue';
import modelBody from "./App_ReportPrice/App_ReportPriceModelBody.vue"
let extension = {
  components: {//动态扩充组件或组件路径
    gridHeader: "",
    gridBody: {
      render() {
        return h(resolveComponent('ElAlert'), {
          style: { 'margin-bottom': '12px' },
          'show-icon': true,
          closable: false,
        }, [h('p', {}, '1、此界面与上面的区别是：多个明细表在弹出框进行的扩展,见App_ReportPrice.js(点击新建或编辑即可查看效果)'),
        h('p', {}, ' 2、手动创建一个页面(可以写任意代码)，引入到App_ReportPrice.js的modelBody位置')]);
      }
    },
    gridFooter: '',
    modelHeader: '',
    //通过defineAsyncComponent异步引用
    modelBody: modelBody,
    // defineAsyncComponent(() => (import("./App_ReportPrice/App_ReportPriceModelBody.vue"))),
    modelFooter: ''
  },
  buttons: [],//扩展的按钮
  text: "弹出框一对多明细",
  methods: {//事件扩展
    onInit() {
    },
    onInited() {
      //初始化后将table高度减少85,因为gridHeader加了提示会导致页面有滚动条
      this.height = this.height - 100;
      //自定义弹出框的高与宽
      this.boxOptions.height = document.body.clientHeight * 0.9;
      this.boxOptions.width = document.body.clientWidth * 0.8;
    },
    modelOpenAfter() {//打开弹出框时
      //是否子组件渲染完成
      //新建功时，清空 清空,从表1，从表2的数据
      this.$nextTick(() => {
        //这里没有给弹出框中的表格传参，如果需要参数可以通过 this.$emit("parentCall", 获取页面的参数
        //具体见自定义页面App_ReportPriceModelBody.vue中的modelOpen方法的使用 this.$emit("parentCall", ($this) => {
        this.$refs.modelBody.modelOpen();
      })
    },
    addBefore(formData) { //弹出框新建或编辑功能点保存时可以将从表1，从表2的数据提到后台
      this.setFormData(formData);
      return true;
    },
    updateBefore(formData) { //编辑时功能点保存时可以将从表1，从表2的数据提到后台
      this.setFormData(formData);
      return true;
    },
    setFormData(formData) { //新建或编辑时，将从表1、2的数据提交到后台,见后台App_ReportPriceService的新建方法
      //后台从对象里直接取extra的值
      let extra = {
        table1List: this.$refs.modelBody.$refs.table1.rowData,//获取从表1的行数据
        table2List: this.$refs.modelBody.$refs.table2.rowData//获取从表2的行数据
      }
      formData.extra = JSON.stringify(extra);
    },
    resetUpdateFormAfter() { //编辑弹出框时，点重置时，可自定义重置
      console.log('resetUpdateFormAfter')
      return true;
    },
    resetAddFormAfter() { //新建弹出框时，点重置时，可自定义重置
      console.log('resetAddFormAfter')
      return true;
    }
  }
};
export default extension;