<template>
  <div>
    <h1>Table 表格</h1>
    <p class="fbg-text">用于展示多条结构类似的数据，可对数据进行排序、筛选、对比或其他自定义操作。</p>
    <h3 class="fbg-title">基础用法</h3>
    <demo :code="baseTableStr">
    <el-table :loading="loading" stripe :data="dataList" :columns="columns">
      <template slot="status" slot-scope="scope">
        {{scope.row.status===1?'通过审核':'审核不通过'}}
      </template>
      <template slot="freeze" slot-scope="scope">
        {{scope.row.freeze===1?'已冻结':'未冻结'}}
      </template>
      <template slot="subscribe" slot-scope="scope">
        {{scope.row.subscribe===1?'已订阅':'未订阅'}}
      </template>
    </el-table>
    </demo>
    <h3 class="fbg-title">多选</h3>
    <p class="fbg-text">选择多行数据时使用 Checkbox。</p>
    <demo :code="selectionTableStr">
      <el-table stripe :data="dataList" :columns="selectionColumns">
        <template slot="status" slot-scope="scope">
          {{scope.row.status===1?'通过审核':'审核不通过'}}
        </template>
      </el-table>
    </demo>
    <h3 class="fbg-title">排序</h3>
    <p class="fbg-text">对表格进行排序，可快速查找或对比数据。</p>
    <demo :code="sortTableStr">
      <el-table stripe :data="dataList" :columns="sortColumns">
        <template slot="status" slot-scope="scope">
          {{scope.row.status===1?'通过审核':'审核不通过'}}
        </template>
      </el-table>
    </demo>
    <h3 class="fbg-title">展开行</h3>
    <p class="fbg-text">当行内容过多并且不想显示横向滚动条时，可以使用 Table 展开行功能。</p>
    <demo :code="expandTableStr">
      <el-table stripe :data="dataList" :columns="expandColumns">
        <template slot="expand" slot-scope="scope">
          <el-row>
            <el-col :span="8">销售代表：{{scope.row.sales}}</el-col>
            <el-col :span="8">客服代表：{{scope.row.service}}</el-col>
            <el-col :span="8">状态：{{scope.row.status===1?'通过审核':'审核不通过'}}</el-col>
          </el-row>
        </template>
        <template slot="status" slot-scope="scope">
          {{scope.row.status===1?'通过审核':'审核不通过'}}
        </template>
      </el-table>
    </demo>
    <h3 class="fbg-title">自定义表头</h3>
    <p class="fbg-text">表头支持自定义。</p>
    <demo :code="headerTableStr">
      <el-table stripe :data="dataList"  :columns="headerColumns">
        <template slot="company-header" slot-scope="scope">
          <span>{{scope.column.label}}<i class="fbgiconfont icon-wenhao" /></span>
        </template>
      </el-table>
    </demo>
    <h3 class="fbg-title">自定义列</h3>
    <p class="fbg-text">显示的列目可自定义。</p>
    <demo :code="defineColumnsTableStr">
      <el-table stripe :data="dataList" tooltip-effect="light" :columns="defineColumns" @overflowColnum="handleOverflowColnum">
      </el-table>
    </demo>
    <h3 class="fbg-title">Table 属性</h3>
    <table class="fbg-table">
      <thead>
        <tr>
          <th>参数</th>
          <th>说明</th>
          <th>类型</th>
          <th>可选值</th>
          <th>默认值</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>data</td>
          <td>数据源</td>
          <td>Array</td>
          <td>[]</td>
          <td>--</td>
        </tr>
        <tr>
          <td>loading</td>
          <td>表格加载状态</td>
          <td>Boolean</td>
          <td>true | false</td>
          <td>false</td>
        </tr>
        <tr>
          <td>columns</td>
          <td>字段列表</td>
          <td>Array</td>
          <td>[]</td>
          <td>--</td>
        </tr>
        <tr>
          <td>height</td>
          <td>Table 的高度，默认为自动高度。如果 height 为 number 类型，单位 px；如果 height 为 string 类型，则这个高度会设置为 Table 的 style.height 的值，Table 的高度会受控于外部样式。</td>
          <td>string | number</td>
          <td>--</td>
          <td>--</td>
        </tr>
        <tr>
          <td>max-height</td>
          <td>Table 的最大高度。合法的值为数字或者单位为 px 的高度。</td>
          <td>string | number</td>
          <td>--</td>
          <td>--</td>
        </tr>
        <tr>
          <td>empty-text</td>
          <td>空数据时显示的文本内容，也可以通过 slot="empty" 设置。</td>
          <td>string</td>
          <td>--</td>
          <td>--</td>
        </tr>
        <tr>
          <td>span-method</td>
          <td>合并行或列的计算方法。</td>
          <td>Function({ row, column, rowIndex, columnIndex })</td>
          <td>--</td>
          <td>--</td>
        </tr>
        <tr>
          <td>summary-method</td>
          <td>自定义的合计计算方法。</td>
          <td>Function({ columns, data })</td>
          <td>--</td>
          <td>--</td>
        </tr>
        <tr>
          <td>select-on-indeterminate</td>
          <td>在多选表格中，当仅有部分行被选中时，点击表头的多选框时的行为。若为 true，则选中所有行；若为 false，则取消选择所有行。</td>
          <td>Boolean</td>
          <td>true | false</td>
          <td>true</td>
        </tr>
        <tr>
          <td>indent</td>
          <td>展示树形数据时，树节点的缩进。</td>
          <td>Number</td>
          <td>--</td>
          <td>--</td>
        </tr>
        <tr>
          <td>indent</td>
          <td>展示树形数据时，树节点的缩进。</td>
          <td>Number</td>
          <td>--</td>
          <td>--</td>
        </tr>
        <tr>
          <td>load</td>
          <td>加载子节点数据的函数，lazy 为 true 时生效，函数第二个参数包含了节点的层级信息。</td>
          <td>Function(row, treeNode, resolve)</td>
          <td>--</td>
          <td>--</td>
        </tr>
        <tr>
          <td>default-sort</td>
          <td>默认的排序列的 prop 和顺序。它的prop属性指定默认的排序的列，order指定默认排序的顺序。</td>
          <td>Object</td>
          <td>order: ascending, descending</td>
          <td>如果只指定了prop, 没有指定order, 则默认顺序是ascending</td>
        </tr>
        <tr>
          <td>expand-row-keys</td>
          <td>可以通过该属性设置 Table 目前的展开行，需要设置 row-key 属性才能使用，该属性为展开行的 keys 数组。</td>
          <td>Array</td>
          <td>--</td>
          <td>--</td>
        </tr>
        <tr>
          <td>default-expand-all</td>
          <td>是否默认展开所有行，当 Table 包含展开行存在或者为树形表格时有效。</td>
          <td>Boolean</td>
          <td>true | false</td>
          <td>false</td>
        </tr>
      </tbody>
    </table>
    <h3 class="fbg-title">ColumnsData 属性</h3>
    <table class="fbg-table">
      <thead>
        <tr>
          <th>参数</th>
          <th>说明</th>
          <th>类型</th>
          <th>可选值</th>
          <th>默认值</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>prop</td>
          <td>数据源渲染的字段名</td>
          <td>String</td>
          <td>--</td>
          <td>--</td>
        </tr>
        <tr>
          <td>label</td>
          <td>显示的列标题</td>
          <td>String</td>
          <td>--</td>
          <td>--</td>
        </tr>
        <tr>
          <td>type</td>
          <td>类型</td>
          <td>String</td>
          <td>selection（多选） | expand（展开）| index（序号）</td>
          <td>--</td>
        </tr>
        <tr>
          <td>sortable</td>
          <td>排序</td>
          <td>Boolean</td>
          <td>true | false</td>
          <td>false</td>
        </tr>
        <tr>
          <td>filterEmpty</td>
          <td>过滤空值展示，空值默认展示"--"</td>
          <td>Boolean</td>
          <td>true | false</td>
          <td>false</td>
        </tr>
        <tr>
          <td>setColum</td>
          <td>设置表格列</td>
          <td>Boolean</td>
          <td>true | false</td>
          <td>false</td>
        </tr>
        <tr>
          <td>isConfigurable</td>
          <td>该列是否可以配置显示/隐藏</td>
          <td>Boolean</td>
          <td>true | false</td>
          <td>true</td>
        </tr>
        <tr>
          <td>width</td>
          <td>对应列的宽度</td>
          <td>String</td>
          <td>--</td>
          <td>--</td>
        </tr>
        <tr>
          <td>min-width</td>
          <td>对应列的最小宽度，与 width 的区别是 width 是固定的，min-width 会把剩余宽度按比例分配给设置了 min-width 的列</td>
          <td>String</td>
          <td>--</td>
          <td>--</td>
        </tr>
        <tr>
          <td>show-overflow-tooltip</td>
          <td>当内容过长被隐藏时显示 tooltip</td>
          <td>Boolean</td>
          <td>true | false</td>
          <td>false</td>
        </tr>
        <tr>
          <td>align</td>
          <td>对齐方式</td>
          <td>String</td>
          <td>left | center | right/td>
          <td>--</td>
        </tr>
        <tr>
          <td>header-align</td>
          <td>表头对齐方式，若不设置该项，则使用表格的对齐方式</td>
          <td>String</td>
          <td>left | center | right/td>
          <td>--</td>
        </tr>
        <tr>
          <td>sort-orders</td>
          <td>数据在排序时所使用排序策略的轮转顺序，仅当 sortable 为 true 时有效。需传入一个数组，随着用户点击表头，该列依次按照数组中元素的顺序进行排序</td>
          <td>Array</td>
          <td>数组中的元素需为以下三者之一：ascending 表示升序，descending 表示降序，null 表示还原为原始顺序</td>
           <td>['ascending', 'descending', null]</td>
        </tr>
      </tbody>
    </table>
    <h3 class="fbg-title">ColumnsData 方法</h3>
    <table class="fbg-table">
      <thead>
        <tr>
          <th>方法名</th>
          <th>说明</th>
          <th>回调参数</th>
          <th>返回值</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>renderIcon</td>
          <td>自定义单元格图标</td>
          <td>row</td>
          <td>success | error</td>
        </tr>
        <tr>
          <td>sort-method</td>
          <td>对数据进行排序的时候使用的方法，仅当 sortable 设置为 true 的时候有效，需返回一个数字，和 Array.sort 表现一致</td>
          <td>a, b</td>
          <td>--</td>
        </tr>
        <tr>
          <td>sort-by</td>
          <td>指定数据按照哪个属性进行排序，仅当 sortable 设置为 true 且没有设置 sort-method 的时候有效。如果 sort-by 为数组，则先按照第 1 个属性排序，如果第 1 个相等，再按照第 2 个排序，以此类推</td>
          <td>row, index</td>
          <td>--</td>
        </tr>
      </tbody>
    </table>
    <h3 class="fbg-title">slot 插槽</h3>
    <table class="fbg-table">
      <thead>
        <tr>
          <th>插槽名</th>
          <th>说明</th>
          <th>相关示例</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>column.prop</td>
          <td>自定义表格内容</td>
          <td>请看例子："基础用法"</td>
        </tr>
        <tr>
          <td>column.prop + '-header'</td>
          <td>自定义表头数据</td>
          <td>请看例子："自定义表头"</td>
        </tr>
      </tbody>
    </table>
    <h3 class="fbg-title">Table 事件</h3>
    <table class="fbg-table">
      <thead>
        <tr>
          <th>参数</th>
          <th>说明</th>
          <th>回调参数</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>select</td>
          <td>当用户手动勾选数据行的 Checkbox 时触发的事件</td>
          <td>selection, row</td>
        </tr>
        <tr>
          <td>select-all</td>
          <td>当用户手动勾选全选 Checkbox 时触发的事件</td>
          <td>selection</td>
        </tr>
        <tr>
          <td>selection-change</td>
          <td>当选择项发生变化时会触发该事件</td>
          <td>selection</td>
        </tr>
        <tr>
          <td>cell-mouse-enter</td>
          <td>当单元格 hover 进入时会触发该事件</td>
          <td>row, column, cell, event</td>
        </tr>
        <tr>
          <td>cell-mouse-leave</td>
          <td>当单元格 hover 退出时会触发该事件</td>
          <td>row, column, cell, event</td>
        </tr>
        <tr>
          <td>cell-click</td>
          <td>当某个单元格被点击时会触发该事件</td>
          <td>row, column, cell, event</td>
        </tr>
        <tr>
          <td>cell-dblclick</td>
          <td>当某个单元格被双击击时会触发该事件</td>
          <td>row, column, cell, event</td>
        </tr>
        <tr>
          <td>row-click</td>
          <td>当某一行被点击时会触发该事件</td>
          <td>row, column, event</td>
        </tr>
        <tr>
          <td>row-contextmenu</td>
          <td>当某一行被鼠标右键点击时会触发该事件</td>
          <td>row, column, event</td>
        </tr>
        <tr>
          <td>row-dblclick</td>
          <td>当某一行被双击时会触发该事件</td>
          <td>row, column, event</td>
        </tr>
        <tr>
          <td>header-click</td>
          <td>当某一列的表头被点击时会触发该事件</td>
          <td>column, event</td>
        </tr>
        <tr>
          <td>header-contextmenu</td>
          <td>当某一列的表头被鼠标右键点击时触发该事件</td>
          <td>column, event</td>
        </tr>
        <tr>
          <td>sort-change</td>
          <td>当表格的排序条件发生变化的时候会触发该事件</td>
          <td>{ column, prop, order }</td>
        </tr>
        <tr>
          <td>header-contextmenu</td>
          <td>当某一列的表头被鼠标右键点击时触发该事件</td>
          <td>column, event</td>
        </tr>
        <tr>
          <td>header-dragend</td>
          <td>当拖动表头改变了列的宽度的时候会触发该事件</td>
          <td>newWidth, oldWidth, column, event</td>
        </tr>
        <tr>
          <td>expand-change</td>
          <td>当用户对某一行展开或者关闭的时候会触发该事件（展开行时，回调的第二个参数为 expandedRows；树形表格时第二参数为 expanded）</td>
          <td>row, (expandedRows | expanded)</td>
        </tr>
        <tr>
          <td>overflow-colnum</td>
          <td>当显示字段数量超过限制显示数量时</td>
          <td>column</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>
<script>
import hljs from '../util/highlight';
export default {
  data() {
    return {
      loading: true,
      columns: [{
        type: 'index',
        label: 'No'
      },{
        prop: 'code',
        label: '客户代码',
        filterEmpty: true
      },
      {
        prop: 'company',
        label: '公司名称',
      },{
        prop: 'status',
        label: '状态',
        renderIcon(row) {
          if (row.status === 1) {
            return 'success';
          } else {
            return 'error';
          }
        }
      },{
        prop: 'freeze',
        label: '客户冻结',
        renderIcon(row) {
          if (row.freeze === 1) {
            return 'success';
          } else {
            return 'error';
          }
        }
      },
      ],
      defineColumns: [{
        type: 'index',
        label: 'No'
      },
      {
        type: 'selection'
      },{
        prop: 'code',
        label: '客户代码'
      },{
        prop: 'company',
        label: '公司名称',
        "show-overflow-tooltip": true
      },{
        prop: 'sales',
        label: '销售代表',
        isConfigurable: false,
        checked: false
      },{
        prop: 'service',
        label: '客服代表',
        setColumn: true
      }],
      selectionColumns: [
        {
          type: 'selection'
        },
        {
          prop: 'code',
          label: '客户代码',
        },{
          prop: 'company',
          label: '公司名称',
        }
      ],
      selectionDataList: [
        {
          code: '231231231',
          company: '测试公司01'
        },
        {
          code: '24514151',
          company: '测试公司02'
        }
      ],
      sortColumns: [{
        prop: 'code',
        label: '客户代码',
        sortable: true
      },{
        prop: 'company',
        label: '公司名称',
      }],
      expandColumns: [
        {
          type: 'expand',
          prop: 'expand'
        },
        {
          prop: 'code',
          label: '客户代码',
        },{
          prop: 'company',
          label: '公司名称',
        }
      ],
      headerColumns: [
        {
          prop: 'code',
          label: '客户代码',
        },{
          prop: 'company',
          label: '公司名称',
          header: true
        }
      ],
      dataList: [
        {
          code: '231231231',
          company: '测试公司01',
          status: 1,
          freeze: 2,
          subscribe: 2,
          sales: '小陈01',
          service: '小王01'
        },
        {
          code: '24514151',
          company: '测试公司01测试公司01测试公司01测试公司01测试公司01测试公司01测试公司01',
          status: 0,
          freeze: 1,
          subscribe: 2,
          sales: '小陈02',
          service: '小王02'
        }
      ],
      baseTableStr: `
        <el-table stripe :data="dataList" :columns="columns">
          <template slot="status" slot-scope="scope">
            {{scope.row.status===1?'通过审核':'审核不通过'}}
          </template>
          <template slot="freeze" slot-scope="scope">
            {{scope.row.freeze===1?'已冻结':'未冻结'}}
          </template>
          <template slot="subscribe" slot-scope="scope">
            {{scope.row.subscribe===1?'已订阅':'未订阅'}}
          </template>
        </el-table>
      <script>
      export default {
        data() {
          return {
            columns: [{
              type: 'index',
              label: 'No'
            },{
              prop: 'code',
              label: '客户代码',
            },{
              prop: 'company',
              label: '公司名称',
            },{
              prop: 'status',
              label: '状态',
              renderIcon(row) {
                if (row.status === 1) {
                  return 'success';
                } else {
                  return 'error';
                }
              }
            },{
              prop: 'freeze',
              label: '客户冻结',
              renderIcon(row) {
                if (row.freeze === 1) {
                  return 'success';
                } else {
                  return 'error';
                }
              }
            }],
            dataList: [
              {
                code: '231231231',
                company: '测试公司01',
                status: 1,
                freeze: 2
              },
              {
                code: '24514151',
                company: '测试公司02',
                status: 0,
                freeze: 1
              }
            ]
          }
        }
      <\/script>`,
      selectionTableStr: `
        <el-table stripe :data="dataList" :columns="columns">
          <template slot="status" slot-scope="scope">
            {{scope.row.status===1?'通过审核':'审核不通过'}}
          </template>
        </el-table>
      <script>
        export default {
          data() {
            return {  
              columns: [{
                type: 'selection',
                label: 'No'
              },{
                prop: 'code',
                label: '客户代码',
              },{
                prop: 'company',
                label: '公司名称',
              }],
              dataList: [
                {
                  code: '231231231',
                  company: '测试公司01'
                },
                {
                  code: '24514151',
                  company: '测试公司02'
                }
              ]
            }
          }
        }
      <\/script>`,
      sortTableStr: `
        <el-table stripe :data="dataList" :columns="columns">
          <template slot="status" slot-scope="scope">
            {{scope.row.status===1?'通过审核':'审核不通过'}}
          </template>
        </el-table>
        <script>
          export default {
            data() {
              return {  
                columns: [{
                  prop: 'code',
                  label: '客户代码',
                  sortable: true
                },{
                  prop: 'company',
                  label: '公司名称',
                }],
                selectionDataList: [
                  {
                    code: '231231231',
                    company: '测试公司01'
                  },
                  {
                    code: '24514151',
                    company: '测试公司02'
                  }
                ]
              }
            }
          }
        <\/script>
        `,
        expandTableStr: `
        <el-table stripe :data="dataList" :columns="columns">
          <template slot="expand" slot-scope="scope">
            <el-row>
              <el-col :span="8">销售代表：{{scope.row.sales}}</el-col>
              <el-col :span="8">客服代表：{{scope.row.service}}</el-col>
              <el-col :span="8">状态：{{scope.row.status===1?'通过审核':'审核不通过'}}</el-col>
            </el-row>
          </template>
          <template slot="status" slot-scope="scope">
            {{scope.row.status===1?'通过审核':'审核不通过'}}
          </template>
        </el-table>
        <script>
            export default {
              data() {
                return {  
                  columns: [
                  {
                    type: 'expand',
                    prop: 'expand'
                  },
                  {
                    prop: 'code',
                    label: '客户代码',
                  },{
                    prop: 'company',
                    label: '公司名称',
                  }],
                  dataList: [
                    {
                      code: '231231231',
                      company: '测试公司01',
                      status: 1,
                      freeze: 2,
                      subscribe: 2,
                      sales: '小陈01',
                      service: '小王01'
                    },
                    {
                      code: '24514151',
                      company: '测试公司02',
                      status: 0,
                      freeze: 1,
                      subscribe: 2,
                      sales: '小陈02',
                      service: '小王02'
                    },
                    {
                      code: '24514151',
                      company: '测试公司03',
                      status: 1,
                      freeze: 1,
                      subscribe: 1,
                      sales: '小陈03',
                      service: '小王03'
                    },
                    {
                      code: '24514151',
                      company: '测试公司04',
                      status: 2,
                      freeze: 1,
                      subscribe: 1,
                      sales: '小陈04',
                      service: '小王04'
                    },
                  ]
                }
              }
            }
          <\/script>
      `,
      headerTableStr: `
        <el-table stripe :data="dataList" :columns="columns">
          <template slot="company-header" slot-scope="scope">
            <span>{{scope.column.label}}<i class="fbgiconfont icon-wenhao" /></span>
          </template>
        </el-table>
        <script>
            export default {
              data() {
                return {  
                  columns: [{
                    prop: 'code',
                    label: '客户代码',
                  },{
                    prop: 'company',
                    label: '公司名称',
                  }],
                  dataList: [
                    {
                      code: '231231231',
                      company: '测试公司01'
                    },
                    {
                      code: '24514151',
                      company: '测试公司02'
                    }
                  ]
                }
              }
            }
          <\/script>
      `,
      defineColumnsTableStr: `
        <el-table stripe :data="dataList" :columns="columns">
        </el-table>
        <script>
            export default {
              data() {
                return {  
                  columns: [{
                    type: 'index',
                    label: 'No'
                  },{
                    type: 'selection'
                  },{
                    prop: 'code',
                    label: '客户代码'
                  },{
                    prop: 'company',
                    label: '公司名称',
                    "show-overflow-tooltip": true
                  },{
                    prop: 'sales',
                    label: '销售代表',
                    isConfigurable: false,
                    checked: false
                  }],
                  dataList: [
                    {
                      code: '24514151',
                      company: '测试公司03',
                      sales: '小陈03',
                      service: '小王03'
                    },
                    {
                      code: '24514151',
                      company: '测试公司04',
                      sales: '小陈04',
                      service: '小王04'
                    }
                  ]
                }
              }
            }
          <\/script>`
    }
  },
  mounted() {
    hljs.highlightCode();
  },
  methods: {
    handleOverflowColnum() {
      console.log('overflow-colnum事件');
    },
    json(data) {
      console.log(data, 666)
    }
  }
}
</script>