<template>
  <el-dialog title="打印确认" width="400px" v-model="showDayBusiness">
    <div class="business_wrap">
      <div class="title">
        <el-text>请选择要打印的日期：</el-text> <el-text type="danger">周期最长为7天</el-text>
      </div>
      <div class="row">
        <el-date-picker v-model="printDayBusinessParams.date" type="daterange" start-placeholder="开始日期"
          end-placeholder="结束日期" format="YYYY-MM-DD" value-format="YYYY-MM-DD" :disabled-date="disabledDate"
          @change="handleDateChange" clearable />
      </div>
      <div class="business_tips">
        <el-text type="info">若数据过多，打印时间会比较长，请耐心等待</el-text>
      </div>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="showDayBusiness = false">取 消</el-button>
        <el-button type="primary" @click="confirmHandle" :loading="printDayBusinessLoading">确 定</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import dayjs from "dayjs";
import { ref, onMounted } from "vue";
import { ElMessage } from 'element-plus'

const props = defineProps({
  title: {
    type: String,
    default: '经营日报'
  }
})

const showDayBusiness = ref(false)
const emits = defineEmits(['success'])

// 打印参数
const printDayBusinessParams = ref({
  date: [],
})
const printDayBusinessLoading = ref(false)

// 取消
const confirmHandle = () => {
  // 校验日期
  if (!printDayBusinessParams.value.date || printDayBusinessParams.value.date.length !== 2) {
    ElMessage.warning('请选择日期范围')
    return
  }
  showDayBusiness.value = false
  emits('success', { date: printDayBusinessParams.value.date })
}

// 日期禁用规则：只能选昨天及更早，不能选未来
const disabledDate = (time) => {
  const yesterday = dayjs().subtract(1, 'day').format('YYYY-MM-DD')
  return dayjs(time).isAfter(yesterday)
}

// 日期选择后校验：区间长度不能超过7天
const handleDateChange = (val) => {
  if (!val || val.length !== 2) return
  const [start, end] = val
  const days = dayjs(end).diff(start, 'day') + 1 // 包含起止日
  if (days > 7) {
    ElMessage.warning('日期范围最多只能选择7天')
    printDayBusinessParams.value.date = [] // 清空选择
  }
}

// 判断当前时间 是否在 00:00 ~ 05:20 之间
const time = ref(['00:00', '05:20'])
const isInTimeRange = () => {
  const now = dayjs()
  const startTime = dayjs(time.value[0], 'HH:mm')
  const endTime = dayjs(time.value[1], 'HH:mm')
  return now.isAfter(startTime) && now.isBefore(endTime)
}

// 打开弹窗
const show = () => {
  if (isInTimeRange()) {
    ElMessage.warning(`当前时间不能打印${props.title}，打印时间：${time.value[0]}点至${time.value[1]}点`)
    return
  }
  showDayBusiness.value = true
}

// 暴露方法
defineExpose({ show })

// 初始化默认选中昨天
onMounted(() => {
  const yesterday = dayjs().subtract(1, 'day').format('YYYY-MM-DD')
  printDayBusinessParams.value.date = [yesterday, yesterday]
})
</script>

<style scoped lang="scss">
.business_wrap {
  .title {
    display: flex;
    gap: 6px;
    align-items: center;
  }

  .row {
    padding-top: 14px;
  }

  .business_tips {
    padding-top: 6px;
    display: flex;
    justify-content: center;
  }
}
</style>