<template>
  <uni-popup ref="popupRef" :is-mask-click="false" animation type="bottom">
    <view class="popup_box">
      <view v-if="titleText" class="header_title">
        {{ titleText }}
      </view>
      <wd-datetime-picker-view
        v-model="timeDate"
        type="time"
        label="时分"
        :minHour="minHour"
        :minMinute="minMinute"
        :maxMinute="cusMaxMinute"
        :maxHour="maxHour"
        :formatter="formatter"
        @change="change"
      />
      <view class="footer">
        <button class="cancel_btn flex-center" @click="tapCancelBtn">取消</button>
        <button class="confirm_btn flex-center" @click="tapConfirmBtn">确定</button>
      </view>
    </view>
  </uni-popup>
</template>
<script setup lang="ts">
import { ref, watch, nextTick } from 'vue';
const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false,
  },
  titleText: {
    type: String,
    default: '',
  },
  cancelBtnText: {
    type: String,
    default: '取消',
  },
  confirmBtnText: {
    type: String,
    default: '确定',
  },
  minHour: {
    type: Number,
    default: 0,
  },
  minMinute: {
    type: Number,
    default: 0,
  },
  maxHour: {
    type: Number,
    default: 23,
  },

  maxMinute: {
    type: Number,
    default: 59,
  },
  rangeType: {
    type: String,
    default: 'start',
  },
});
const emits = defineEmits(['update:modelValue', 'handleConfirmBtn', 'handleCancelBtn']);
const popupRef = ref();
const cusMaxMinute = ref();
const timeDate = ref<string>('');
// 确认
function tapConfirmBtn() {
  emits('handleConfirmBtn', timeDate.value);
  tapCancelBtn();
}
// 取消
function tapCancelBtn() {
  popupRef.value.close();
  emits('update:modelValue', false);
  emits('handleCancelBtn');
}
function change({ value }) {
  const hour = value.split(':')[0];
  if (hour === 23 && props.maxHour === 23 && props.rangeType === ' start') {
    cusMaxMinute.value = 58;
  } else {
    cusMaxMinute.value = props.maxMinute;
  }
}
watch(
  () => props.modelValue,
  () => {
    if (props.modelValue) {
      nextTick(() => {
        popupRef.value.open();
      });
    } else {
      nextTick(() => {
        popupRef.value && popupRef.value.close();
      });
    }
  },
  {
    immediate: true,
    deep: true,
  },
);
watch(
  () => props.maxMinute,
  val => {
    cusMaxMinute.value = val;
  },
);
const formatter = (type, value) => {
  switch (type) {
    case 'year':
      return value + '年';
    case 'month':
      return value + '月';
    case 'date':
      return value + '日';
    case 'hour':
      return value + '时';
    case 'minute':
      return value + '分';
    default:
      return value;
  }
};
</script>
<style lang="scss" scoped>
.popup_box {
  position: relative;
  max-height: 660rpx;
  min-height: 300rpx;
  background-color: #fff;
  border-radius: 20rpx 20rpx 0 0;
  overflow: hidden;
  padding-bottom: 110rpx;

  .header_title {
    color: #0a1f13;
    font-size: 32rpx;
    font-weight: 600;
    line-height: 32rpx;
    padding: 30rpx;
    box-sizing: border-box;
    margin-bottom: 20rpx;
  }
  .container {
    padding: 40rpx 30rpx;
    box-sizing: border-box;
  }

  .footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    width: 100%;
    padding: 30rpx;
    box-sizing: border-box;
    border-top: 1px solid #eeeeee;
    bottom: 0;
    z-index: 9;
    background-color: #fff;
    button::after {
      border: none;
    }

    .cancel_btn {
      width: 230rpx;
      height: 90rpx;
      line-height: 90rpx;
      color: #615dff;
      font-size: 30rpx;
      background-color: #ececff;
      border-radius: 20rpx;
    }

    .confirm_btn {
      margin-left: 20rpx;
      height: 90rpx;
      line-height: 90rpx;
      width: 440rpx;
      color: #fff;
      font-size: 30rpx;
      border-radius: 20rpx;
      background: #615dff;
    }
  }
}
:deep(.uni-picker-view-content) {
  color: #a9aab5;
}
:deep(.wd-picker-view-column__item--active) {
  color: #0a1f13 !important;
}
:deep(.wd-picker-view__roller) {
  background: #fff;
  border-top: 1rpx solid #ebebeb;
  border-bottom: 1rpx solid #ebebeb;
}
</style>
