<template>
  <upaas-popover  class='upaas_popover' :show-mask='showMask' @on-mask-click="handleOnMask" :open="openPopover" :auto-position="false"
    :append-body="false"  :trigger="trigger" :distance='0' :anchor-origin="anchorOrigin"
    :target-origin="targetOrigin">
    <upaas-datetime-view v-model="selectDate" :cancel-text='cancelText' :confirm-text="confirmText"  @on-confirm="handleOnConfirm"
     :yearRow="yearRow"  @hide-on-blur="true" :monthRow="monthRow" :dayRow="dayRow"
     :format='format' @on-hide="handleOnHide"
     :show.sync="show"></upaas-datetime-view>
  </upaas-popover>

</template>
<script type="text/javascript">
 import DateTimeView from '../datetime-view';
 import Popover from '../popover';
 // import Popup from '../popup/popup'
 export default {
  name:'upaas-popdatetimeview',
  components:{
    'upaas-popover':Popover,
    'upaas-datetime-view':DateTimeView,
  },
  //extends:DateTimeView,
  props: {
    trigger: null,
    open:{
      type:Boolean,
      default:false,
    },
    showMask:{
      type:Boolean,
      default:true
    },
    anchorOrigin: {
      vertical: 'bottom',
      horizontal: 'left',
    },
    targetOrigin: {
      vertical: 'top',
      horizontal: 'left',
    },
    date:String,
    format: {
      type: String,
      default: 'YYYY-MM-DD'
    },
    buttonPositon:{
      type:String,
      default:'top'
    },
    title: String,
    value: {
      type: String,
      default: ''
    },
    inlineDesc: String,
    placeholder: String,
    minYear: Number,
    maxYear: Number,
    clearText: String,
    yearRow: {
      type: String,
      default: '{value}年'
    },
    monthRow: {
      type: String,
      default: '{value}月'
    },
    dayRow: {
      type: String,
      default: '{value}日'
    },
    hourRow: {
      type: String,
      default: '{value}'
    },
    minuteRow: {
      type: String,
      default: '{value}'
    },
    required: {
      type: Boolean,
      default: false
    },
    minHour: {
      type: Number,
      default: 0
    },
    maxHour: {
      type: Number,
      default: 23
    },
    cancelText:String,
    confirmText: String,
    startDate: {
      type: String,
      validator (val) {
        /* istanbul ignore if */
        if (process.env.NODE_ENV === 'development' && val && val.length !== 10) {
          console.error(' Datetime prop:start-date 必须为 YYYY-MM-DD 格式')
        }
        return val ? val.length === 10 : true;
      }
    },
    endDate: {
      type: String,
      validator (val) {
        /* istanbul ignore if */
        if (process.env.NODE_ENV === 'development' && val && val.length !== 10) {
          console.error('Datetime prop:end-date 必须为 YYYY-MM-DD 格式')
        }
        return val ? val.length === 10 : true
      }
    },
    hideOnBlur: {
      type: Boolean,
      default: true
    },
  },
  data(){
    return {
      show:true,
      openPopover:this.open,
      selectDate:this.date,
    }
  },
  created(){

  },
  mounted(){
    console.log(this.yearRow);
  },
  watch:{
    open(val){
      this.show = val;
      this.openPopover = val;
    },
    date(v){
      console.log(v);
      this.selectDate = v;
    }
  },
  methods:{
    handleOnConfirm(val){
      this.selectDate = val;
      this.show = false;
      this.openPopover = false;
      this.$emit('on-confirm', val)
    },
    handleOnMask(v){
      this.show = false;
      this.openPopover = false;
      this.$emit('on-mask-click');
    },
    handleOnHide(v){
      this.show = false;
      this.openPopover = false;
      if (!v) {
        this.$emit('on-hide');
      }

    }
  },
 };

</script>
<style lang='less' scoped>
  .upaas-popup-mask {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4) !important;
    opacity: 1;
    tap-highlight-color: rgba(0,0,0,0);
    z-index: 500;
    transition: opacity 400ms;
  }
</style>