<template>
  <div class="day-picker">
    <span @click="onShow">开始选择日期（星期日）</span>
    <p>已选择数据：{{isSelectAlways ? '始终有效' : days}}</p>
    <iot-day-picker
      title="选择有效周期"
      alwaysText="始终有效"
      :show.sync="show"
      :initValue="days"
      @confirm="onConfirm"
      @confirm-always="onConfirmAlways"
      @cancel="onCancel"
    >
    </iot-day-picker>
  </div>
</template>

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

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

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

  methods: {
    onShow() {
      console.log('show day picker')
      this.show = true
    },
    onConfirm(selectedDays) {
      console.log('on confirm select day', selectedDays)
      this.days = selectedDays
      this.isSelectAlways = false
    },
    onConfirmAlways() {
      console.log('on confirm select always')
      this.days = []
      this.isSelectAlways = true
    },
    onCancel() {
      console.log('on cancel select day')
    },
  }
})
</script>

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