<style scoped></style>
<template>
  <div class="container-fluid">
    <InputTemp @on-change="onbeforChange" :filmode="filmode" :filType="filType" :fileName="fileName" :datasource.sysc="datasource" :keyup="keyup"></InputTemp>
    <InputTemp @on-change="onendChange" :filmode="filmode" :filType="filType" :fileName="fileName" :datasource.sysc="datasource" :keyup="keyupend"></InputTemp>
    <InputTemp @on-change="onendChange" :filmode="filmode" :filType="filType" :fileName="fileName" :datasource.sysc="datasourceIcon" :keyup="keyup" :icon="isicon"></InputTemp>
    <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>filmode</td>
                <td>过滤方式；0:代表本地过滤，1：服务器过滤</td>
                <td>0</td>
                <td>'服务器过滤' 功能</td>
                <td>／</td>
              </tr>
              <tr>
                <td>filType</td>
                <td>过滤类型；0：单列数据过滤，1：整条数据过滤</td>
                <td>0</td>
                <td>无</td>
                <td>
                  <p class="bg-danger">
                    单列数据过滤，字段中必须要有value
                  </p>
                </td>
              </tr>
              <tr>
                <td>keyup</td>
                <td>输入筛选；true：之前展示；false：之后展示</td>
                <td>false</td>
                <td>／</td>
                <td>／</td>
              </tr>
              <tr>
                <td>datasource</td>
                <td>数据源</td>
                <td>[]</td>
                <td>／</td>
                <p class="bg-danger">
                  由于Element ui 规则：导致展示的数据源中<br/>必须要有value 字段，且value为显示数据
                </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>on-change</td>
                <td>
                  在 自定义组件 InputTemp 中绑定 on-change 事件<br/>
                  用来接收被选中的值。
                </td>
              </tr>
              </tbody>
            </table>
          </div>
          <div class="panel-footer">
            <p class="bg-danger">
              注意点：如果页面中存在1～个 自定义 inputTemp 组件，那么只要绑定不通的 on-change 事件就可以了。
            </p>
          </div>
        </div>
        <div class="panel panel-primary">
          <div class="panel-heading">过滤器使用方法：</div>
          <div class="panel-body">
            <p>1、在 <span class="badge">script</span> 标签中引入组件 <span class="badge">import InputTemp from './InputTemp.vue'</span></p>
            <p>2、在 components 中 导入组件名称 <span class="badge">InputTemp</span> </p>
            <p>3、在 html 中 定义：InputTemp 标签；绑定属性【filmode、filType、keyup、datasource】；绑定方法【on-change】;详细请看源代码第四行)
            </p>
          </div>
        </div>
      </div>
  </div>
</template>
<script>
  import InputTemp from './InputTemp.vue'
  import api from '@/api'
  export default {
    mounted () {
      this.loadAll()
      this.loadIcon()
    },
    data () {
      return {
        filmode: 0,  // 过滤方式；0:代表本地过滤，1：服务器过滤
        filType: 1, // 过滤类型；0：单列数据过滤，1：整条数据过滤
        fileName: ['value'],
        keyup: true, // 输入筛选；true：之前展示；false：之后展示
        keyupend: false,
        isicon: true,
        datasource: [], // 数据源
        datasourceIcon: []
      }
    },
    methods: {
      loadAll () {
        this.datasource = [
          { 'name': '三全鲜食（北新泾店）', 'city': '澳门新渔路144号' },
          { 'value': '三全鲜食（北新泾店）', 'address': '长宁区新渔路144号' },
          { 'value': 'Hot honey 首尔炸鸡（仙霞路）', 'address': '上海市长宁区淞虹路661号' },
          { 'value': '新旺角茶餐厅', 'address': '上海市普陀区真北路988号创邑金沙谷6号楼113' },
          { 'value': '泷千家(天山西路店)', 'address': '天山西路438号' },
          { 'value': '胖仙女纸杯蛋糕（上海凌空店）', 'address': '上海市长宁区金钟路968号1幢18号楼一层商铺18-101' },
          { 'value': '贡茶', 'address': '上海市长宁区金钟路633号' },
          { 'value': '豪大大香鸡排超级奶爸', 'address': '上海市嘉定区曹安公路曹安路1685号' },
          { 'value': '茶芝兰（奶茶，手抓饼）', 'address': '上海市普陀区同普路1435号' },
          { 'value': '十二泷町', 'address': '上海市北翟路1444弄81号B幢-107' },
          { 'value': '星移浓缩咖啡', 'address': '上海市嘉定区新郁路817号' },
          { 'value': '阿姨奶茶/豪大大', 'address': '嘉定区曹安路1611号' },
          { 'value': '新麦甜四季甜品炸鸡', 'address': '嘉定区曹安公路2383弄55号' },
          { 'value': 'Monica摩托主题咖啡店', 'address': '嘉定区江桥镇曹安公路2409号1F，2383弄62号1F' },
          { 'value': '浮生若茶（凌空soho店）', 'address': '上海长宁区金钟路968号9号楼地下一层' },
          { 'value': 'NONO JUICE  鲜榨果汁', 'address': '上海市长宁区天山西路119号' },
          { 'value': 'CoCo都可(北新泾店）', 'address': '上海市长宁区仙霞西路' },
          { 'value': '快乐柠檬（神州智慧店）', 'address': '上海市长宁区天山西路567号1层R117号店铺' },
          { 'value': 'Merci Paul cafe', 'address': '上海市普陀区光复西路丹巴路28弄6号楼819' },
          { 'value': '猫山王（西郊百联店）', 'address': '上海市长宁区仙霞西路88号第一层G05-F01-1-306' },
          { 'value': '枪会山', 'address': '上海市普陀区棕榈路' },
          { 'value': '纵食', 'address': '元丰天山花园(东门) 双流路267号' },
          { 'value': '钱记', 'address': '上海市长宁区天山西路' },
          { 'value': '壹杯加', 'address': '上海市长宁区通协路' },
          { 'value': '唦哇嘀咖', 'address': '上海市长宁区新泾镇金钟路999号2幢（B幢）第01层第1-02A单元' },
          { 'value': '爱茜茜里(西郊百联)', 'address': '长宁区仙霞西路88号1305室' },
          { 'value': '爱茜茜里(近铁广场)', 'address': '上海市普陀区真北路818号近铁城市广场北区地下二楼N-B2-O2-C商铺' },
          { 'value': '鲜果榨汁（金沙江路和美广店）', 'address': '普陀区金沙江路2239号金沙和美广场B1-10-6' },
          { 'value': '开心丽果（缤谷店）', 'address': '上海市长宁区威宁路天山路341号' },
          { 'value': '超级鸡车（丰庄路店）', 'address': '上海市嘉定区丰庄路240号' },
          { 'value': '妙生活果园（北新泾店）', 'address': '长宁区新渔路144号' },
          { 'value': '香宜度麻辣香锅', 'address': '长宁区淞虹路148号' },
          { 'value': '凡仔汉堡（老真北路店）', 'address': '上海市普陀区老真北路160号' },
          { 'value': '港式小铺', 'address': '上海市长宁区金钟路968号15楼15-105室' },
          { 'value': '蜀香源麻辣香锅（剑河路店）', 'address': '剑河路443-1' },
          { 'value': '北京饺子馆', 'address': '长宁区北新泾街道天山西路490-1号' },
          { 'value': '饭典*新简餐（凌空SOHO店）', 'address': '上海市长宁区金钟路968号9号楼地下一层9-83室' },
          { 'value': '焦耳·川式快餐（金钟路店）', 'address': '上海市金钟路633号地下一层甲部' },
          { 'value': '动力鸡车', 'address': '长宁区仙霞西路299弄3号101B' },
          { 'value': '浏阳蒸菜', 'address': '天山西路430号' },
          { 'value': '四海游龙（天山西路店）', 'address': '上海市长宁区天山西路' },
          { 'value': '樱花食堂（凌空店）', 'address': '上海市长宁区金钟路968号15楼15-105室' },
          { 'value': '壹分米客家传统调制米粉(天山店)', 'address': '天山西路428号' },
          { 'value': '福荣祥烧腊（平溪路店）', 'address': '上海市长宁区协和路福泉路255弄57-73号' },
          { 'value': '速记黄焖鸡米饭', 'address': '上海市长宁区北新泾街道金钟路180号1层01号摊位' },
          { 'value': '红辣椒麻辣烫', 'address': '上海市长宁区天山西路492号' },
          { 'value': '(小杨生煎)西郊百联餐厅', 'address': '长宁区仙霞西路88号百联2楼' },
          { 'value': '阳阳麻辣烫', 'address': '天山西路389号' },
          { 'value': '南拳妈妈龙虾盖浇饭', 'address': '普陀区金沙江路1699号鑫乐惠美食广场A13' }
        ]
      },
      loadIcon () {
        api.requestLocal('static/json/icon.json')
          .then((response) => {
            if (Number(response.data.status) === 200) {
              this.datasourceIcon = response.data.data
            }
          })
          .catch((error) => {
            console.log(error)
          })
      },
      onbeforChange (val) {
//        console.log('befor', val)
      },
      onendChange (val) {
//        console.log('end', val)
      }
    },
    components: {
      InputTemp
    }
  }
</script>

