<!--
  Copyright (c) 2018-2999 广州市蓝海创新科技有限公司 All rights reserved.

  https://www.mall4j.com/

  未经允许，不可做商业用途！

  版权所有，侵权必究！
-->

<template>
  <view class="Mall4j component-date-popup">
    <view
      class="mask"
      @tap.stop="cancal"
    />
    <view class="content-box">
      <view class="title">
        <view
          class="item"
          @tap.stop="cancal"
        >
          {{ $t('quXiao-0') }}
        </view>
        <view
          class="item"
          @tap.stop="submitData"
        >
          {{ $t('queDing') }}
        </view>
      </view>
      <view class="date-item">
        <date-picker
          v-if="type === 'day'"
          v-model="data"
          :check-past="checkPast"
          :format="format"
          @input="getDate"
        />
        <month-picker
          v-if="type === 'month'"
          v-model="data"
          :check-past="checkPast"
        />
      </view>
    </view>
  </view>
</template>

<script setup>
const emit = defineEmits(['cancal', 'handleDate'])

const props = defineProps({
  type: {
    type: String,
    default: 'day'
  },
  vaule: {
    type: String,
    default: ''
  },
  format: {
    type: String,
    default: 'YYYY-MM-DD HH:mm:ss'
  },
  checkPast: {
    type: Boolean,
    default: false
  }
})

// eslint-disable-next-line vue/no-setup-props-destructure
const data = ref(props.vaule)
const dateFormat = ref('')

const cancal = () => {
  emit('cancal')
}
// eslint-disable-next-line no-unused-vars
const getDate = (date, format) => {
  dateFormat.value = format
}
const submitData = () => {
  emit('handleDate', {
    type: props.type,
    data: data.value,
    format: dateFormat.value
  })
}

</script>

<style lang="scss" scoped>
.component-date-popup {
  @keyframes window-open {
    0% {
      bottom: -540rpx;
    }
    100% {
      bottom: 0;
    }
  }
  .content-box {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #ffffff;
    height: 540rpx;
    box-sizing: border-box;
    padding: 30rpx 0;
    border-radius: 20rpx 20rpx 0px 0px;
    animation: window-open 0.4s 1;
    z-index: 1000;
    .title {
      padding: 0 30rpx;
      font-size: 28rpx;
      line-height: 34rpx;
      color: #082BA6;
      display: flex;
      justify-content: space-between;
      margin-bottom: 30rpx;
    }
    .date-item {
      border-top: 2rpx solid #f1f1f1;
      font-size: 28rpx;
    }
  }
}

</style>
