<template>
  <div style="height: 100%">
    <el-tabs v-model="activeName" class="api-grid">
      <el-tab-pane label="表格属性" name="gridAttr" class="api-grid-tab">
        <div class="flex flex-direction-column api-grid-tab-ctn">
          <div class="api-grid-tab-ctn-header">
            <el-radio-group v-model="gridAttrType">
              <el-radio-button label="all">全部</el-radio-button>
              <el-radio-button label="data">数据</el-radio-button>
              <el-radio-button label="toolbar">工具栏</el-radio-button>
              <el-radio-button label="common">通用</el-radio-button>
              <el-radio-button label="col">列相关</el-radio-button>
              <el-radio-button label="style">式样</el-radio-button>
              <el-radio-button label="tree">树形结构</el-radio-button>
              <el-radio-button label="other">不常用</el-radio-button>
            </el-radio-group>
          </div>
          <div class="flex-1 api-grid-tab-ctn-table">
            <api-table
              :data="gridAttrData"
              :columns="gridAttrCols"
              :span-method="gridSpanMethod"
            />
          </div>
        </div>

        <div>
          <api-tittle2>注意事项：</api-tittle2>
          1、表格属性类型是方法时，方法中的this说明：
          <api-code>
            示例：定义表格的对象：<br>
            tableOpts:{<br>
            ...<br>
            afterLoadData...<br>
            }<br>
            写法1：afterLoadData() {console.log(this)}<br>
            写法2：等价于写法1 afterLoadData: function() {console.log(this)}<br>
            写法3：afterLoadData:()=> {console.log(this)}<br>
            写法4：afterLoadData: this.afterLoadDataFn<br>
            methods: { afterLoadData() {console.log(this)},}<br>

          </api-code>
          写法1、2、3：this指向的是表格对象(即tableOpts对象)<br>
          写法4：this指向的页面组件，此时方法中可以调用页面的data、methods等等。<br><br>
          2、表格组件自定义封装组件。elementUI的表格属性配置无效。<br><br>
          3、表格高度：表格高度默认填满容器(100%)，调整表格高度，需要调整外部容器。
        </div>
      </el-tab-pane>
      <el-tab-pane label="事件/回调" name="event" class="api-grid-tab">
        <div class="flex flex-direction-column api-grid-tab-ctn">
          <div class="api-grid-tab-ctn-header">
            <el-radio-group v-model="eventType">
              <el-radio-button label="all">全部</el-radio-button>
              <el-radio-button label="callback">回调</el-radio-button>
              <el-radio-button label="event">事件</el-radio-button>
            </el-radio-group>
          </div>
          <div class="flex-1 api-grid-tab-ctn-table">
            <api-table :data="eventData" :columns="eventCols" :span-method="gridSpanMethod" />
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="列属性" name="colAttr" class="api-grid-tab">
        <div class="flex flex-direction-column api-grid-tab-ctn">
          <div class="api-grid-tab-ctn-header">
            <el-radio-group v-model="colAttrType">
              <el-radio-button label="all">全部</el-radio-button>
              <el-radio-button label="base">通用</el-radio-button>
              <el-radio-button label="input">input</el-radio-button>
              <el-radio-button label="inputNumber">inputNumber</el-radio-button>
              <el-radio-button label="slot">slot</el-radio-button>
              <el-radio-button label="select">select</el-radio-button>
              <el-radio-button label="cascader">cascader</el-radio-button>
              <el-radio-button label="expand">expand</el-radio-button>
              <el-radio-button label="search">search</el-radio-button>
              <el-radio-button label="searchTable">searchTable</el-radio-button>
              <el-radio-button label="searchTree">searchTree</el-radio-button>
              <el-radio-button label="searchPicker">searchPicker</el-radio-button>
              <el-radio-button label="datePicker">datePicker</el-radio-button>
            </el-radio-group>
          </div>
          <div class="flex-1 api-grid-tab-ctn-table">
            <api-table :data="colAttrData" :columns="colAttrCols" :span-method="gridSpanMethod" />
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="方法" name="method" class="api-grid-tab">
        <div class="flex flex-direction-column api-grid-tab-ctn">
          <div class="api-grid-tab-ctn-header">
            <el-radio-group v-model="methodType">
              <el-radio-button label="all">全部</el-radio-button>
              <el-radio-button label="data">请求数据</el-radio-button>
              <el-radio-button label="operate">操作</el-radio-button>
              <el-radio-button label="toggle">触发事件</el-radio-button>
              <el-radio-button label="other">其他</el-radio-button>
            </el-radio-group>
          </div>
          <div class="flex-1 api-grid-tab-ctn-table">
            <api-table :data="methodData" :columns="methodCols" :span-method="gridSpanMethod" />
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import { ApiCode, ApiContent, ApiTable, ApiTittle1, ApiTittle2 } from './../components'

export default {
  name: 'ApiGrid',
  components: {
    ApiTable, ApiCode, ApiTittle1, ApiContent, ApiTittle2
  },
  data() {
    const gridAttrCols = [
      { label: '分类', prop: 'group', width: '80px' },
      { label: '名称', prop: 'name', width: '140px' },
      { label: '类型', prop: 'type', width: '100px' },
      { label: '默认值', prop: 'default', width: '80px' },
      { label: '描述', prop: 'memo', minWidth: '100px' },
      { label: '示例代码', prop: 'code', minWidth: '100px' }
    ]
    const gridAttrData_data = [
      {
        group: '数据',
        name: 'initData',
        type: '布尔',
        default: 'false',
        memo: '初始化表格后，是否加载数据<br>注：local数据时，默认加载。',
        code: '<span class="api-code">initData: true，// 加载数据</span>'
      }, {
        name: 'localData',
        type: '数组',
        default: '',
        memo: '表格数据'
      }, {
        name: 'dataUrl',
        type: '字符串',
        default: '',
        memo: `表格数据请求Url<br>
                    <span class="api-memo">注：1、存在dataUrl，则取后台数据，localData数据无效。<br>
                    2、如果后台没有分页，currentPage=0，list长度>0，则前端分页。<br>
                    3、建议后台分页，不要返回全部数据。除非频繁的排序、过滤等。</span>`
      }, {
        name: 'saveUrl',
        type: '字符串',
        default: '',
        memo: `保存表格数据url<br><span class="api-memo">注：1、添加行：存在默认值时，必须手动设定默认值，数据库默认值无效。<br>
                    2、编辑行：有修改的列和editPk对应的列会传到后台，没有修改的数据不传。
                    </span>`
      }, {
        name: 'deleteUrl',
        type: '字符串',
        default: '',
        memo: '删除表格数据url<br><span class="api-memo">注：删除时传到后台的数据：deletePk对应的列。</span>',
        code: `<div class="api-code">1、前端请求路径：deleteUrl: "/apm/demo/deleteByIds"
2、后台接收：使用deleteList接收参数、使用GridUtil.getGridDeleteList处理参数
    @RequestMapping(value = "/deleteByIds", method = RequestMethod.POST)
    public String deleteByIds(String deleteList) {
        List list = GridUtil.getGridDeleteFdIdList(deleteList, Demo.class);
        return ResultUtil.success(count);
    }</div>`
      }, {
            name: 'deleteRemote',
            type: '布尔',
            default: 'true',
            memo: 'true: 点击表头【删除】按钮，后台马上删除数据<br>false：点击表头【删除】按钮，前端删除数据，点【保存】后后台删除数据。 -> 需要再后台添加 deleteList参数处理',
            code: `<div class="api-code">deleteRemote:true</div>`
        }, {
        name: 'sortUrl',
        type: '字符串',
        default: '',
        memo: '排序url<br><span class="api-memo">注：传到后台的数据：rowKey和sortey对应的列。</span>',
        code: `<div class="api-code">1、前端请求路径：deleteUrl: "/apm/demo/updateXxSortList"
2、后台接收：sortList
    @RequestMapping(value = "/updateXxSortList", method = RequestMethod.POST)
    public String updateXxSortList(String sortList) {
        int count = tXxUtil.updateSortList(sortList);
        return ResultUtil.success(count);
    }</div>`
      }, {
        name: 'method',
        type: '字符串',
        default: 'POST',
        memo: '表格数据请求方式。<br>可选值："POST"、"GET"',
        code: '<div class="api-code">method: "POST" //post请求<br>method: "GET" //get请求<br></div>'
      }, {
        name: 'params',
        type: '对象/方法',
        default: '',
        memo: '数据请求和保存时的参数。<br><span class="api-memo">注：1、参数会变时需要使用方法，参数固定可直接定义对象<br>2、请求数据时参数自动添加分页、排序信息，保存时不添加。</span>',
        code: `<div class="api-code">1、固定参数：定义对象
params: { type: 123}
2、动态参数：使用箭头函数
params: () => {
    return { type: this.typeId}
}</div>`
      }, {
        name: 'editPk',
        type: '字符串',
        default: 'fdId',
        memo: '编辑时，传递editPk的字段和有修改的字段到后台。多个字段使用","隔开。',
        code: '<div class="api-code">editPk: "name,type", // 传递行的name、type到后台</div>'
      }, {
        name: 'deletePk',
        type: '字符串',
        default: 'fdId',
        memo: '删除时，传递deletePk的字段到后台。多个字段使用","隔开。',
        code: '<div class="api-code">deletePk: "name,type", // 传递行的name、type到后台</div>'
      }, {
        name: 'rowKey',
        type: '字符串',
        default: 'fdId',
        memo: '行数据的 Key，对应列的prop。<br><span class="api-memo">注意：当树形结构、调用rowKey的相关方法时，需要按实际设定rowKey值。</span>'
      }, {
        name: 'sortKey',
        type: '字符串',
        default: 'fdSort',
        memo: '排序的 Key，对应列的prop。<br><span class="api-memo">注：工具类排序按钮时使用。</span>'
      }
    ]
    const gridAttrData_toolbar = [
      {
        group: '工具栏',
        name: 'toolbarBtn',
        type: '数组',
        default: '',
        memo: `数组的每一项可以是字符串或者对象<br>
一、字符串:可选值【add、edit、cancel、save、del、refresh、sortAuto、sortDown、sortUp、separator】<br>
注：separator表示按钮分组<br>
二、对象：{ type: "",btnType:"",text: "",icon: "",onClick:()=>{}}<br>
type: 覆盖默认方法。可选值【add、edit、cancel、save、del、refresh】<br>
btnType: 按钮类型。可选值【空、primary 、success、warning、danger 、info 、text】<br>
text: 按钮上的文字<br>
icon: 按钮的icon<br>
onClick: 自定义事件，优先级大于type`,
        code: `<div class="api-code">// 1、直接使用默认按钮 2、自定义了删除按钮的式样 3、自定义操作按钮
toolbarBtn: ["add", "edit", "del", "cancel", "refresh", "save", "separator",
                  {type: "del", text: "删除内容"},
                  {btnType: "primary", text: "自定义", icon: "el-icon-top", onClick: () => {}}]</div>`
      }
    ]
    const gridAttrData_common = [
      {
        group: '通用',
        name: 'columns',
        type: '数组',
        default: '',
        memo: '参考【列属性】标签页'
      }, {
        name: 'fit',
        type: '布尔',
        default: 'true',
        memo: '列的宽度是否自动撑开。true自动撑开，false固定宽度。',
        code: '<span class="api-code">fit: false，// 列固定宽度</span>'
      }, {
        name: 'multiSelect',
        type: '布尔',
        default: 'true',
        memo: '是否多选。true多选，false单选。',
        code: '<span class="api-code">multiSelect: false，// 单选</span>'
      }, {
        name: 'pagination',
        type: '对象',
        default: '见描述',
        memo: `分页信息：<br>
                    默认值：{currentPage:1,pageSizes:[30,60,90],pageSize:30,layout:"total, sizes, prev, pager, next, jumper"}<br>
                    currentPage:数字，当前页<br>
                    pageSizes:数组，每页条数下拉选择<br>
                    pageSize:数字，每页条数。通常等于pageSizes的第一项<br>
                    layout:字符串，分页布局。逗号拼接，可调整顺序，可选值参考默认值内容。<br>`,
        code: '<span class="api-code">// 每页可选为100、200、300<br>pagination: {pageSizes: [100, 200, 300],pageSize: 100}</span>'
      }, {
            name: 'showPagination',
            type: '布尔',
            default: 'true',
            memo: `是否显示分页<br>注: 不显示分页时，pageSize自动设为0，后台分页工具类不会进行分页处理。`,
            code: '<span class="api-code">showPagination: false,</span>'
        }, {
        name: 'addDefaultObj',
        type: '对象/方法',
        default: '无',
        memo: '添加行时对象的默认值。<br>一对象：默认值。<br>二、方法：()方法返回默认值<br><span class="api-memo">注：和列的addDefaultValue效果相同，主要处理页面不需要显示的字段的默认值。</span>',
        code: '<span class="api-code">// 1、对象形式：添加行的fdDeleted默认为0 <br>addDefaultObj: {fdDeleted:0}' +
                    '<br>// 2、方法形式：动态返回添加行的默认值 <br>addDefaultObj: () => { return {fdDeleted:0} }</span>'
      }
    ]
    const gridAttrData_col = [
      {
        group: '列相关',
        name: 'showSelection',
        type: '布尔',
        default: 'true',
        memo: '显示左侧选择列。true显示，false不显示。',
        code: '<span class="api-code">showSelection: false，// 不显示选择列</span>'
      }, {
        name: 'reserveSelection',
        type: '布尔',
        default: 'true',
        memo: '重新加载数据后，保留选中行。如：刷新时。<br><span class="api-memo">注：必须定义正确的rowKey</span>',
        code: '<span class="api-code">reserveSelection: false，// 不保留选中行</span>'
      }, {
        name: 'showIndex',
        type: '布尔',
        default: 'true',
        memo: '显示编号列。true显示，false不显示。<br><span class="api-memo">注：自动生成编号dataIdx</span>',
        code: '<span class="api-code">showIndex: false，// 不显示编号</span>'
      }, {
        name: 'indexWidth',
        type: '数字',
        default: '40',
        memo: '编号列的宽度<br><span class="api-memo">注：树形结构通常需要使用到该属性</span>',
        code: '<span class="api-code">indexWidth: 50，// 编号列自定义宽度</span>'
      }, {
        name: 'indexAlign',
        type: '字符串',
        default: 'center',
        memo: '编号列对齐方式。可选值【left、center、right】',
        code: '<span class="api-code">indexAlign: "left"，// 编号列做对齐</span>'
      }
    ]
    const gridAttrData_style = [
      {
        group: '式样',
        name: 'rowStyle',
        type: '方法/对象',
        default: '',
        memo: '1、对象：为所有行固定的style<br>' +
                    '2、方法：返回行的style的回调方法。Function({row, rowIndex})<br>',
        code: `<div class="api-code">// 奇数行、偶数行的背景色不同
rowStyle: (param) => {
    if (param.rowIndex % 2 == 0) {
        return {backgroundColor: '#3A71A8';}
    } else {
        return {backgroundColor: '#3a835d';}
    }},</div>`
      }, {
        name: 'rowClassName',
        type: '方法/字符串',
        default: '',
        memo: '1、字符串：为所有行固定的className<br>' +
                    '2、方法：返回行的className的回调方法。Function({row, rowIndex})<br>' +
                    '<span class="api-memo">注：必须是全局的class，注意全局变量的污染。</span>',
        code: `<div class="api-code">// 奇数行、偶数行的背景色不同
rowClassName: (param) => {
    if (param.rowIndex % 2 == 0) {
        return "table-row-bg1"
    } else {
        return "table-row-bg2"
    }}
2、全局的class，不能添加scope
<style>
    .el-table .table-row-bg1 {background-color: white;}
</style></div>`
      }, {
        name: 'cellStyle',
        type: '方法/对象',
        default: '',
        memo: '1、对象：为所有单元格固定的style<br>' +
                    '2、方法：返回单元格的style的回调方法。Function({row, rowIndex})<br>',
        code: `<div class="api-code">// 名称列，名字为张三的定义背景色
cellStyle: (param) => {
    if (param.column.property == 'name' && param.row.name == "张三") {
        return {
            backgroundColor: '#3a835d'
        }
    }}
</div>`
      }, {
        name: 'cellClassName',
        type: '方法/字符串',
        default: '',
        memo: '1、字符串：为单元格固定的className<br>' +
                    '2、方法：返回单元格的className的回调方法。Function({row, column, rowIndex, columnIndex})<br>' +
                    '<span class="api-memo">注：必须是全局的class，注意全局变量的污染。</span>',
        code: `<div class="api-code"> // 1、定义cell的class
cellClassName: (param) => {
    return 'cell-test'
}
2、全局的class，不能添加scope
<style>
    .el-table .cell-test {background-color: white;}
</style>
</div>`
      }, {
        name: 'border',
        type: '布尔',
        default: 'true',
        memo: '显示表格边框。true显示，false不显示<br>' +
                    '<span class="api-memo"></span>',
        code: `<div class="api-code"></div>`
      }, {
        name: 'stripe',
        type: '布尔',
        default: 'false',
        memo: '带斑马纹的表格。true显示，false不显示<br>' +
                    '<span class="api-memo"></span>',
        code: `<div class="api-code"></div>`
      }, {
        name: 'highlightCurrentRow',
        type: '布尔',
        default: 'true',
        memo: '高亮当前click的行。true高亮背景，false不高亮。<br>' +
                    '<span class="api-memo"></span>',
        code: `<div class="api-code"></div>`
      }
    ]
    const gridAttrData_tree = [
      {
        group: '树形结构',
        name: 'rowParentKey',
        type: '字符串',
        default: '',
        memo: '行数据对应父节点Key。存在rowParentKey则为树形结构。<br>树形结构时：rowParentKey、rowKey两个必填。',
        code: `<div class="api-code">rowParentKey: "parentId" // 父节点id</div>`
      }, {
        name: 'defaultExpandAll',
        type: '布尔',
        default: 'false',
        memo: '是否默认展开所有行，当 Table 包含展开行存在或者为树形表格时有效',
        code: `<div class="api-code">defaultExpandAll: true,// 默认展开行</div>`
      }, {
        name: 'rowChildren',
        type: '字符串',
        default: 'apTableChildren',
        memo: '默认子节点数组。通常不用配置。',
        code: `<div class="api-code"></div>`
      }
    ]
    const gridAttrData_other = [
      {
        group: '不常用',
        name: 'spanMethod',
        type: '方法',
        default: '',
        memo: '合并行或列，function(param)。返回 对象{rowspan: 2,colspan: 1}。',
        code: `<div class="api-code"></div>`
      }, {
        name: 'showSummary',
        type: '布尔',
        default: 'false',
        memo: '是否在表尾显示合计行',
        code: `<div class="api-code"></div>`
      }, {
        name: 'summaryMethod',
        type: '方法',
        default: 'false',
        memo: '自定义的合计计算方法，function(param)。返回数组，这个数组中的各项就会显示在合计行的各列中。<br><span class="api-memo">注：合计行不能跨列</span>',
        code: `<div class="api-code"></div>`
      }
    ]
    const gridAttrData_all = gridAttrData_data
      .concat(gridAttrData_toolbar)
      .concat(gridAttrData_common)
      .concat(gridAttrData_col)
      .concat(gridAttrData_style)
      .concat(gridAttrData_tree)
      .concat(gridAttrData_other)

    const eventCols = gridAttrCols
    const eventData_callback = [
      {
        group: '回调',
        name: 'beforeLoadData',
        type: '方法',
        default: '',
        memo: '数据加载前：参数opts：表格参数',
        code: `<span class="api-code"></span>`
      }, {
        name: 'afterLoadData',
        type: '方法',
        default: '',
        memo: '数据加载完成：参数opts：表格参数<br><span class="api-memo">注：此时dom更新可能未完成，如果需要dom更新完成，使用afterAll回调。</span>',
        code: `<span class="api-code"></span>`
      }, {
        name: 'afterAll',
        type: '方法',
        default: '',
        memo: '数据加载完成，且dom更新完成。参数opts：表格参数',
        code: `<span class="api-code"></span>`
      }, {
        name: 'beforeAdd',
        type: '方法',
        default: '',
        memo: '数据添加前：参数opts：表格参数。返回false取消添加。',
        code: `<span class="api-code">beforeAdd:(opts)=>{ return false;}</span>`
      }, {
        name: 'beforeEdit',
        type: '方法',
        default: '',
        memo: '数据编辑前：参数opts：表格参数, selectRows：选择编辑的行。返回false取消编辑。',
        code: `<span class="api-code">beforeEdit:(opts, selectRows)=>{ return false;}</span>`
      }, {
        name: 'beforeSave',
        type: '方法',
        default: '',
        memo: '数据保存前：参数opts：表格参数。返回false取消保存。',
        code: `<span class="api-code"></span>`
      }, {
        name: 'afterSave',
        type: '方法',
        default: '',
        memo: '数据保存后：参数opts：表格参数, response:后台返回值',
        code: `<span class="api-code"></span>`
      }, {
        name: 'beforeDelete',
        type: '方法',
        default: '',
        memo: '数据删除前：参数opts：表格参数, selectRows：选择删除的行包括新添加得数据。返回false取消保存。',
        code: `<span class="api-code"></span>`
      }, {
        name: 'afterDelete',
        type: '方法',
        default: '',
        memo: '数据删除后：参数opts：表格参数, response:后台返回值',
        code: `<span class="api-code"></span>`
      }, {
        name: 'refreshAfterSave',
        type: '布尔',
        default: 'true',
        memo: '保存成功后是否刷新：true刷新、false不刷新',
        code: `<span class="api-code"></span>`
      }, {
        name: 'refreshAfterDelete',
        type: '布尔',
        default: 'false',
        memo: '删除成功后是否刷新：true刷新、false不刷新',
        code: `<span class="api-code"></span>`
      }]
    const eventData_event = [
      {
        group: '事件',
        name: 'selectionChangeEvent',
        type: '方法',
        default: '',
        memo: '选中行发生变化时触发。参数：selection，选中行数组',
        code: `<span class="api-code">selectionChangeEvent: (selection) => {console.log(selection);}</span>`
      }, {
        name: 'rowClickEvent',
        type: '方法',
        default: '',
        memo: '行单击事件，参数：row, column, event',
        code: `<span class="api-code"></span>`
      }, {
        name: 'rowDblClickEvent',
        type: '方法',
        default: '',
        memo: '行双击事件，参数：row, column, event',
        code: `<span class="api-code"></span>`
      }, {
        name: 'cellClickEvent',
        type: '方法',
        default: '',
        memo: '单元格单击事件，参数：row, column, cell, event',
        code: `<span class="api-code"></span>`
      }, {
        name: 'cellDblClickEvent',
        type: '方法',
        default: '',
        memo: '单元格双击事件，参数：row, column, cell, event',
        code: `<span class="api-code"></span>`
      }]
    const eventData_all = eventData_callback
      .concat(eventData_event)

    const colAttrCols = [
      { label: '分类', prop: 'group', width: '120px' },
      { label: '名称', prop: 'name', width: '170px' },
      { label: '类型', prop: 'type', width: '100px' },
      { label: '默认值', prop: 'default', width: '80px' },
      { label: '描述', prop: 'memo', minWidth: '100px' },
      { label: '示例代码', prop: 'code', minWidth: '100px' }
    ]
    const colAttrData_base = [
      {
        group: '通用：常规',
        name: 'label',
        type: '字符串',
        default: '',
        memo: '显示的标题',
        code: '<span class="api-code">label: "名称"，</span>'
      },{
            name: 'help',
            type: '字符串',
            default: '',
            memo: '提示信息',
            code: `<span class="api-code">help: "这是提示信息" <br> help: "&lt;div style='color:red'>这是标题提示&lt;/div>", </span>`
        }, {
        name: 'prop',
        type: '字符串',
        default: '',
        memo: '对应列内容的字段名<br><span class="api-memo">注：不能包含框架使用属性：isAdd、isEdit、changeArr、dataIdx、hasError。</span>',
        code: '<span class="api-code">prop: "name"，</span>'
      }, {
        name: 'type',
        type: '字符串',
        default: '',
        memo: '列类型，参见【type说明】'
      }, {
        name: 'rules',
        type: '数组',
        default: '',
        memo: '校验规则<br><span class="api-memo">注：通用参考【element的表单校验】</span>',
        code: `<div class="api-code">// 名称必填，长度限制
rules: [ {required: true, message: "请输入名称", trigger: "blur"},
             {min: 1, max: 10, message: "长度在 1 到 10 个字符", trigger: "blur"} ]</div>`
      }, {
        name: 'addDefaultValue',
        type: '字符串、数字/方法',
        default: '',
        memo: '添加数据时默认值设定<br>一、字符串、数字：默认值。<br>二、方法：()方法返回默认值',
        code: `<div class="api-code">1、字符串、数字：设定添加行默认值
addDefaultValue: 1,
addDefaultValue: "默认名字",
2、方法：动态返回默认值
addDefaultValue: () => {return "value";}</div>`
      }, {
        name: 'children',
        type: '数组',
        default: '',
        memo: '多级表头。子元素同columns。<br><span class="api-memo">注：目前只支持二级表头，第一层表头只有label属性可用。</span>',
        code: `<span class="api-code"> // 多级表头
{ label: "时间日期",
  children: [{prop: "time",label: "时间",type: "input"},{prop: "date",label: "日期",type: "input"}]}</span>`
      }, {
        name: 'add',
        type: '布尔/方法',
        default: 'true',
        memo: '允许该列添加数据<br>一、布尔：true允许添加，false不允许添加。<br>二、方法：()方法返回布尔值。返回true允许添加，false不允许添加。',
        code: `<div class="api-code">1、布尔值：不允许添加
add: false,
2、方法：动态判断是否可以添加
add: () => {return true;}</div>`
      }, {
        name: 'edit',
        type: '布尔/方法',
        default: 'true',
        memo: '允许该列编辑数据<br>一、布尔：true允许编辑，false不允许编辑。<br>二、方法：参数：(row)&nbsp;&nbsp;&nbsp; row:行数据<br>方法返回布尔值。返回true允许编辑，false不允许编辑。',
        code: `<div class="api-code">1、布尔值：不允许编辑
edit: false,
2、方法：动态判断是否可以编辑
edit: (rowData) => {return true;}</div>`
      }, {
        name: 'hide',
        type: '布尔',
        default: 'false',
        memo: '隐藏列<br>true隐藏，false显示',
        code: '<span class="api-code">// 隐藏列<br> hide:true</span>'
      }, {
        name: 'sortable',
        type: '布尔/字符串',
        default: 'false',
        memo: '是否可以排序。true可排序，false不可排序，local前端排序。<br><span class="api-memo">注1：不支持多列同时排序<br>注2：local时为前端排序，不会请求后台数据</span>',
        code: `<span class="api-code">sortable: true,// 支持排序</span>`
      }, {
        group: '通用：式样',
        name: 'width',
        type: '字符串',
        default: '80',
        memo: '列的宽度(固定)。格式："数字"或"数字px"<br><span class="api-memo">注：1、表格fit为true时,未定义宽度的列会均分剩余空间。页面宽度不足时，出现滚动条。<br>2、推荐直接使用minWidth。</span>',
        code: '<span class="api-code">width:"100px"<br> width:"100"</span>'
      }, {
        name: 'minWidth',
        type: '字符串',
        default: '80',
        memo: '列的最小宽度。格式："数字"或"数字px"<br><span class="api-memo">注：minWidth会把剩余宽度按比例分配给设置了 min-width 的列。</span>',
        code: '<span class="api-code">minWidth:"100px"<br> minWidth:"100"</span>'
      }, {
        name: 'align',
        type: '字符串',
        default: 'left',
        memo: '列对齐方式：left、center、right',
        code: '<span class="api-code">align:"center" // 居中对齐</span>'
      }, {
        name: 'headerAlign',
        type: '字符串',
        default: 'center',
        memo: '表头对齐方式：left、center、right',
        code: `<span class="api-code">headerAlign: "left",// 表头左对齐</span>`
      }, {
        name: 'fixed',
        type: '字符串/布尔',
        default: 'false',
        memo: '列是否固定在左侧或者右侧：true、left或false、right。true表示固定在左侧',
        code: `<span class="api-code">fixed: "left",// 列左侧固定</span>`
      }, {
        name: 'resizable',
        type: '布尔',
        default: 'true',
        memo: '是否拖动改变宽度。true可拖动，false不可拖动。',
        code: `<span class="api-code">resizable: false,// 列宽不能拖动</span>`
      }, {
        group: '通用：显示渲染',
        name: 'renderHeader',
        type: '方法',
        default: '',
        memo: '参数：(h, param)或(h, {column, $index })<br>列标题自定义渲染',
        code: `<span class="api-code"></span>`
      }, {
        name: 'showOverflowTooltip',
        type: '布尔',
        default: 'false',
        memo: '内容过长超过列宽隐藏。鼠标hover显示tooltip。<br> true显示，false不显示。<br><span class="api-memo">注：有效解决内容太长，产生行自动换行问题。</span>',
        code: `<span class="api-code">showOverflowTooltip: true,// 内容超出隐藏</span>`
      }, {
        name: 'html',
        type: '方法',
        default: '',
        memo: '列渲染为html。参数：(value:列对应值, row:行数据)<br><span class="api-memo">注：1、只能使用html标签，vue或element组件无效。<br>2、定义了html，那么renderHtml无效。</span>',
        code: '<span class="api-code">html: function (value, row) { return value;}</span>'
      }, {
        name: 'renderKey',
        type: '对象',
        default: '',
        memo: '键值映射。如：将typeId，映射为typeId对应的Name。<br><span class="api-memo">注：1、需要映射时，必填。<br>2、当前row的prop，会被自动设为label对应的文本。</span>',
        code: '<span class="api-code"> renderKey: {label: "key", value: "value", key: "fdTypeId"}</span>'
      }, {
        name: 'renderOptions',
        type: '数组',
        default: '',
        memo: '键值映射，对应的数组。',
        code: '<span class="api-code">renderOptions: [{key: 1, value: "哈哈哈"},{id:2, name: "呵呵呵"}],</span>'
      }, {
        name: 'renderOptionsRemote',
        type: '方法',
        default: '',
        memo: '键值映射，对应的数组。后台传递list。<br><span class="api-memo">参考【selectOptionsRemote】</span>',
        code: '<span class="api-code">renderOptionsRemote: "dicList",</span>'
      }, {
        name: 'renderHtml',
        type: '方法',
        default: '',
        memo: '键值映射，对应值的渲染。<span class="api-memo"></span>',
        code: '<span class="api-code">renderHtml: (value, text, row) => {\n' +
                    '   return \'&lt;span style="color: red;"&gt; \' +  text+ \'&lt;/span&gt;\';\n' +
                    '}</span>'
      }
    ]
    const colAttrData_input = [{
      group: '类型:input',
      name: '',
      type: '',
      default: '',
      memo: ''
    }]
    const colAttrData_inputNumber = [
      {
        group: '类型:inputNumber',
        name: 'inputNumberMin',
        type: '数字',
        default: '0',
        memo: '最小值',
        code: `<span class="api-code">inputNumberMin: 1,// 最小值1</span>`
      }, {
        name: 'inputNumberMax',
        type: '数字',
        default: '0',
        memo: '最大值',
        code: `<span class="api-code">inputNumberMax: 10,// 最大值10</span>`
      }]
    const colAttrData_slot = [
      {
        group: '类型:slot',
        name: 'slot',
        type: '数字',
        default: '0',
        memo: '自定义内容<br><span class="api-memo">注：只读和编辑时，都是slot内容，可以使用row.isEdit、row.isAdd判断状态。</span>',
        code: `<div class="api-code">1、ap-table组件下定义插槽
&lt;ap-table :options.sync="tableOpt"&gt;
    &lt;template #sex="slotProps"&gt;
        &lt;el-tag type="success"&gt;{{slotProps.rowData.sex}}&lt;/el-tag&gt;
    &lt;/template&gt;
&lt;/ap-table&gt;
2、column列指定slot
{ prop: "sex", label: "性别", type: "slot", slot: "sex"}</div>`
      }]
    const colAttrData_select = [
      {
        group: '类型:select',
        name: 'selectOptions',
        type: '数组',
        default: '',
        memo: '下拉框的下拉选项。格式：[{label:"", value:""},...]',
        code: `<span class="api-code">selectOptions:[{label:"男", value:"1"},{label:"女", value:"0"}]</span>`
      }, {
        name: 'selectOptionsKey',
        type: '对象',
        default: '{label:"label", value:"value"}',
        memo: '下拉选型的键值对应关系。格式：{label:"显示值对应属性", value:"实际值对应属性"}',
        code: `<div class="api-code">1、selectOptions中的对象不是默认label/value形式
selectOptions:[{name:"tony", realName:"张三"},{name:"jay", realName:"李四"}]
2、selectOptionsKey指定对应的属性值
selectOptionsKey:{label:"name", value:"realName"}</div>`
      }, {
        name: 'selectOptionsRemote',
        type: '字符串',
        default: '',
        memo: '请求数据时后台返回对应的数组。<br><span class="api-memo">注：存在selectOptions或不是后台请求时，该设置无效。</span>',
        code: `<div class="api-code">1、后台查询PageResult设定attr
PageResult ps = ....; map.put("typeList", ...); ps.setAttr(map);
2、selectOptionsRemote指定下拉选项
selectOptionsRemote:typeList</div>`
      }, {
        name: 'selectHtml',
        type: '方法',
        default: '',
        memo: '列渲染为html。参数：(value:列对应值, text:文本值, row:行数据)<br>' +
                    '<span class="api-memo">注：只能使用html标签，vue或element组件无效。</span>',
        code: `<div class="api-code"> selectHtml:(value, text, row)=>{
    return '&lt;span&gt;' + text + '&lt;/span&gt;'
}</div>`
      }, {
        name: 'selectMultiple',
        type: '布尔',
        default: 'false',
        memo: '下拉多选。<br> true多选，false单选。',
        code: `<div class="api-code">selectMultiple:true // 多选</div>`
      }, {
        name: 'selectFilterable',
        type: '布尔',
        default: 'true',
        memo: '下拉搜索。<br> true可搜索，false不可搜索。',
        code: `<div class="api-code">selectFilterable:false // 不可搜索</div>`
      }, {
        name: 'selectPlaceholder',
        type: '字符串',
        default: '请选择',
        memo: '占位符',
        code: `<div class="api-code">selectPlaceholder:"请选择类型"</div>`
      }, {
        name: 'selectIsGroup',
        type: '布尔',
        default: 'false',
        memo: '是否分组。<br> true分组，false非分组。',
        code: `<div class="api-code"> 1、selectOptions分组选项
selectOptions: [ { label: "组1",
                         options: [{label: "张三", value: "zs"},{label: "李四", value: "ls"}]
                        },{ label: "组2",
                         options: [{label: "王五", value: "ww"},{label: "赵六", value: "zl"}]}]
2、设定为分组
selectIsGroup: true,</div>`
      }]
    const colAttrData_cascader = [
      {
        group: '类型:cascader',
        name: 'cascaderOptions',
        type: '数组',
        default: '',
        memo: '级联选项'
      }, {
        name: 'cascaderShowAllLevels',
        type: '布尔',
        default: 'false',
        memo: '完整路径'
      }]
    const colAttrData_expand = [
      {
        group: '类型:expand',
        name: 'expandSlot',
        type: '字符串',
        default: '',
        memo: '展开行，使用插槽',
        code: `<div class="api-code"> 1、ap-table组件下定义插槽
&lt;template #test="expandProps"&gt;
   {{expandProps.rowData.sex}}
&lt;/template&gt;
2、展开行的列指定插槽
{label: "展开",type: "expand",expand: "test"}</div>`
      }]
    const colAttrData_search = [
      {
        group: '类型:search',
        name: 'searchTitle',
        type: '字符串',
        default: '查找',
        memo: '弹出框标题',
        code: `<div class="api-code">searchTitle:"请选择"</div>`
      }, {
        name: 'searchWidth',
        type: '字符串',
        default: '500px',
        memo: '弹出框宽度。字符串，百分比或者px',
        code: `<div class="api-code">searchWidth:"300px"</div>`
      }, {
        name: 'searchConfirm',
        type: '方法',
        default: '',
        memo: '点击确定回调。参数：row。返回true关闭dialog。',
        code: `<div class="api-code"></div>`
      }, {
        name: 'searchClear',
        type: '方法',
        default: '',
        memo: '点击清空回调。参数：row。返回true关闭dialog。',
        code: ``
      }, {
        name: 'searchSlot',
        type: '字符串',
        default: '',
        memo: '弹出框插槽',
        code: `<div class="api-code">1、ap-table组件下定义插槽
&lt;ap-table ...&gt;
	&lt;template #searchSlotName="searchProps"&gt;
		&lt;el-input v-model="searchDialogInput" placeholder="请输入内容"&gt;&lt;/el-input&gt;
	&lt;/template&gt;
&lt;/ap-table&gt;
2、列指定插槽、定义确定/取消回调方法
{
    prop: "mail", label: "邮箱", type: "search",
    searchSlot: 'searchSlotName',
    searchConfirm: (row) => { row.mail = this.searchDialogInput;},
    searchClear:(row) => { row.mail = '';}
}</div>`
      }]
    const colAttrData_searchTable = [
      {
        group: '类型:searchTable',
        name: 'searchTableTitle',
        type: '字符串',
        default: '查找',
        memo: '弹出框标题',
        code: `<div class="api-code">searchTable:"请选择"</div>`
      }, {
        name: 'searchTableWidth',
        type: '字符串',
        default: '500px',
        memo: '弹出框宽度。字符串，百分比或者px',
        code: `<div class="api-code">searchTableWidth:"300px"</div>`
      }, {
        name: 'searchTableHeight',
        type: '字符串',
        default: '400px',
        memo: '表格得高度。',
        code: `<div class="api-code"></div>`
      }, {
        name: 'searchTableOpt',
        type: '对象',
        default: '',
        memo: '表格参数，同表格组件',
        code: `<div class="api-code"></div>`
      }, {
            name: 'searchTableShowParam',
            type: '布尔',
            default: 'false',
            memo: '表格顶部显示搜索框',
            code: `searchTableShowParam: true,`
        }, {
            name: 'searchTableParamPlaceholder',
            type: '字符串',
            default: '关键字过滤，回车搜索',
            memo: '表格顶部显示搜索框，占位符',
            code: `searchTableParamPlaceholder: "模糊匹配，回车搜索",`
        }, {
            name: 'searchTableParamKey',
            type: '字符串',
            default: 'likeStr',
            memo: '表格顶部搜索框，查询参数名称。注：自动带到后台controller的查询参数',
            code: `searchTableParamKey: "name",`
        }, {
        name: 'searchTableLoadTime',
        type: '字符串',
        default: 'edit',
        memo: '数据加载时间。<br>edit：添加或编辑行时，第一次点击加载一次。click：每次点击按钮时，都会重新加载',
        code: `<div class="api-code"> searchTableLoadTime: "click",</div>`
      }, {
        name: 'searchTableBeforeClick',
        type: '方法',
        default: '',
        memo: '点击打开dialog前调用。<br>参数：row。返回true，打开dialog。返回false，不打开。',
        code: `<div class="api-code">searchTableBeforeClick: (row) => {
    return true;
}</div>`
      }, {
        name: 'searchTableClear',
        type: '方法',
        default: '',
        memo: '点击清空回调。参数：row。返回true关闭dialog。',
        code: `<div class="api-code"></div>`
      }, {
        name: 'searchTableConfirm',
        type: '方法',
        default: '',
        memo: '点击确定回调。参数：row, selectedRows。返回true关闭dialog。',
        code: `<div class="api-code">// searchTable示例
{
    prop: "fdName",
    label: "组织名称",
    type: "searchTable",
    searchTableOpt: {
        columns: [{prop: "fdName",label: "名称",type: "input",}],
        dataUrl: "/xxx",
        method: "POST",
        multiSelect: false,
        initData: true,
    },
    searchTableConfirm: (row, selectedRow) => { return true;},
    searchTableClear: (row) => { return true;},
}</div>`
      }]
    const colAttrData_searchTree = [
      {
        group: '类型:searchTree',
        name: 'searchTreeTitle',
        type: '字符串',
        default: '查找',
        memo: '弹出框标题',
        code: `<div class="api-code">searchTreeTitle:"请选择"</div>`
      }, {
        name: 'searchTreeWidth',
        type: '字符串',
        default: '400px',
        memo: '弹出框宽度。百分比或者px。',
        code: `<div class="api-code"></div>`
      }, {
        name: 'searchTreeHeight',
        type: '字符串',
        default: '400px',
        memo: '树容器的高度。百分比或者px。',
        code: `<div class="api-code"></div>`
      }, {
        name: 'searchTreeKey',
        type: '对象',
        default: '见描述',
        memo: '默认：{idKey:"fdId",parentKey:"fdParentId", labelKey:"fdName"}<br>结果集映射关系。labelKey：显示内容。',
        code: `<div class="api-code"></div>`
      }, {
        name: 'searchTreeRenderKey',
        type: '对象',
        default: '',
        memo: '不为空时，列的显示值将渲染树组件的值。<br>参数：idKey, labelKey。<br>' +
                    '1、idKey：必填。<span class="api-memo">注：匹配方式 -> 行数据[searchTreeRenderKey.idKey] = 树[searchTreeKey.idKey]</span><br>' +
                    '2、labelKey：列的显示值对应树的data的属性。默认为searchTreeKey.labelKey的值。<br>' +
                    '<span class="api-memo">注：searchTreeLoadTime为init时有效</span>',
        code: `<div class="api-code">// 后台传部门id，前端显示为部门全称
{
    prop: 'fdOrgName',
    label: '部门名称',
    type: "searchTree",
    searchTreeUrl: "/xxx",
    searchTreeRenderKey: {idKey:"fdOrgId", labelKey:"fdFullName"},
    searchTreeConfirm: (row, checkedNodes) => {
        row.fdOrgId =checkedNodes[0].fdId;
        row.fdOrgName =checkedNodes[0].fdName;
        return true;
    },
    searchTreeClear: (row) => {
        return true;
    },
}</div>`
      }, {
        name: 'searchTreeUrl',
        type: '字符串',
        default: '',
        memo: '数据请求路径。返回response.data',
        code: `<div class="api-code"></div>`
      }, {
        name: 'searchTreeParams',
        type: '对象/方法',
        default: '',
        memo: '数据请求的参数。 <br>方法时参数：row, col。表格行的数据对象、列属性。',
        code: `<div class="api-code">1、固定参数：定义对象
searchTreeParams: { type: 123}
2、动态参数：使用箭头函数
searchTreeParams: (row, col) => {
    return { type: this.typeId}
}</div>`
      }, {
        name: 'searchTreeLoadTime',
        type: '字符串',
        default: 'init',
        memo: '数据加载时间。<br>init：表格初始化是加载。edit：添加或编辑行时加载一次。click：每次点击按钮时，都会重新加载',
        code: `<div class="api-code"> searchTreeLoadTime: "click",</div>`
      }, {
        name: 'searchTreeMethod',
        type: '字符串',
        default: 'post',
        memo: '数据请求method。get或post',
        code: `<div class="api-code"></div>`
      }, {
        name: 'searchTreeSelectMultiple',
        type: '布尔',
        default: 'false',
        memo: '是否多选，默认单选。',
        code: `<div class="api-code"></div>`
      }, {
        name: 'searchTreeExpandAll',
        type: '布尔',
        default: 'true',
        memo: '是否展开树，默认展开。<br><span class="api-memo">注：数据量大时，默认展开会导致页面卡顿。</span>',
        code: `<div class="api-code"></div>`
      }, {
        name: 'searchTreeCheckStrictly',
        type: '布尔',
        default: 'true',
        memo: '是否严格的遵循父子不互相关联的做法',
        code: `<div class="api-code"></div>`
      }, {
        name: 'searchTreeDefaultCheckedKeys',
        type: '数组/方法',
        default: '[]',
        memo: '点击打开dialog，默认选中节点id。<br>方法参数：row。',
        code: `<div class="api-code">1、固定参数：定义数组
searchTreeDefaultCheckedKeys: ["xxx"],
2、动态参数：使用箭头函数
searchTreeDefaultCheckedKeys:(row) =>{
    return ["xxx"];
}</div>`
      }, {
        name: 'searchTreeBeforeClick',
        type: '方法',
        default: '',
        memo: '点击打开dialog前调用。<br>参数：row。返回true，打开dialog。返回false，不打开。',
        code: `<div class="api-code">searchTreeBeforeClick: (row) => {
    return true;
}</div>`
      }, {
        name: 'searchTreeClear',
        type: '方法',
        default: '',
        memo: '点击清空回调。参数：row。返回true关闭dialog。',
        code: `<div class="api-code"></div>`
      }, {
        name: 'searchTreeConfirm',
        type: '方法',
        default: '',
        memo: '点击确定回调。参数：row, selectedRows。返回true关闭dialog。',
        code: `<div class="api-code">// searchTree 示例：
{
    prop: "mail",
    label: "邮箱",
    type: "searchTree",
    searchTreeUrl: "/xxxxx",
    searchTreeConfirm: (row, checkedNodes) => {return true;},
    searchTreeClear:(row) => {return true;},
}
</div>`
      }]
    const colAttrData_searchPicker = [
      {
        group: '类型:searchPicker',
        name: 'searchPickerTitle',
        type: '字符串',
        default: '查找',
        memo: '弹出框标题',
        code: `<div class="api-code">searchPickerTitle:"请选择"</div>`
      }, {
        name: 'searchPickerWidth',
        type: '字符串',
        default: '800px',
        memo: '弹出框宽度。百分比或者px。',
        code: `<div class="api-code"></div>`
      }, {
        name: 'searchPickerHeight',
        type: '字符串',
        default: '400px',
        memo: '树容器的高度。百分比或者px。',
        code: `<div class="api-code"></div>`
      }, {
        name: 'searchPickerKey',
        type: '对象',
        default: '见描述',
        memo: '默认：{idKey:"fdId",parentKey:"fdParentId", labelKey:"fdName"}<br>左侧树：结果集映射关系。labelKey：显示内容。',
        code: `<div class="api-code"></div>`
      }, {
        name: 'searchPickerUrl',
        type: '字符串',
        default: '',
        memo: '左侧树：数据请求路径。返回response.data',
        code: `<div class="api-code"></div>`
      }, {
        name: 'searchPickerParams',
        type: '对象/方法',
        default: '',
        memo: '左侧树：数据请求的参数。 <br>方法时参数：row, col。表格行的数据对象、列属性。',
        code: `<div class="api-code">1、固定参数：定义对象
searchPickerParams: { type: 123}
2、动态参数：使用箭头函数
searchPickerParams: (row, col) => {
    return { type: this.typeId}
}</div>`
      }, {
        name: 'searchPickerLoadTime',
        type: '字符串',
        default: 'init',
        memo: '数据加载时间。<br>init：表格初始化是加载。edit：添加或编辑行时加载一次。click：每次点击按钮时，都会重新加载',
        code: `<div class="api-code"> searchPickerLoadTime: "click",</div>`
      }, {
        name: 'searchPickerMethod',
        type: '字符串',
        default: 'post',
        memo: '左侧树：数据请求method。get或post',
        code: `<div class="api-code"></div>`
      }, {
        name: 'searchPickerExpandAll',
        type: '布尔',
        default: 'true',
        memo: '左侧树：是否展开树，默认展开。<br><span class="api-memo">注：数据量大时，默认展开会导致页面卡顿。</span>',
        code: `<div class="api-code"></div>`
      }, {
        name: 'searchPickerSelectMultipleMain',
        type: '布尔',
        default: 'false',
        memo: '右侧列表：是否多选，默认单选。',
        code: `<div class="api-code"></div>`
      }, {
        name: 'searchPickerKeyMain',
        type: '对象',
        default: '见描述',
        memo: '默认：{idKey:"fdId",parentKey:"fdParentId", labelKey:"fdName"}<br>右侧列表：结果集映射关系。labelKey：显示内容。',
        code: `<div class="api-code"></div>`
      }, {
        name: 'searchPickerUrlMain',
        type: '字符串',
        default: '',
        memo: '右侧列表：数据请求路径。返回response.data',
        code: `<div class="api-code"></div>`
      }, {
        name: 'searchPickerParamsMain',
        type: '对象/方法',
        default: '见描述',
        memo: '右列表：数据请求的参数。不设定默认为左侧选中节点的对象。<br>方法时参数：row, col，selectedNode。表格行的数据对象、列属性、选中左侧节点。',
        code: `<div class="api-code">1、固定参数：定义对象
searchPickerParamsMain: { type: 123}
2、动态参数：使用箭头函数
searchPickerParamsMain: (row, col, selectedNode) => {
    return { type: this.typeId}
}</div>`
      }, {
        name: 'searchPickerMethodMain',
        type: '字符串',
        default: 'post',
        memo: '右侧列表：数据请求method。get或post',
        code: `<div class="api-code"></div>`
      }, {
        name: 'searchPickerBeforeClick',
        type: '方法',
        default: '',
        memo: '点击打开dialog前调用。<br>参数：row。返回true，打开dialog。返回false，不打开。',
        code: `<div class="api-code">searchPickerBeforeClick: (row) => {
    return true;
}</div>`
      }, {
        name: 'searchPickerClear',
        type: '方法',
        default: '',
        memo: '点击清空回调。参数：row。返回true关闭dialog。',
        code: `<div class="api-code"></div>`
      }, {
        name: 'searchPickerConfirm',
        type: '方法',
        default: '',
        memo: '点击确定回调。参数：row, selectedRows。返回true关闭dialog。',
        code: `<div class="api-code">// searchPicker 示例：
 {
    prop: 'fdTypeName',
    label: '类型',
    type: "searchPicker",
    searchPickerUrl: "/xxx",
    searchPickerUrlMain: "/xxx",
    searchPickerRenderKey: {idKey:"fdTypeId"},
    searchPickerSelectMultipleMain: true,
    searchPickerConfirm: (row, selectedRows) => {
        row.fdTypeId = selectedRows[0].fdId;
        row.fdTypeName = selectedRows[0].fdName;
        return true;
    },
    searchPickerClear: (row) => {
        return true;
    },
}
</div>`
      }]
    const colAttrData_datePicker = [
      {
        group: '类型:datePicker',
        name: 'datePickerType',
        type: '字符串',
        default: 'date',
        memo: '日期时间显示类型。year/month/date/time/datetime。<br><span class="api-memo">注：time->只有时分秒。datetime->日期时间</span>',
        code: `<div class="api-code">datePickerType:"time" // 时分秒选择</div>`
      }, {
        name: 'datePickerValueFormat',
        type: '字符串',
        default: 'timestamp',
        memo: '日期时间和后台交互实际格式。<br><span class="api-memo">注：年：yyyy，月：MM，日：dd，小时：HH，分：mm，秒：ss。时间戳：timestamp</span>',
        code: `<div class="api-code">datePickerValueFormat: 'yyyy-MM-dd HH:mm:ss', // 年月日时分秒</div>`
      }, {
        name: 'datePickerPlaceholder',
        type: '字符串',
        default: '请选择日期',
        memo: '占位符',
        code: `<div class="api-code">datePickerPlaceholder: '请选择时间', // 选择时间</div>`
      }, {
        name: 'datePickerDefaultValue',
        type: '字符串/方法',
        default: '当前时间',
        memo: '选择器打开时默认显示的时间。字符串或function返回格式："2020-11-11"、"10:11:12"、"2020-11-11 11:12:13"。<br><span class="api-memo">注：格式必须是上述三种其中的一种</span>',
        code: `<div class="api-code">datePickerDefaultValue: '2020-11-11 11:12:13', // 默认时间</div>`
      }, {
        name: 'datePickerFormat',
        type: '字符串',
        default: 'yyyy-MM-dd',
        memo: '显示在输入框中的格式。<br><span class="api-memo">注：datePickerType不是time时有效</span>',
        code: `<div class="api-code"></div>`
      }, {
        name: 'datePickerSelectableRange',
        type: '字符串/数组',
        default: '',
        memo: '可选时间段。格式："18:30:00 - 20:30:00"或["09:30:00 - 12:00:00", "14:30:00 - 18:30:00"]<br><span class="api-memo">注：datePickerType为time时有效</span>',
        code: `<div class="api-code">datePickerSelectableRange:"18:30:00 - 20:30:00"</div>`
      }]
    const colAttrData_all = colAttrData_base
      .concat(colAttrData_input)
      .concat(colAttrData_inputNumber)
      .concat(colAttrData_slot)
      .concat(colAttrData_select)
      .concat(colAttrData_cascader)
      .concat(colAttrData_expand)
      .concat(colAttrData_search)
      .concat(colAttrData_searchTable)
      .concat(colAttrData_searchTree)
      .concat(colAttrData_searchPicker)
      .concat(colAttrData_datePicker)

    const methodCols = [
      { label: '分类', prop: 'group', width: '80px' },
      { label: '名称', prop: 'name', width: '200px' },
      { label: '描述', prop: 'memo', minWidth: '100px' },
      { label: '示例代码', prop: 'code', minWidth: '100px' }]
    const methodData_data = [
      {
        group: '请求数据',
        name: 'getData',
        memo: '获取当前页数据。<br>' +
                    '<span class="api-memo">注：1、等同于this.tableOpt.data。树形结构，则为返回树形结构数据。<br>2、可直接操作数据</span>',
        code: '<span class="api-code">this.$refs.tableRef.getData();</span>'
      }, {
        name: 'getDataWithArray',
        memo: '获取当前页数据。<br><span class="api-memo">注：1、适用于树形结构数据，树形结构数据会转换成数组形式返回。<br>2、可直接操作数据。</span>',
        code: '<span class="api-code">this.$refs.tableRef.getDataWithArray();</span>'
      }, {
        name: 'getAllData',
        memo: '获取所有数据。<br><span class="api-memo">注：1、返回列表形式的数据。<br>2、后台分页时，同getData()。<br>3、前端分页时，不可以直接操作数据。</span>',
        code: '<span class="api-code">this.$refs.tableRef.getAllData();</span>'
      }, {
        name: 'getSelection',
        memo: '获取选中行数据。',
        code: '<span class="api-code">this.$refs.tableRef.getSelection();</span>'
      }, {
        name: 'getSelectionKeys',
        memo: '获取选中行key。<br><span class="api-memo">注：1、返回key的数组<br>2、必须定义rowKey</span>',
        code: '<span class="api-code">this.$refs.tableRef.getSelectionKeys();</span>'
      }, {
        name: 'getAddRowList',
        memo: '获取添加行数据。<br><span class="api-memo">注：返回添加行的数组</span>',
        code: '<span class="api-code">this.$refs.tableRef.getAddRowList();</span>'
      }, {
        name: 'getEditRowList',
        memo: '获取编辑行数据。<br><span class="api-memo">注：返回编辑行的数组</span>',
        code: '<span class="api-code">this.$refs.tableRef.getEditRowList();</span>'
      }, {
        name: 'getSaveData',
        memo: '获取保存时的数据，json对象。<br><span class="api-memo">注：即为保存时传到后台的数据，添加行、编辑行、删除行。<br>deleteRemote为true时，不包括删除行。</span>',
        code: '<span class="api-code">this.$refs.tableRef.getSaveData();</span>'
      }, {
            name: 'getSaveDataStr',
            memo: '获取保存时的数据，json字符串（传给controller使用）。<br><span class="api-memo">注：同getSaveData方法</span>',
            code: '<span class="api-code">this.$refs.tableRef.getSaveDataStr();</span>'
        }, {
        name: 'getRow',
        memo: '根据rowKey获取对应的行数据。<br>' +
                    '参数：rowKey<br>' +
                    '<span class="api-memo">注：可直接操作数据。</span> ',
        code: '<span class="api-code">this.$refs.tableRef.getRow("id123")</span>'
      }]
    const methodData_operate = [
      {
        group: '操作',
        name: 'refresh',
        memo: '刷新表格数据<br><span class="api-memo">注：同点击刷新按钮。</span>',
        code: '<span class="api-code">this.$refs.tableRef.refresh();</span>'
      }, {
        name: 'reload',
        memo: '根据当前的options，重新渲染表格。<br>' +
                    '参数：boolean，是否加载数据。默认true，加载。<br>' +
                    '<span class="api-memo">注：适用于修改表格双向绑定不生效的参数（部分参数在表格created时，会有默认值覆盖的情况，导致双向绑定失效。如toolbarBtn）。</span>',
        code: '<span class="api-code">// 重载表格 <br>this.$refs.tableRef.reload();<br>' +
                    'this.$refs.tableRef.reload(false);</span>'
      }, {
            name: 'doSave',
            memo: '调用保存方法',
            code: '<span class="api-code">// 手动保存表格数据 <br>this.$refs.tableRef.doSave()</span>'
        }, {
        name: 'cancel',
        memo: '取消编辑。<br><span class="api-memo">注：同点击取消按钮</span>',
        code: '<span class="api-code">this.$refs.tableRef.cancel();</span>'
      }, {
        name: 'clear',
        memo: '清空表格数据。',
        code: '<span class="api-code">this.$refs.tableRef.clear();</span>'
      }, {
        name: 'clearSelected',
        memo: '清空选中数据。',
        code: '<span class="api-code">this.$refs.tableRef.clearSelected();</span>'
      }, {
            name: 'clearHighlight',
            memo: '清空高亮背景。',
            code: '<span class="api-code">this.$refs.tableRef.clearHighlight();</span>'
     }]
    const methodData_toggle = [
      {
        group: '触发事件',
        name: 'toggleRowSelection',
        memo: '切换行的选中状态。<br>参数1：row。表格行的数据对象(可以使用getData获取)。<br>参数2：selected。是否选中。true选中，false取消选中。',
        code: '<span class="api-code">// 选中行<br>this.$refs.tableRef.toggleRowSelection(row, true);</span>'
      }, {
        name: 'toggleRowSelectionByRowKey',
        memo: '切换行的选中状态。<br>参数1：rowKey。表格行的rowKey。<br>参数2：selected。是否选中。true选中，false取消选中。',
        code: '<span class="api-code">this.$refs.tableRef.toggleRowSelectionByRowKey("id123", true);</span>'
      }, {
        name: 'toggleEditRow',
        memo: '编辑行。<br>参数：row。表格行的数据对象。',
        code: '<span class="api-code">this.$refs.tableRef.toggleEditRow(row);</span>'
      }, {
        name: 'toggleEditRowByRowKey',
        memo: '编辑行。<br>参数：rowKey。编辑行的rowKey。<br><span class="api-memo">注：rowKey必须设定</span>',
        code: '<span class="api-code">this.$refs.tableRef.toggleEditRowByRowKey("id123");</span>'
      }, {
        name: 'toggleAddRow',
        memo: '添加行。<br>参数：row。添加行的对象。<br><span class="api-memo">注：addDefaultValue设定的默认值会无效。</span>',
        code: '<span class="api-code">this.$refs.tableRef.toggleAddRow(row);</span>'
      }]
    const methodData_other = [
      {
        group: '其他',
        name: 'validate',
        memo: '校验表格数据<br>参数：function。数据校验完成的回调方法，msg参数为空说明校验成功！<br><span class="api-memo">注：validate使用异步校验方法！</span>',
        code: '<span class="api-code">this.$refs.tableRef.validate((msg)=>{<br>console.log(msg);<br>});</span>'
      }]
    const methodData_all = methodData_data
      .concat(methodData_operate)
      .concat(methodData_toggle)
      .concat(methodData_other)

    return {
      activeName: 'gridAttr',
      colAttrType: 'all',
      gridAttrType: 'all',
      eventType: 'all',
      methodType: 'all',

      gridAttrData: gridAttrData_all,
      gridAttrData_data,
      gridAttrData_toolbar,
      gridAttrData_common,
      gridAttrData_col,
      gridAttrData_style,
      gridAttrData_tree,
      gridAttrData_other,
      gridAttrData_all,

      colAttrData: colAttrData_all,
      colAttrData_base,
      colAttrData_input,
      colAttrData_inputNumber,
      colAttrData_slot,
      colAttrData_select,
      colAttrData_cascader,
      colAttrData_expand,
      colAttrData_search,
      colAttrData_searchTable,
      colAttrData_searchTree,
      colAttrData_searchPicker,
      colAttrData_datePicker,
      colAttrData_all,

      eventData: eventData_all,
      eventData_callback,
      eventData_event,
      eventData_all,

      methodData: methodData_all,
      methodData_data,
      methodData_operate,
      methodData_toggle,
      methodData_other,
      methodData_all,

      gridAttrCols,
      colAttrCols,
      eventCols,
      methodCols
    }
  },
  watch: {
    colAttrType: 'colAttrTypeChange',
    gridAttrType: 'gridAttrTypeChange',
    eventType: 'eventTypeChange',
    methodType: 'methodTypeChange'
  },
  methods: {
    colAttrTypeChange() {
      this.colAttrData = this['colAttrData_' + this.colAttrType]
    },
    gridAttrTypeChange() {
      this.gridAttrData = this['gridAttrData_' + this.gridAttrType]
    },
    eventTypeChange() {
      this.eventData = this['eventData_' + this.eventType]
    },
    methodTypeChange() {
      this.methodData = this['methodData_' + this.methodType]
    },
    gridSpanMethod({ row, column, rowIndex, columnIndex }) {
      // 跨列常量
      const dataRowSpan = 13
      const toolbarRowSpan = 1
      const colRowSpan = 5
      const commonRowSpan = 6
      const styleRowSpan = 7
      const treeRowSpan = 3
      const noCommonRowSpan = 3
      // 事件回调
      const rollbackRowSpan = 11
      const eventRowSpan = 5

      // 列属性
      const columnsRowSpan = 1
      const colCommonRowSpan = 11
      const colCommonStyleRowSpan = 6
      const colCommonRenderRowSpan = 7
      const inputRowSpan = 1
      const inputNumberRowSpan = 2
      const slotRowSpan = 1
      const selectRowSpan = 8
      const cascaderRowSpan = 2
      const expandRowSpan = 1
      const searchRowSpan = 5
      const searchTableRowSpan = 11
      const searchTreeRowSpan = 16
      const searchPickerRowSpan = 17
      const datePickerRowSpan = 6

      // 方法
      const getDataRowSpan = 10
      const operateRowSpan = 6
      const toggleRowSpan = 5
      const otherRowSpan = 1

      if (column.property != 'group') {
        return
      }

      let rowspan = 0
      let colspan = 0
      if (row.group == null) {
        rowspan = 0
        colspan = 0
      }
      colspan = 1
      switch (row.group) {
        case '数据':
          rowspan = dataRowSpan
          break
        case '工具栏':
          rowspan = toolbarRowSpan
          break
        case '列属性':
          rowspan = columnsRowSpan
          break
        case '通用：常规':
          rowspan = colCommonRowSpan
          break
        case '通用：式样':
          rowspan = colCommonStyleRowSpan
          break
        case '通用：显示渲染':
          rowspan = colCommonRenderRowSpan
          break
        case '类型:input':
          rowspan = inputRowSpan
          break
        case '类型:inputNumber':
          rowspan = inputNumberRowSpan
          break
        case '类型:slot':
          rowspan = slotRowSpan
          break
        case '类型:select':
          rowspan = selectRowSpan
          break
        case '类型:cascader':
          rowspan = cascaderRowSpan
          break
        case '类型:expand':
          rowspan = expandRowSpan
          break
        case '类型:search':
          rowspan = searchRowSpan
          break
        case '类型:searchTable':
          rowspan = searchTableRowSpan
          break
        case '类型:searchTree':
          rowspan = searchTreeRowSpan
          break
        case '类型:searchPicker':
          rowspan = searchPickerRowSpan
          break
        case '类型:datePicker':
          rowspan = datePickerRowSpan
          break
        case '列相关':
          rowspan = colRowSpan
          break
        case '通用':
          rowspan = commonRowSpan
          break
        case '式样':
          rowspan = styleRowSpan
          break
        case '树形结构':
          rowspan = treeRowSpan
          break
        case '不常用':
          rowspan = noCommonRowSpan
          break
        case '事件':
          rowspan = eventRowSpan
          break
        case '回调':
          rowspan = rollbackRowSpan
          break
        case '请求数据':
          rowspan = getDataRowSpan
          break
        case '操作':
          rowspan = operateRowSpan
          break
        case '触发事件':
          rowspan = toggleRowSpan
          break
        case '其他':
          rowspan = otherRowSpan
          break
      }

      return {
        rowspan: rowspan,
        colspan: colspan
      }
    }
  }
}
</script>

<style scoped>
    .api-grid {
        display: flex;
        flex-flow: column;
        height: 100%;
    }

    .api-grid-tab {
        height: 100%;
    }

    .api-grid-tab-ctn {
        height: 100%;
    }

    .api-grid-tab-ctn-header {
        margin-bottom: 15px;
    }

    .api-grid-tab-ctn-table {
        overflow: auto
    }

    .api-grid /deep/ .el-tabs__content {
        flex: 1;
    }
</style>
