<!--
  Jeepay plus 通用时间选择器， 支持下拉框选择和自定义时间。
  示例： <JeepayDateRangePicker customDateRangeType="dateTime" v-model="dateVal" />

  @author terrfly
  @site https://www.jeequan.com
  @date 2021/12/09 17:17
-->
<template>
  <a-select v-if="!vdata.showCustomTimeFlag" v-model:value="vdata.selectValue" placeholder="选择搜索时间" @change="selectChangeFunc">
    <!-- 通用的时间选择项 -->
    <template v-if="!statisticalTimeIsShow">
      <a-select-option v-if="allTimeIsShow" value="">全部时间</a-select-option>
      <a-select-option value="today">今天</a-select-option>
      <a-select-option value="yesterday">昨天</a-select-option>
      <a-select-option value="near2now_7">近7天</a-select-option>
      <a-select-option value="near2now_30">近30天</a-select-option>
    </template>

    <!-- 首页交易统计折线图独有的时间选择项 -->
    <template v-if="statisticalTimeIsShow">
      <a-select-option value="near2now_7">近7天</a-select-option>
      <a-select-option value="near2now_30">近30天</a-select-option>
      <a-select-option value="near2now_90">近90天</a-select-option>
    </template>

    <!-- 自定义 -->
    <a-select-option value="custom">自定义时间</a-select-option>
  </a-select>

  <div v-else>
    <a-popover placement="bottom">
      <template #content>
        <div v-if="getReqCustomDateTimeStr()">
          搜索时间： {{ getReqCustomDateTimeStr('未选择', ' ~ ') }}
        </div>
      </template>
      <a-range-picker
        ref="rangePickerRef"
        v-model:value="vdata.customDateValue"
        :input-read-only="true"
        :allow-empty="[true, true]"
        :show-time="customDateRangeType === 'dateTime' ? {defaultValue: [dayjs('00:00:00', 'HH:mm:ss'), dayjs('23:59:59', 'HH:mm:ss')]} : false"
        @change="customDateChangeFunc"
      >
        <!-- 隐藏掉尾部 icon  -->
        <template #suffixIcon />

        <!-- 自定义footer -->
        <template #renderExtraFooter> 
          <span style="cursor:pointer" @click="returnSelectModel"> <left-circle-outlined /> 返回日期下拉框</span>
        </template>
      </a-range-picker>
    </a-popover>
  </div>
</template>
<script setup lang="ts">
import { toRaw, ref, reactive, nextTick, defineProps, defineEmits, onMounted, watch } from 'vue'
import dayjs from 'dayjs'

// 定义父组件的传值
const props = defineProps({
  value: { type: String, default: '' },
  customDateRangeType: { type: String, default: 'dateTime' }, // date 和 dateTime
  allTimeIsShow: { type: Boolean, default: true }, // 首页饼图，不显示全部时间
  // 首页交易统计折线图独有的时间选择项
  statisticalTimeIsShow: { type: Boolean, default: false } 
})

// emit 父组件使用： v-model="val" 进行双向绑定。
const emit = defineEmits(['update:value'])

// 响应式数据
const vdata : any = reactive({

  // 首次加载组件的默认值 （用作当自定义时间切换到下拉框时， 可以正确回显默认的时间，  如果没有该字段则props被覆写。 ）
  modelValueDefault: '',

  // a. 时间类型 【下拉框】 选择的值
  selectValue: '',

  // b. 自定义时间选择空间选择的时间
  customDateValue: null,

  // 是否显示自定义时间控件
  showCustomTimeFlag: false,

  // 控制是否默认展开时间选择器： 当设置了 : open = "dateRangePickerIsOpen" 生效， 但是将导致所有的失焦等事件的失效，
  // 可使openChange解决: https://juejin.cn/post/6844903859987415047
  dateRangePickerIsOpen: false,  // 定义这个， 暂时没有使用了。 
})

// 自定义时间的$ref对象  用作聚焦使用。
const rangePickerRef = ref()

onMounted(() => {

  // 包含默认值， 需要自动切换。
  if (props.value){
    vdata.selectValue = props.value
    vdata.modelValueDefault = props.value

    // 包含自定义时间值
    if(props.value.indexOf('customDateTime_') == 0){
      vdata.showCustomTimeFlag = true // 切换页面
       let strArr : any = props.value.split('_')
      vdata.customDateValue = [dayjs(strArr[1]), dayjs(strArr[2])]
    }

  }
})

// 重置按钮，不能直接重置时间选择，需要通过watch监听，进行重置
watch( () => props.value ,(newVal,oldVal)=>{
  if (!props.value) {
    vdata.selectValue = ''
  }
})

// 切换下拉框的事件
function selectChangeFunc(val){

  if(val === 'custom'){ // 选择了自定义时间

    vdata.customDateValue = null // 重置日期组件的值
    changeModelValue('') // 重置父组件的值
    vdata.showCustomTimeFlag = true // 切换页面

    // 如果默认打开时间弹层， 会出现一个问题：  
    // 选择了【自定义】， 选择开始时间 --》 现在结束时间。  光标又回到了开始时间。 正常应该是关闭弹层了。
    // 如果默认不打开， 用户自己点击进入， 那么是没有问题的。 
    // v-model:open="vdata.dateRangePickerIsOpen" ，打开注释， 需要添加这一行。 
    // nextTick(() => {
    //   vdata.dateRangePickerIsOpen = true   //默认展开
    // })
  }else{

    vdata.showCustomTimeFlag = false // 不显示自定义
    changeModelValue(val)
  }
}


// 获取到自定义时间的字符串 （noSelectText  未选择时的占位符，  请求是： N, 显示是未选择 ）
function getReqCustomDateTimeStr(noSelectText = 'N', splitStr = '_'){

  let timeArray = toRaw(vdata.customDateValue) as any

  // 未选择日期
  if(!timeArray || timeArray.length <= 0){
    changeModelValue('')
    return false
  }

  let start = noSelectText
  let end = noSelectText

  if(timeArray.length >= 1 && timeArray[0]){
    start = timeArray[0].format(props.customDateRangeType == 'dateTime' ? 'YYYY-MM-DD HH:mm:ss' : 'YYYY-MM-DD 00:00:00')
  }

  if(timeArray.length >= 2 && timeArray[1]){
    end = timeArray[1].format(props.customDateRangeType == 'dateTime' ? 'YYYY-MM-DD HH:mm:ss' : 'YYYY-MM-DD 23:59:59')
  }

  return ( start + splitStr + end )
}

// 自定义时间控件， 切换时间的监听事件
function customDateChangeFunc(){

  let reqDateStr = getReqCustomDateTimeStr()

  if(reqDateStr){
    // 全部使用： customDateTime类型
    changeModelValue('customDateTime_' + reqDateStr)
  }

  return false
}

// 更新父组件的值
function changeModelValue(val){
  emit('update:value', val)
}

// 返回下拉框模式 （返回页面， 清空值）
function returnSelectModel(){

  vdata.customDateValue = null //日期清空

  // 如果上一次（默认）是自定义时间， 那么直接返回到【全部时间】 下拉框选项。 
  if(vdata.modelValueDefault && vdata.modelValueDefault.indexOf('customDateTime_') == 0){
    vdata.selectValue = ''
  }else{
    vdata.selectValue = vdata.modelValueDefault // 选择第一次的默认选择项。
  }

  changeModelValue(vdata.selectValue) //重置 父组件的值
  vdata.showCustomTimeFlag = false // 切换显示页面
}


defineExpose({returnSelectModel})
</script>

<style lang="less" scoped>
// .ant-picker .ant-picker-input {
  // border: none !important;
  // border: 1px solid #c3c3c3 !important;
  // padding: 4px 11px 4px !important;
  // width: 160px !important;
  // background: #ff0000;
  // width:160px !important;
// }
// .pay-statistics > div >.ant-picker-input > input{
//   border: 1px solid #c3c3c3 !important;
//   padding: 4px 11px 4px !important;
//   width: 160px !important;
//   background: #ff0000;
// }
// .pay-statistics > div > .date{
//   left: 50%;
// }
</style>
