<template>
  <demo-section>
    <demo-block>
      <drip-button @click="showPop(1)">正常picker</drip-button>
      <drip-button @click="showPop(2)">二级picker</drip-button>
      <drip-button @click="showPop(3)">三级picker</drip-button>
      <drip-popup
        v-model="popup.show"
        :title="'piker'"
        position="bottom">
        <div>
          <drip-picker
            v-if="popup.type === 1"
            :slots="bankList"
            value-key="name"
            @change="onValuesChange">
          </drip-picker>
        </div>

        <div>
          <drip-picker
            v-if="popup.type === 2"
            :slots="list2"
            value-key="name"
            @change="onValuesChange">
          </drip-picker>
        </div>

        <div>
          <drip-picker
            v-if="popup.type === 3"
            :slots="list3"
            @change="onValuesChange">
          </drip-picker>
        </div>
      </drip-popup>
    </demo-block>

  </demo-section>
</template>

<script>
export default {
  data () {
    return {
      popup: {
        show: false,
        type: ''
      },
      bankList: [{
        flex: 1,
        defaultIndex: 1,
        values: [{
          name: '111',
          value: 111
        }, {
          name: '222',
          value: 222
        }, {
          name: '333',
          value: 333
        }, {
          name: '444',
          value: 444
        }, {
          name: '555',
          value: 555
        }, {
          name: '666',
          value: 666
        }],
        textAlign: 'center'
      }],
      list2: [
        {
          flex: 1,
          values: [{name: '2010'}, {name: '2011'}, {name: '2012'}, {name: '2013'}, {name: '2014'}, {name: '2015'}],
          className: 'slot1',
          textAlign: 'right'
        }, {
          divider: true,
          content: '-',
          className: 'slot2'
        }, {
          flex: 1,
          values: [{name: '2010'}, {name: '2011'}, {name: '2012'}, {name: '2013'}, {name: '2014'}, {name: '2015'}],
          className: 'slot3',
          textAlign: 'left'
        }
      ],
      list3: [{
        flex: 1,
        values: ['2013', '2014', '2015', '2016', '2017', '2018']
      }, {
        flex: 1,
        values: ['2013', '2014', '2015', '2016', '2017', '2018']
      }, {
        flex: 1,
        values: ['2013', '2014', '2015', '2016', '2017', '2018']
      }]
    }
  },
  methods: {
    showPop (type) {
      this.popup = {
        type,
        show: true
      }
    },
    onValuesChange (picker, values) {
      console.log(values)
      if (values[0] && values[1]) {
        if (values[0].name > values[1].name) {
          picker.setSlotValue(1, values[0])
        }
      }
    }
  }
}
</script>
