<template>
  <div class="day-picker">
    <span @click="onShow">开始选择日期（星期日）</span>
    <p >{{daysText}}</p>
    <day-picker
      title="选择日期"
      :show.sync="show"
      :initValue="days"
      @confirm="onConfirm"
      @cancel="onCancel"
    >
    </day-picker>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
import { DayPicker } from '../../tunas'

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

  data() {
    return {
      // 是否显示选择器
      show: false,
      // 初始默认选中日期
      days: [1],
    }
  },

  computed: {
    daysText(): string[] {
      const defaultDays = [
        { key: 0, name: '周日' },
        { key: 1, name: '周一' },
        { key: 2, name: '周二' },
        { key: 3, name: '周三' },
        { key: 4, name: '周四' },
        { key: 5, name: '周五' },
        { key: 6, name: '周六' },
      ]
      return this.days.map(key => {
        const day = defaultDays.find(item => item.key === key)
        return day ? day.name : ''
      })
    }
  },

  methods: {
    onShow() {
      console.log('show day picker')
      this.show = true
    },
    onConfirm(selectedDays) {
      console.log('on confirm pick day', selectedDays)
      this.days = selectedDays
    },
    onCancel() {
      console.log('on cancel pick day')
    },

  }
})
</script>

<style lang="stylus" scoped>
  .del {
    height 100%
    width 50px
    background #f00
    color #fff
    display flex
    justify-content center
    align-items center
  }
</style>
