<template>
  <view class="xd-form-date">
    <view class="xd-form-date__input">
      <xd-form-input
        v-model="date"
        @focus="handleClearStyle(1)"
        @blur="handleClearStyle(0)"
        :placeholder="placeholder"
      ></xd-form-input>
    </view>
    <view class="xd-form-date__icon" @click.stop="handleClick">
      <xd-font-icon
        icon="iconxuanzeriqi"
        color="#333"
        size="40"
      ></xd-font-icon>
    </view>
    <view
      class="xd-form-date__clear"
      @click.stop="handleClear"
      :class="{
        'visibility-visible': clear && date,
         'visibility-hidden': !clear || !date,
      }"
    >
      <xd-font-icon
        icon="iconyduicuowushixin"
        color="#999"
        size="32"
      ></xd-font-icon>
    </view>
    <xd-date
      :date="defaultTime"
      :show.sync="show"
      :select-type="false"
      :current-is-show-other-month="true"
      :clearDate="false"
      :showMonth="false"
      :range="false"
      :insert="false"
      :is-show-dat="false"
      :pleStatus="endMultipleStatus"
      @confirm="monthSwitch"
      :z-index="zIndex"
      :type-has-time="showHourAndMinute"
      :hide-second="!showSecond"
    ></xd-date>
  </view>
</template>

<script>
  import XdFormInput from "@/components/XdFormInput/XdFormInput";
  import XdFontIcon from "@/components/XdFontIcon/XdFontIcon";
  import XdDate from "@/components/XdDate/XdDate";
  export default {
    name: "XdFormDate",
    components: {
      XdFontIcon,
      XdFormInput,
      XdDate
    },
    props: {
      //返回时间戳格式（毫秒）
      defaultValue: {
        type: Number|null,
        default: null,
      },
      placeholder:{
        type: String,
        default: '请选择日期',
      },

      //显示小时与分钟
      showHourAndMinute: {
        type: Boolean,
        default: true,
      },

      zIndex: {
        type: Number,
        default: 3001
      },

      showSecond: {
        type: Boolean,
        default: false,
      }
    },
    data(){
      return {
        clear: false,
        defaultTime: null,
        show: false,
        date: '',
        focus: false,
        endMultipleStatus: {
          before: '',
          after: '',
          data: [],
          fulldate: ''
        },
      }
    },
    created() {
      if(this.defaultValue) {
        let date = new Date(Number(this.defaultValue));
        if(!this.showHourAndMinute) {
          this.date = this.$xdUniHelper.getDate(date).fullDate
        }
        else {
          this.date = this.$xdUniHelper.getDate(date).fullTime
        }
      }


    },
    methods: {
      handleClear(){
        this.date = '';
        this.$emit('input', '');
        this.$emit('change', null);
        this.$emit('clear');
      },
      handleClearStyle(type){
        this.clear = type === 1;
      },
      handleClick(){
        this.show = true;
      },
      monthSwitch(e) {
        if (!this.showHourAndMinute) {
          this.date = e.fulldate
        } else {
          this.date = e.fullTime;
        }
        this.$emit('input', e.timestamp);
        this.$emit('change', e);

      }
    }
  }
</script>

<style scoped lang="less">
.visibility {
  &-visible {
    visibility: visible;
  }

  &-hidden {
    visibility: hidden;
  }
}
.xd-form-date {
  position: relative;

  &__input {
    position: relative;
  }

  &__clear {
    position: absolute;
    top: unit(14, rpx);
    right: unit(60, rpx);
    width: unit(50, rpx);
    height: unit(50, rpx);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 199;
    opacity: .7;

  }

  &__icon {
    position: absolute;
    top: unit(10,rpx);
    right: unit(10, rpx);
    width: unit(50,rpx);
    height: unit(50, rpx);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 199;
  }
}
</style>
