<template>
  <div class="actionDialog">
    <p @click="onShow('1')" style="font-size:20px">点我看1 - number</p>
    <p >val1: {{val}}</p>
    <p @click="onShow('2')" style="font-size:20px;margin-top:20px;">点我看2 - 多选</p>
    <p >val2: {{val2}}</p>
    <p @click="onShow('3')" style="font-size:20px;margin-top:20px;">点我看3 - string</p>
    <p >val3: {{val3}}</p>
    <select-picker title="自定义标题" closeBtn="取消按钮" confirmBtn="下一步"
      :show.sync="show" :listData="list" v-model="val"
      @change="onChange" @confirm="onConfirm" @cancel="onCancel"
    >
    </select-picker>
    <select-picker v-model="val2" :show.sync="show2" :listData="list2" multi
      @change="onChange" @confirm="onConfirm" @cancel="onCancel"
    >
    </select-picker>
    <select-picker v-model="val3" :show.sync="show3" :listData="list3"
      @change="onChange" @confirm="onConfirm" @cancel="onCancel"
    >
    </select-picker>
  </div>
</template>
<script lang="ts">
import Vue from 'vue'
import { SelectPicker } from '../../tunas'

export default Vue.extend({
  components: {
    SelectPicker
  },

  data() {
    return {
      val: 1,
      show: false,
      list: Array.from({ length: 10 }, (value, index) => 'customValue' + index)
        .map((val, index) => {
          return {
            label: val,
            value: index
          }
        }),
      val2: [1, 2],
      show2: false,
      list2: [
        Array(10).fill(1).map((v, i) => ({ label: `Fir_${i}`, value: i })),
        Array(10).fill(1).map((v, i) => ({ label: `Sec_${i}`, value: i }))
      ],
      val3: '',
      show3: false,
      list3: Array(20).fill(1).map((v, i) => ({ label: `Val_${i}`, value: `s_${i}` })),
    }
  },

  methods: {
    onShow (type) {
      if (type === '1') {
        this.show = true
      } else if (type === '2') {
        this.show2 = true
      } else if (type === '3') {
        this.show3 = true
      }
    },
    onChange (val) {
      console.log('onChange', val)
    },
    onConfirm (val) {
      console.log('onConfirm', val)
    },
    onCancel () {
      console.log('onCancel')
    },
  },

  mounted () {
  }
})
</script>
