<!--日期时间组件选择-
  --type 必选 (date/time)类型
  --start 可选 格式(2018/05/20)日期选择范围的开始 type='date'时生效
  --end 可选 格式(2018/05/20)日期选择范围的结束 type='date'时生效
  ---split 可选 默认'／'， 分隔符 type='date'时生效
  --title 必选 显示的标题
-->
<template>
  <div v-if="type==='date'&&!start&&!end" class="dateTime rows flex flex_ac flex_ct wt">
    <label class="label">{{title}}</label>
    <div class="label-value selectDate" @click="date">{{text?text:'请选择日期'}}</div>
    <mt-datetime-picker ref="picker" type="date" year-format="{value}年" month-format="{value}月" date-format="{value}日" @confirm="handleConfirm">
    </mt-datetime-picker>
  </div>
  <div v-else-if="type==='date'&&start&&!end" class="dateTime rows flex flex_ac flex_ct wt">
    <label class="label">{{title}}</label>
    <div class="label-value selectDate" @click="date">{{text?text:'请选择日期'}}</div>
    <mt-datetime-picker ref="picker" type="date" year-format="{value}年" month-format="{value}月" date-format="{value}日" :startDate="startFrom" @confirm="handleConfirm">
    </mt-datetime-picker>
  </div>
  <div v-else-if="type==='date'&&!start&&end" class="dateTime rows flex flex_ac flex_ct wt">
    <label class="label">{{title}}</label>
    <div class="label-value selectDate" @click="date">{{text?text:'请选择日期'}}</div>
    <mt-datetime-picker ref="picker" type="date" year-format="{value}年" month-format="{value}月" date-format="{value}日" :endDate="endTo" @confirm="handleConfirm">
    </mt-datetime-picker>
  </div>
  <div v-else-if="type==='date'&&start&&end" class="dateTime rows flex flex_ac flex_ct wt">
    <label class="label">{{title}}</label>
    <div class="label-value selectDate" @click="date">{{text?text:'请选择日期'}}</div>
    <mt-datetime-picker ref="picker" type="date" year-format="{value}年" month-format="{value}月" date-format="{value}日" :startDate="startFrom" :endDate="endTo" @confirm="handleConfirm">
    </mt-datetime-picker>
  </div>
  <div v-else-if="type==='time'" class="dateTime rows flex flex_ac flex_ct wt">
    <label class="label">{{title}}</label>
    <div class="label-value selectDate" @click="date">{{time?time:'请选择时间'}}</div>
    <mt-datetime-picker ref="picker" type="time" @confirm="handleTimeConfirm">
    </mt-datetime-picker>
  </div>
</template>
<script>
  export default {
    name: 'dateTime',
    data () {
      return {
        pickerValue:'',
        text:this.val,
        time:'',
        startFrom:'',
        endTo:''
      }
    },
    props:['type','title','split','start','end','val'],
    created:function () {
      this.startFrom = this.start?new Date(this.start):new Date().toLocaleDateString()
      this.endTo = this.end?new Date(this.end):new Date().toLocaleDateString()
    },
    watch:{
      val:function () {
        console.log(this.val)
        this.text = this.val
      },
      start:function () {
        this.startFrom = this.start?new Date(this.start):new Date().toLocaleDateString()
      },
      end:function () {
        this.endTo = this.end?new Date(this.end):new Date().toLocaleDateString()
      }
    },
    methods: {
      date(){
        this.$refs.picker.open();
      },
      //日期选择
      handleConfirm(date){
        console.info(date);
        var time = date.toLocaleDateString();
        console.info(time);
        this.text = date.toLocaleDateString().replace(/\//g,this.split?this.split:'-');
        if(this.text.substring(6,7) == "-" && this.text.length == "9"){
          var time = this.text.substring(0,5)+"0"+this.text.substring(5,9)
        }else if(this.text.substring(6,7) == "-" && this.text.length == "8"){
          var time = this.text.substring(0,5)+"0"+this.text.substring(5,7)+"0"+this.text.substring(7,8)
        }else if(this.text.substring(7,8) == "-" && this.text.length == "9"){
          var time = this.text.substring(0,8)+"0"+this.text.substring(8,9)
        }else{
          var time = this.text;
        }
        console.info(time);
        this.$emit('getDateTime',time)
      },
      //时间选择
      handleTimeConfirm(time){
        this.time = time
        this.$emit('getDateTime',this.time)
      }
    }
  }
</script>
<style scoped>
  @import "../../css/style.css";
</style>
