import 'vue-smooth-picker/dist/css/style.css'
import SmoothPicker from 'vue-smooth-picker'
Vue.use(SmoothPicker)

<template>
  ...
    <smooth-picker ref="smoothPicker" :data="data" :change="change" />
  ...
</template>

  ...
    data () {
      return {
        data: [
          {
            currentIndex: 0,
            flex: 3,
            list: [
              'Plan A - free', 'Plan B - $50', 'Plan C - $100'
            ],
            onClick: this.clickOnPlan,
            textAlign: 'center',
            className: 'row-group'
          },
          {
            divider: true,
            flex: 1,
            text: 'product',
            textAlign: 'center',
            className: 'divider'
          },
          {
            currentIndex: 2,
            flex: 3,
            list: [
              '1 * A item', '2 * A items', '3 * A items', '4 * A items', '5 * A items'
            ],
            onClick: this.clickOnProduct,
            textAlign: 'center',
            className: 'item-group'
          }
        ]
      }
    },
  ...

  ...
    methods: {
      change (gIndex, iIndex) {
        console.info('group:', gIndex, ' index:', iIndex)
      }
    }
  ...

<template>
  <div class="example-page">
    <!-- 3. 使用 -->
    <smooth-picker ref="smoothPicker" :data="data" :change="dataChange" />
    <button class="button" type="button" @click="confirm">Confirm</button>
  </div>
</template>
<script>
  // 1. 引入
  import 'vue-smooth-picker/dist/css/style.css'
  import { SmoothPicker } from 'vue-smooth-picker'
  export default {
    name: 'example-page',
    components: {
      SmoothPicker // 2. 注册组件
    },
    data () {
      return {
        data: [ // 4. 传入数据
          {
            currentIndex: 0,
            flex: 3,
            list: [
              'Plan A - free', 'Plan B - $50', 'Plan C - $100'
            ],
            onClick: this.clickOnPlan,
            textAlign: 'center',
            className: 'row-group'
          },
          {
            divider: true,
            flex: 1,
            text: 'product',
            textAlign: 'center',
            className: 'divider'
          },
          {
            currentIndex: 2,
            flex: 3,
            list: [
              '1 * A item', '2 * A items', '3 * A items', '4 * A items', '5 * A items'
            ],
            onClick: this.clickOnProduct,
            textAlign: 'center',
            className: 'item-group'
          }
        ]
      }
    },
    methods: {
      // 5. 监听变化
      dataChange (gIndex, iIndex) {
        console.info('list', gIndex, iIndex)
        if (gIndex === 0) {
          let currentIndex = 0
          let list = []
          switch (iIndex) {
            case 2:
              list = ['C item 1', 'C item 2', 'C item 3', 'C item 4', 'C item 5', 'C item 6', 'C item 7', 'C item 8', 'C item 9']
              currentIndex = 4
              break
            case 1:
              list = ['1 * B item', '2 * B items', '3 * B items', '4 * B items', '5 * B items', '6 * B items', '7 * B items']
              currentIndex = 3
              break
            default:
              list = ['1 * A item', '2 * A items', '3 * A items', '4 * A items', '5 * A items']
              currentIndex = 2
          }
          this.$refs.smoothPicker.setGroupData(2, Object.assign({}, this.data[2], { currentIndex, list }))
        }
      },
      // 6. 监听中间层点击
      clickOnPlan (gIndex, iIndex) {
        window.alert('Clicked plan: ' + this.data[gIndex].list[iIndex])
      },
      clickOnProduct (gIndex, iIndex) {
        window.alert('Clicked product: ' + this.data[gIndex].list[iIndex])
      },
      // 7. 拿到当前指定的数据索引
      confirm () {
        const ciList = this.$refs.smoothPicker.getCurrentIndexList()
        const planDetail = this.data[0].list[ciList[0]]
        const productDetail = this.data[2].list[ciList[2]]
        window.alert(
          'Confirmed index list: ' + ciList + '.\n' +
          'Confirmed plan: ' + planDetail + '.\n' +
          'Confirmed product: ' + productDetail
        )
      }
    }
  }
</script>