<template>
    <div id="select-list">
        <select-list ref="items" class="select-list" :info="selectInfo" :activeColor="activeColor" v-on:selectBack="selectBack" ></select-list>
        <select-list ref="items2" class="select-list" :info="selectInfo2" v-on:selectBack="selectBack"></select-list>

        <div @click="refresh">重置一下下</div>
        <div @click="refresh2">重置一下下222</div>
    </div>
</template>
<script lang='ts'>
import Vue from 'vue'
import { SelectList } from '../../tunas'
export default Vue.extend({
  components: { SelectList },
  data() {
    return {
      activeColor: '#0082FF',
      msg: 'This is select list',
      selectInfo: [
        // 自定义列表选择
        {
          activeVal: '妲已',
          values: [{
            text: '哪吒'
          },{
            text: '杨戬'
          },{
            text: '姜子牙'
          },{
            text: '雷震子'
          },{
            text: '妲已'
          },{
            text: '黄天化'
          },{
            text: '黄飞虎'
          },{
            text: '太乙真人'
          }]
        },
        // 年份选择设置
        {
          activeVal: '2001',
          max: 2020,
          min: 1995,
          unit: '年',
          name: 'years',
        },
        // 月份选择设置
        {
          activeVal: '05',
          name: 'months'
        },
        // 天选择设置
        {
          activeVal: '05',
          name: 'days'
        },
      ],
      selectInfo2: [
        // 自定义列表选择
        {
          activeVal: '妲已22',
          values: [{
            text: '哪吒22'
          },{
            text: '杨戬22'
          },{
            text: '姜子牙22'
          },{
            text: '雷震子'
          },{
            text: '妲已22'
          },{
            text: '黄天化'
          },{
            text: '黄飞虎'
          },{
            text: '太乙真人'
          }]
        },
        // 年份选择设置
        {
          activeVal: '2001',
          max: 2020,
          min: 1995,
          unit: '年',
          name: 'years',
        },
        // 月份选择设置
        {
          activeVal: '05',
          name: 'months'
        },
        // 天选择设置
        {
          activeVal: '05',
          name: 'days'
        },
      ]
    }
  },
  created() {
    this.$nextTick(() => {
      // setTimeout(() => {
      // this.selectInfo[0].values.splice(0, 1);
      // this.$refs.selectList.init();
      // }, 2000);
    })
  },
  methods: {
    refresh() {
      this.selectInfo[0].activeVal = '杨戬'
      this.$refs.items['init']();
    },
    refresh2() {
      this.selectInfo[1].activeVal = '哪吒22'
      this.$refs.items2['init']();
    },
    // 多功能滑动回调
    selectBack(val) {
      console.log(val, 'select list touch move callback')
    }
  }
})
</script>
<style lang="stylus" scoped>
.select-list{
    margin: 20px 0;
}
</style>
