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

  https://www.mall4j.com/

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

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

<template>
  <view class="Mall4j page-presell-time">
    <view class="option-date">
      {{ $t('xuanZeRiQi') }}
    </view>
    <view class="date xp-picker">
      <xp-picker
        ref="dateRef"
        v-model="date"
        @input="dateChange"
      />
    </view>
    <common-btn
      :btn-config="btnConfig"
      @handle-click-btn="submit()"
    />
  </view>
</template>

<script setup>
import { reactive, toRefs } from 'vue'

onShow(() => {
  uni.setNavigationBarTitle({
    title: $t('yuShouShiJian')
  })
})

const prodStore = useProdStore()

const Data = reactive({
  date: prodStore.dataForm.preSellTime.split(' ')[0],
  itme: '00:00:00',
  btnConfig: {
    btnText: $t('queDing'),
    isPlain: false,
    isChecked: false,
    isSelect: false,
    btnList: []
  }
})

const { date, btnConfig } = toRefs(Data)

const dateRef = ref()
const submit = async () => {
  await nextTick(() => {
    dateRef.value._confirm()
  })
  const myDate = new Date()
  const now = myDate.valueOf()
  const time = new Date(Data.date + ' ' + Data.itme).valueOf()
  if (now > time) {
    uni.showToast({
      title: $t('yuShouShiJianBuNengXiaoYuDangQianShiJian'),
      icon: 'none'
    })
    return
  }
  prodStore.dataForm.preSellTime = Data.date + ' ' + Data.itme
  uni.redirectTo({
    url: '/package-prod/pages/post-prod/post-prod'
  })
}

</script>

<style lang="scss" scoped>
 .page-presell-time{
    width: 100%;
    position: fixed;
    overflow: auto;
    top: 0;
    left: 0;
    min-height: 100vh;
    font-size: 28rpx;
    background-color: #f8f8f8;
    height: 100vh;
    color: #333;
    font-family: PingFang SC;
    .xp-picker:deep(.uni-picker-view-wrapper .uni-picker-view-mask){
      margin-top: -1%;
      height: 102%;
    }

    .option-date{
      height: 88rpx;
      line-height: 88rpx;
      color: #666666;
      padding: 0 30rpx;
    }

    .date{
      box-sizing: border-box;
      background-color: #fff;
      padding: 30rpx;
    }
    :deep(.bottom){
      margin-bottom: 20rpx;
    }

  }
  :deep(.van-hairline-unset--top-bottom.van-picker__frame){

    background: rgba(247, 248, 250, 0.3) !important;
  }
  :deep(.van-ellipsis){
    z-index: 10000 !important;
  }
</style>
