import gridFooter from "./SellOrder2/SellOrder2GridFooter.vue"

//自定义从表选择数据源页面
import modelBody from "./SellOrder2/SellOrder2ModelBody.vue"
import { h, resolveComponent } from 'vue';
let extension = {
  components: {//动态扩充组件或组件路径
    //表单header、content、footer对应位置扩充的组件
    gridHeader: '',//{ template: "<div>扩展组xx件</div>" },
    gridBody: {
      render() {
        return [
          h(resolveComponent('el-alert'), {
            style: { 'margin-bottom': '12px' },
            'show-icon': true, type: 'success',
            closable: false, title: '界面由代码生成器生成,只需几行代码即可实现点击主表行显示明细表数据(直接扩展gridFooter位置的代码,具体代码见此示例:SellOrder2.js)'
          }, ''),
        ]
      }
    },
    gridFooter: gridFooter,
    //弹出框(修改、编辑、查看)header、content、footer对应位置扩充的组件
    modelHeader: "",
    modelBody: modelBody,//自定义从表选择数据源页面
    modelFooter: "",
  },
  text: "点击主表行加载明细表数据,如果本地看不到此菜单,可以按照演示环境配置下此页面菜单",
  buttons: { //根据需要自行实现扩展按钮
  },//扩展的按钮
  methods: {
    mounted() {
    },
    //方式1,通过select选择触发显示与隐藏
    onInit() {
      //点击单元格编辑与结束编辑(默认是点击单元格编辑，鼠标离开结束编辑)
      this.detailOptions.clickEdit = true;
      //设置主表合计
      this.summary = true;
    },
    onInited() {
      //调整界面table高度
      this.height = this.height - 310;

      //明细表选择数据源操作
      //获取明细表备注列，给备注列添加选择数据操作

      this.detailOptions.buttons.unshift({
        'name': '选择数据', 
        icon: "el-icon-plus",
        onClick: () => {
          this.$refs.modelBody.open();
        }
      })
      // let _column = this.detailOptions.columns.find(x => { return x.field == "Remark" });
      // _column.title="(备注)点击选择数据"
      // //移除编辑操作
      // _column.edit = null;
      // //给备注列添加选择数据操作
      // _column.render = (h, { row, column, index }) => {
      //   return h("div", { style: {} },
      //     [
      //       h("i", {
      //         class: ["el-icon-zoom-out"],
      //         style: {
      //           cursor: "pointer",
      //           "margin-right": "8px",
      //           color: "#409eff",
      //         },
      //         onClick: (e) => {
      //           e.stopPropagation();
      //           //弹出选择数据源
      //           this.$refs.modelBody.open(row);
      //         },
      //       }),
      //     ], row.Remark)
      // };
    },
    // rowDbClick({ row, column, event }){//双击事件
    // },
    rowClick({ row, column, event }) { //查询界面table点击行选中当前行
      //取消其他行选中
      this.$refs.table.$refs.table.clearSelection();
      //设置选中当前行
      this.$refs.table.$refs.table.toggleRowSelection(row);
      if (this.$refs.gridFooter && this.$refs.gridFooter.$refs.tableList) {
        //load方法可参照voltable组件api文档
        this.$refs.gridFooter.$refs.tableList.load({ value: row.Order_Id, sort: "CreateDate" })
      }
    },
    searchAfter(rows) {
      //页面加载或者刷新数据后直接显示第一行的明细
      if (rows.length) {
        // this.$nextTick(() => {
        this.$refs.gridFooter.$refs.tableList.load({ value: rows[0].Order_Id, sort: "CreateDate" })
        // })
      } else {
        //没有数据时，清空明细数据
        this.$refs.gridFooter.$refs.tableList.rowData.splice(0)
      }
      return true;
    }
  }
};
export default extension;