<script lang="ts" setup>
import dayjs from 'dayjs';

const {t} = useI18n();
const show = ref(false);
const emits = defineEmits(['confirm'])

// 周几选择状态
const selectedDays = ref<string[]>([]);

// 时间选择
const startTime = ref(null);
const endTime = ref(null);

// 周几选项
const dayOptions = [
  {key: 'MONDAY', label: t('pages-user.store-management.index.hours.days.monday')},
  {key: 'TUESDAY', label: t('pages-user.store-management.index.hours.days.tuesday')},
  {key: 'WEDNESDAY', label: t('pages-user.store-management.index.hours.days.wednesday')},
  {key: 'THURSDAY', label: t('pages-user.store-management.index.hours.days.thursday')},
  {key: 'FRIDAY', label: t('pages-user.store-management.index.hours.days.friday')},
  {key: 'SATURDAY', label: t('pages-user.store-management.index.hours.days.saturday')},
  {key: 'SUNDAY', label: t('pages-user.store-management.index.hours.days.sunday')}
];


// 切换周几选择
function toggleDay(dayKey: string) {
  const index = selectedDays.value.indexOf(dayKey);
  if (index > -1) {
    selectedDays.value.splice(index, 1);
  } else {
    selectedDays.value.push(dayKey);
  }
}

// 当前选中的是开始时间还是结束时间
const currentTimeType = ref<'start' | 'end'>('start');

function changeTimeSelected(type: 'start' | 'end') {
  currentTimeType.value = type;
}

// 时间选项生成
const timeValue = ref('')

function dateTimeChange(e: any) {
  console.log(e)
  console.log(timeValue.value)
  switch (currentTimeType.value) {
    case 'start':
      startTime.value = e.value
      break
    case 'end':
      endTime.value = e.value
      break
  }
}

// 验证时间
function validateTime() {
  const start = dayjs(`2024-01-01 ${startTime.value}`);
  const end = dayjs(`2024-01-01 ${endTime.value}`);

  if (start.isAfter(end)) {
    uni.showToast({
      title: t('pages-user.store-management.index.hours.startTimeCannotLaterThanEndTime'),
      icon: 'none'
    });
    return false;
  }
  return true;
}

// 生成最终字符串
function generateTimeString() {
  if (selectedDays.value.length === 0) {
    uni.showToast({
      title: t('pages-user.store-management.index.hours.pleaseSelectAtLeastOneDay'),
      icon: 'none'
    });
    return '';
  }

  if (!validateTime()) {
    return '';
  }

  return `${selectedDays.value.join('/')} ${startTime.value}-${endTime.value}`;
}

function onOpen() {
  show.value = true;
}

function handleClose() {
  show.value = false;
}

function handleSubmit() {
  if (!startTime.value || !endTime.value) {
    uni.showToast({
      title: t('pages-user.store-management.index.hours.pleaseSelectStartAndEndTime'),
      icon: 'none'
    });
    return;
  }
  const timeString = generateTimeString();
  console.log(timeString)
  if (timeString) {
    emits('confirm', timeString);
    handleClose();
  }
}

defineExpose({
  onOpen,
});
</script>

<template>
  <view>
    <wd-popup
        v-model="show"
        position="bottom"
        @close="handleClose"
    >
      <view>
        <view class="flex-center-sb h-102rpx bg-#F7F7F7 px-30rpx">
          <view class="text-30rpx text-#999" @click="handleClose">{{ t('common.cancel') }}</view>
          <view class="text-34rpx text-#333">{{ t('pages-user.store-management.index.hours.businessHours') }}</view>
          <view class="text-30rpx text-#333106" @click="handleSubmit">{{ t('common.confirm') }}</view>
        </view>

        <!-- 周几选择 -->
        <view class="px-30rpx py-40rpx">
          <text class="text-24rpx lh-28rpx text-#9E9E9E mb-36rpx block">
            {{ t('pages-user.store-management.index.hours.selectDayPrompt') }}
          </text>

          <view class="grid grid-cols-4 gap-18rpx gap-y-28rpx">
            <view
                v-for="day in dayOptions"
                :key="day.key"
                :class="[
                'day-item',
                selectedDays.includes(day.key) ? 'day-item-active' : 'day-item-inactive'
              ]"
                @click="toggleDay(day.key)"
            >
              {{ day.label }}
            </view>
          </view>

          <!-- 时间选择 -->
          <view class="center mt-78rpx">
            <view :class="[currentTimeType === 'start' ? 'text-#333 border-b-#333' : 'text-#999 border-b-#DFDFDF']" class="border-b-solid border-b-1px w-280rpx text-center"
                  @click="changeTimeSelected('start')">
              <text v-if="startTime">{{ startTime }}</text>
              <text v-else>{{ t('pages-user.store-management.index.hours.startTime') }}</text>
            </view>
            <view class="mx-35rpx">
              <wd-icon name="decrease" size="12px"></wd-icon>
            </view>
            <view :class="[currentTimeType === 'end' ? 'text-#333 border-b-#333' : 'text-#999 border-b-#DFDFDF']" class="border-b-solid border-b-1px w-280rpx text-center"
                  @click="changeTimeSelected('end')">
              <text v-if="endTime">{{ endTime }}</text>
              <text v-else>{{ t('pages-user.store-management.index.hours.endTime') }}</text>
            </view>
          </view>

          <view class="px-30rpx pt-50rpx">
            <wd-datetime-picker-view v-model="timeValue" :columns-height="140" type="time" @change="dateTimeChange"/>
          </view>
        </view>
      </view>
    </wd-popup>
  </view>
</template>

<style lang="scss" scoped>
:deep(.uni-picker-view-wrapper) {
  & > uni-picker-view-column:first-of-type .uni-picker-view-group {
    .uni-picker-view-indicator {
      border-radius: 20rpx 0 0 20rpx !important;

      &:after {
        border: none;
      }

      &:before {
        border: none;
      }
    }
  }

  & > uni-picker-view-column:nth-of-type(2) .uni-picker-view-group {
    .uni-picker-view-indicator {
      border-radius: 0 20rpx 20rpx 0 !important;

      &:after {
        border: none;
      }

      &:before {
        border: none;
      }
    }
  }
}

:deep(.wd-picker-view-column__item) {
  line-height: 94rpx !important;
}

:deep(.uni-picker-view-indicator) {
  height: 94rpx !important;
}

.day-item {
  height: 66rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 16rpx;
  font-size: 28rpx;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
}

.day-item-active {
  border: 2rpx solid #3D3D3D;
  background-color: #3D3D3D;
  color: #FFFFFF;
}

.day-item-inactive {
  background-color: #FFFFFF;
  color: #3D3D3D;
  border: 2rpx solid #D8D8D8;
}
</style>