<template>
  <view>
    <view class="select_day_btn" @click="onPopupShow">
      <template v-if="custom_date_select?.length > 1">
        <text>
          {{ custom_date_select[0] }}至{{ custom_date_select[1] ? custom_date_select[1] : '' }}
        </text>
        <uni-icons type="down" color="#333" size="12" />
      </template>
      <template v-else>
        <text>{{ okShowDayInfo?.label }}-{{ okShowDayInfo?.value }}</text>
        <uni-icons type="down" color="#333" size="12" />
      </template>
    </view>
    <nchl-popup :show="popupShow" @close="onPopupShow" mode="bottom" closeable :round="20">
      <view class="popup_day_select_body">
        <view class="popup_day_select_title"> 日期选择 </view>

        <view class="popup_day_header">
          <view class="popup_day_select_left">
            <view
              v-for="(i, index) in dayTypeList"
              :key="`day_${index}`"
              :class="`select_type_btn ${
                i?.value === dayType?.value ? 'select_type_btn_active' : ''
              }`"
              @click="onSelectType(i)"
            >
              {{ i.label }}
            </view>
          </view>
          <view class="popup_day_select_right">
            <view class="select_date_group_btn">
              <view
                v-for="(i, idx) in dateSelect[dayType?.value as keyof typeof dateSelect]"
                :key="`key_${idx}`"
                :class="`select_date_btn ${
                  i?.value === dateSelectEd?.value ? 'select_date_btn_active' : ''
                }`"
                @click="onSelectDateValue(i)"
              >
                {{ i?.label }}
              </view>
            </view>
            <view class="custom_date_form">
              <picker mode="date" @change="onChangeStart">
                <view class="custom_date_btn">
                  <text v-if="custom_date_select[0]">
                    {{ custom_date_select[0] }}
                  </text>
                  <text v-else class="day_placeholder">选择开始日期</text>
                  <uni-icons type="right" color="#999" size="12" />
                </view>
              </picker>

              <view class="setp_line"> - </view>
              <picker
                mode="date"
                @change="onChangeEnd"
                :start="custom_date_select[0]"
                :end="custom_end_day"
              >
                <view class="custom_date_btn">
                  <text v-if="custom_date_select[1]">
                    {{ custom_date_select[1] }}
                  </text>
                  <text v-else class="day_placeholder">选择结束日期</text>
                  <uni-icons type="right" color="#999" size="12" />
                </view>
              </picker>
            </view>
          </view>
        </view>
        <view class="popup_day_footer">
          <nchl-button style="width: 100%" label="确定" size="md" @click="onSubmit" />
        </view>
      </view>
    </nchl-popup>
  </view>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { getOverDay, getThreeMonthsLater } from '@/common/libraries/day'
const emit = defineEmits(['close', 'change'])
const okShowDayInfo = ref({ label: '按日', value: '近7天' })
const dayType = ref({ label: '按日', value: 'day' })
const dateSelectEd = ref({ label: '近7天', value: 7 })
const popupShow = ref(false)
const custom_date_select = ref<any>([])
const custom_end_day = ref('')

const onPopupShow = () => {
  popupShow.value = !popupShow.value
}

const onSelectType = (e: { label: string; value: string }) => {
  dayType.value = e
  dateSelectEd.value = dateSelect[dayType?.value?.value as keyof typeof dateSelect][0]
}

const onSelectDateValue = (e: { label: string; value: number }) => {
  dateSelectEd.value = e
  custom_date_select.value = []
}

const onChangeStart = (e: any) => {
  custom_date_select.value[0] = e.detail.value
  custom_end_day.value = getThreeMonthsLater(3, e.detail.value)
  console.log('onChangeEnd', e.detail.value, custom_end_day.value)
}

const onChangeEnd = (e: any) => {
  custom_date_select.value[1] = e.detail.value
  console.log('onChangeEnd', custom_date_select.value)
}

const dayTypeList = [
  { label: '按日', value: 'day' },
  { label: '按月', value: 'month' }
]
const dateSelect = {
  day: [
    { label: '近7天', value: 7 },
    { label: '近14天', value: 14 },
    { label: '近30天', value: 30 }
  ],
  month: [
    { label: '近6月', value: 6 },
    { label: '近12月', value: 12 }
  ]
}

const onSubmit = () => {
  if (custom_date_select?.value?.length > 1) {
    emit('change', custom_date_select.value)
    onPopupShow()
    return
  }
  if (dateSelectEd?.value?.value) {
    let day = getOverDay(dateSelectEd?.value?.value as number, dayType?.value?.value as string)
    okShowDayInfo.value = {
      label: dayType?.value?.label,
      value: dateSelectEd?.value?.label
    }
    emit('change', day)
    onPopupShow()
  } else {
    uni.showToast({
      title: '请选择日期！',
      icon: 'none'
    })
  }
}
</script>

<style lang="scss" scoped>
.popup_day_select_body {
  background-color: #fff;
  padding-bottom: calc(48px + constant(safe-area-inset-bottom));
  padding-bottom: calc(48px + env(safe-area-inset-bottom));
  border-top-left-radius: 20rpx;
  border-top-right-radius: 20rpx;
  overflow: hidden;
  .popup_day_select_title {
    text-align: center;
    padding: 30rpx 0;
    font-size: 30rpx;
    background-color: #f8f8f8;
    border-bottom: 1rpx solid #eee;
  }
  .popup_day_header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
  }
  .popup_day_select_left {
    width: 200rpx;
    min-height: 350rpx;
    font-size: 27rpx;
    text-align: center;
    background-color: #f8f8f8;
    .select_type_btn {
      padding: 25rpx 0;
      width: 100%;
    }
    .select_type_btn_active {
      background-color: #fff;
      font-weight: 600;
    }
  }
  .popup_day_select_right {
    flex: 1;
    font-size: 27rpx;
    padding: 0 30rpx;
    .select_date_group_btn {
      display: flex;
      align-items: center;
    }
    .select_date_btn {
      padding: 16rpx 30rpx;
      margin: 30rpx 0;
      border-radius: 100rpx;
    }
    .select_date_btn_active {
      background-color: #345ca1;
      color: #fff;
    }
  }

  .popup_day_footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 30rpx 50rpx;
    .btn {
      flex: 1;
      &:last-child {
        margin-left: 30rpx;
      }
    }
  }
}
.select_day_btn {
  display: flex;
  align-items: center;
  background-color: #eee;
  border-radius: 50rpx;
  text-align: center;
  font-size: 28rpx;
  padding: 14rpx 20rpx;
  text {
    padding-right: 10rpx;
  }
}

.custom_date_form {
  display: flex;
  align-items: center;
  padding: 20rpx 0;
  .setp_line {
    padding: 0 20rpx;
  }
  .custom_date_btn {
    background-color: #f8f8f8;
    min-width: 200rpx;
    padding: 0 0 0 20rpx;
    height: 80rpx;
    line-height: 80rpx;
    text-align: center;
    font-size: 25rpx;
    border-radius: 50rpx;
    display: flex;
    text {
      padding-right: 5rpx;
    }
    .day_placeholder {
      color: #999;
    }
  }
}
</style>
