import gridHeader from './App_Expert/App_ExpertGridHeader'

//自定义选择数据源页面
import App_ExpertModelBody from './App_Expert/App_ExpertModelBody'
import { h, resolveComponent } from 'vue';
//声明vue对象
let $this;
let extension = {
  components: {
    gridHeader: gridHeader,
    gridBody: {
      render() {
        return h(resolveComponent('ElAlert'), {
          style: { 'margin-bottom': '12px' },
          'show-icon': true,
          closable: false,
        }, [h('p', {}, '1、多个弹出框：手动创建一个页面,接着在表对应的js文件中引入页面放到gridHeader中'),
        h('p', {}, ' 2、在手动创建的页面中，可以写任意代码,在js中通过this.$refs.gridHeader.xx即可访问页面的内容,具体见:App_Expert.js、App_ExpertGridHeader.vue')]);
      }
    },
    gridFooter: '',
    modelHeader: '',
    modelBody: App_ExpertModelBody,  //将选择数据源页面App_ExpertModelBody注册到弹出框中
    modelFooter: ''
  }, //动态扩充组件或组件路径
  buttons: {
    view: [{
      name: "弹出框1",
      icon: 'md-add',
      index: 1,//添加到第一个按钮后面
      type: 'primary',
      onClick: function () {
        $this.$refs.gridHeader.open1()
      }
    }]
  },

  methods: { //事件扩展
    click1(){
      this.$message.success('点击了提示')
    },
    onInited() {
      $this = this;
      //手动调度弹出框的高度
      this.boxOptions.height = this.boxOptions.height + 90;
      //手动设置表高度自动适应
      this.height = this.height - 100;
    },
    onInit() {

      this.editFormOptions.forEach(x => {
        x.forEach(item => {
          if (item.field == 'HeadImageUrl') {
           
            //选择文件时
            item.onChange=(files)=>{
               console.log('选择文件事件')
               //此处不返回true，会中断代码执行
               return true;
            }
            //上传前
            item.uploadBefore=(files)=>{
              console.log('上传前')
              return true;
            }
             //上传后
             item.uploadAfter=(files)=>{
              console.log('上传后')
              return true;
            }
          }
        })
      })

      //选择数据源功能
      this.editFormOptions.forEach(x => {
        x.forEach(item => {
          if (item.field == 'ReallyName') {
            //给编辑表单设置[选择数据]操作,extra具体配置见volform组件api
            item.extra = {
              icon: "el-icon-zoom-out",
              text: "选择数据",
              style: "color:#2196F3;font-size: 12px;cursor: pointer;",
              click: item => {
                this.$refs.modelBody.openDemo();
              }
            }
          }
        })
      })


      //设置保存后继续添加 ，不关闭当前窗口
      //2021.04.11需要更新methods.js,ViewGrid.vue
      this.continueAdd = true;
      this.continueAddName = "连续添加";

      //将编辑表单第一行第一列【名称】字段添加一个额外提示属性
      this.editFormOptions[0][0].extra =
      {
        render: (h) => {
          return <el-popover
            placement="top-start"
            title="Title"
            width="200"
            trigger="hover"
            content="this is content, this is content, this is content"
          >
            {/* 这里对应下面的#reference数据槽 */}
            {{ reference: ()=>{return <i onClick={()=>{this.click1()}} class='el-icon-warning-outline'></i>} }}
          </el-popover>
        }
      }

      //设置界面上最多可显示的按钮数量 
      this.maxBtnLength = 6;

      // 第2个弹出框操作
      this.buttons.splice(2, 0, ...[{
        name: "弹出框2",
        icon: 'md-add',
        type: 'success',
        onClick: function () {
          $this.$refs.gridHeader.open2()
        }
      },
      {
        name: "获取子组件对象",
        icon: 'md-add',
        type: 'warning',
        onClick: function () {
          this.$Message.info(this.$refs.gridHeader.getTestData())
        }
      }])


      // 第3个弹出框操作
      this.columns.forEach(x => {
        if (x.field == "Resume") {
          x.formatter = (row, column, event) => {
            return '<a style="color:#2a92ff;cursor: pointer;">(弹出框3)' + row.Resume + '</a>'
          };
          //绑定点击事件
          x.click = (row, column, event) => {
            $this.$refs.gridHeader.open3(row)
          };
        }
      })

      //启用多图上传,其他上传参数，参照volupload组件api
      this.editFormOptions.forEach(x => {
        x.forEach(item => {
          if (item.field == 'HeadImageUrl') {
            //item.type = 'file';
            //设置成100%宽度
            item.colSize = 12;
            item.multiple = true;
            //最多可以上传3张照片
            item.maxFile = 3;
            //限制图片大小，默认3M
            item.maxSize = 3;
            // item.append = true;
          }
        })
      })

      // //动态添加一行表单配置
      // this.editFormOptions[2].splice(0, 1, ...[
      //   {
      //     colSize: 12,
      //     render: (h) => {
      //       return <el-alert title="这里是自定的提示信息" style={{ padding:0 }} type="success" >
      //       </el-alert>
      //     }
      //   }
      // ])

    },
  }
};
export default extension;