<!--author qiu.bl-->
<style scoped>
  .row {
    padding: 5px 0;
  }
</style>
<template>
  <div>
    <_BTN_FILTER :open="open" :isMore="isMore" :fileName="fileName"
                 @on-click="exportEve"
                 :btnGroups="btnGroups" :tableData="tableData"/>
    <div class="container-fluid">
      <div class="panel panel-primary">
        <div class="panel-heading">按钮组+过滤器属性：</div>
        <div class="panel-body">
          <table class="table">
            <thead>
            <tr>
              <td>参数名称</td>
              <td>使用说明</td>
              <td>默认值</td>
              <td>待完善功能</td>
              <td>坑或注意点</td>
            </tr>
            </thead>
            <tbody>
            <tr>
              <td>tableData</td>
              <td>过滤数据</td>
              <td>[]</td>
              <td>'服务器过滤' 功能</td>
              <td>／</td>
            </tr>
            <tr>
              <td>isMore</td>
              <td>更多条件按钮；true：显示，false：隐藏</td>
              <td>false</td>
              <td>无</td>
              <td> ／ </td>
            </tr>
            <tr>
              <td>open</td>
              <td>展开按钮组；true：显示，false：隐藏</td>
              <td>false</td>
              <td>／</td>
              <td>／</td>
            </tr>
            <tr>
              <td>fileVal</td>
              <td>需要过滤列的名称</td>
              <td>必填项</td>
              <td>／</td>
              <td>／</td>
            </tr>
            <tr>
              <td>btnGroups</td>
              <td>按钮组</td>
              <td>[]</td>
              <td>／</td>
              <p class="bg-danger">
                <pre>
                数据个格式；可以有多个按钮，根据情况自己定义
                {
                  name: '新增', // 按钮名称
                  className: 'btn-info', // 按钮样式名称
                  iconName: 'fa-plus', // 按钮图标名称
                  event: this.addClk // 按钮事件方法名称；可以自定义
                },
                </pre>
              </p>
            </tr>
            </tbody>
          </table>
        </div>
      </div>
      <div class="panel panel-primary">
        <div class="panel-heading">按钮组+过滤器方法：</div>
        <div class="panel-body">
          <table class="table">
            <thead>
            <tr>
              <td>名称</td>
              <td>使用说明</td>
            </tr>
            </thead>
            <tbody>
            <tr>
              <td>addClk ／ delClk </td>
              <td>
                根据 按钮组 btnGroups.event 属性自定义上面的方法名称
              </td>
            </tr>
            <tr>
              <td>showClk （boolean）</td>
              <td>
                当 open = true 的时候 必须定义该方法 【不可改名】
              </td>
            </tr>
            <tr>
              <td>isMoreClk </td>
              <td>
                当 isMore = true 的时候 必须定义该方法 【不可改名】
              </td>
            </tr>
            <tr>
              <td> inputChange（[Object || Array]） </td>
              <td>
                会接收过滤后的值
              </td>
            </tr>
            <tr>
              <td> exportEve（msg） </td>
              <td>
                用法：this.$refs.tableGrid.exportExcel() 【注意在table 表中添加 refs="tableGrid" 属性】
              </td>
            </tr>
            </tbody>
          </table>
        </div>
      </div>
      <div class="panel panel-primary">
        <div class="panel-heading">按钮组+过滤器方法：</div>
        <div class="panel-body">
          <pre>
            1:引入 import _BTN_FILTER from './btn&filterTemp.vue' 组件 【根据自己项目目录引入】
            2:在 components 导入 _BTN_FILTER 组件
            3:定义参数 、 定义方法
            4:在 DOM 层使用 < _BTN_FILTER :open="open" :isMore="isMore" :btnGroups="btnGroups" :tableData="tableData" >
          </pre>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import _BTN_FILTER from './btn&filterTemp.vue'
export default {
  mounted () {},
  data () {
    return {
      tableData: JSON.parse(localStorage.getItem('tableData')), // 临时记录tableDate的值
      isMore: false,
      open: true, // 是否显示全部展开按钮 默认为false 不显示
      fileName: [],
      btnGroups: [
        {
          name: '新增',
          className: 'btn-info',
          iconName: 'fa-plus',
          event: this.addClk
        },
        {
          name: '批量删除',
          className: 'btn-danger',
          iconName: 'fa-remove',
          event: this.delClk
        }
      ]
    }
  },
  methods: {
    addClk () {
      this.$message('新增')
    }, // 新增 【根据按钮组情况拟定】
    delClk () {
      this.$message('批量删除')
    }, // 批量删除 【根据按钮组情况拟定】
    showClk (isTrue) {
      this.$message(isTrue)
    }, // 是否全部展开 【不是必加方法】
    isMoreClk () {
      this.$message('更多')
    }, // 更多条件 【不是必加方法】
    inputChange (val) {
      this.$message(val)
    }, // input 过滤值
    exportEve () {
      this.$message('开始调用')
    }
  },
  components: {
    _BTN_FILTER
  }
}
</script>
