<template>
    <!-- pages/component/dateTimePicker/dateTimePicker.wxml -->
    <view class="tui-picker-content">
        <!-- <view class="tui-picker-name">时间选择器（选择时分）</view>
  <picker mode="time" value="{{time}}" start="09:00" end="17:30" bindchange="changeTime">
    <view class="tui-picker-detail">
      午饭时间: {{time}} 
    </view>
  </picker>
</view>

<view class="tui-picker-content">
  <view class="tui-picker-name">日期选择器（选择年月日）</view>
  <picker mode="date" value="{{date}}" start="2017-10-01" end="2017-10-08" bindchange="changeDate">
    <view class="tui-picker-detail">
      国庆出游: {{date}}
    </view>
  </picker>
</view> -->

        <view class="tui-picker-content">
            <view class="tui-picker-name">日期时间选择器（精确到秒）</view>
            <picker mode="multiSelector" :value="dateTime" @change="changeDateTime" @columnchange="changeDateTimeColumn" :range="dateTimeArray">
                <view class="tui-picker-detail">选择日期时间: {{ dateTimeArray[0][dateTime[0]] }}:{{ dateTimeArray[1][dateTime[1]] }}:{{ dateTimeArray[2][dateTime[2]] }}</view>
            </picker>
        </view>

        <!-- <view class="tui-picker-content">
  <view class="tui-picker-name">日期时间选择器（精确到分）</view>
  <picker mode="multiSelector" value="{{dateTime1}}" bindchange="changeDateTime1" bindcolumnchange="changeDateTimeColumn1" range="{{dateTimeArray1}}">
    <view class="tui-picker-detail">
      选择日期时间: {{dateTimeArray1[0][dateTime1[0]]}}-{{dateTimeArray1[1][dateTime1[1]]}}-{{dateTimeArray1[2][dateTime1[2]]}} {{dateTimeArray1[3][dateTime1[3]]}}:{{dateTimeArray1[4][dateTime1[4]]}}
    </view>
  </picker> -->
    </view>
</template>

<script>
var dateTimePicker = require('../../common/dateTimePicker');
export default {
    data() {
        return {
            dateTimeArray: null,
            dateTime: null,
            startYear: 2000,
            endYear: 2050
        };
    },
    onLoad() {
        // 获取完整的年月日 时分秒，以及默认显示的数组
        var obj = dateTimePicker.dateTimePicker(this.startYear, this.endYear);
        this.setData({
            dateTime: obj.dateTime,
            dateTimeArray: obj.dateTimeArray
        });
    },
    methods: {
        changeDateTime(e) {
            this.setData({
                dateTime: e.detail.value
            });
        },

        changeDateTimeColumn(e) {
            console.log('colum:', e);
            var arr = this.dateTime;
            var dateArr = this.dateTimeArray;
            arr[e.detail.column] = e.detail.value;
            this.setData({
                dateTimeArray: dateArr,
                dateTime: arr
            });
        }
    }
};
</script>
<style>
@import './dateTimePicker.css';
</style>
