<script setup>
import { reactive, ref } from 'vue'
import { useWindowSize } from '@vueuse/core'
import moment from 'moment'

const { width, height } = useWindowSize()

const props = defineProps({
  filter: {
    type:Object
  }
})
const emit = defineEmits(['change','close'])

const timeTypeOpt=[
    {
        text:'发布时间',
        value:'publish_time'
    },
    {
        text:'审批时间',
        value:'approve_time'
    },
    {
        text:'更新时间',
        value:'modify_time'
    },
]
const reportStatusOpt=[
    {
        text:'已推送消息',
        value:2
    },
    {
        text:'未推送消息',
        value:1
    }
]
const publishStatusOpt=[
    {
        text:'未发布',
        value:1
    },
    {
        text:'已发布',
        value:2
    },
    {
        text:'待提交',
        value:3
    },
    {
        text:'待审批',
        value:4
    },
    {
        text:'已驳回',
        value:5
    },
    {
        text:'已通过',
        value:6
    },
]

const filterState = reactive({
  publishStatus: props.filter.publishStatus||'',
  msgIsSend: props.filter.MsgIsSend||'',
  timeType: props.filter.timeType||'',
  startDate: props.filter.StartDate,
  endDate:props.filter.EndDate,
  date:[]
})

function handleSave() {
  emit('change',filterState)
}
function handleClose() {
  emit('close')
}


function getName(key) {
  const nameMap = {
    'publishStatus': publishStatusOpt.find(_ => _.value===filterState.publishStatus),
    'timeType': timeTypeOpt.find(_ => _.value===filterState.timeType),
    'msgIsSend': reportStatusOpt.find(_ => _.value===filterState.msgIsSend)
  }

  let title = nameMap[key]?.text
  return title
}
function getDate() {
    if(!filterState.startDate||!filterState.endDate) return ''

    return `${filterState.startDate}~${filterState.endDate}`
}


const showPicker = ref(false)
const selectKey = ref('')
const selectTimeType = ref([])
const selectStatus = ref([])
const selectMsgSend = ref([])
function handleOpenPicker(key) {
    selectKey.value = key;
    selectTimeType.value = [filterState[key]]
    selectStatus.value = [filterState[key]]
    selectMsgSend.value = [filterState[key]]
    showPicker.value = true;

    console.log( selectTimeType.value)
}
function handleConfirmTimeType() {
  filterState.timeType=selectTimeType.value[0]
  showPicker.value=false
}
function handleConfirmStatus(e) {
  filterState.publishStatus=selectStatus.value[0]
  showPicker.value=false
}
function handleConfirmMsgSend() {
  console.log(selectMsgSend.value)
  filterState.msgIsSend=selectMsgSend.value[0]
  showPicker.value=false
}



/* 日期弹窗 */
const selectDate = ref([])
const showCalendar = ref(false)
const calendarMinDate=new Date(2010,0,1)
const calendarIns=ref(null)
function handleOpenDatePicker() {
    selectDate.value = [filterState.startDate?new Date(filterState.startDate):'',filterState.endDate?new Date(filterState.endDate):'']
    showCalendar.value = true;
}
function handleCalendarChange(e){
    filterState.startDate=moment(e[0]).format('YYYY-MM-DD')
    filterState.endDate=moment(e[1]).format('YYYY-MM-DD')
    
    showCalendar.value=false
}
function handleResetCalendar(){
    filterState.startDate=''
    filterState.endDate=''
    calendarIns.value.reset()

    showCalendar.value=false
}
</script>
<template>
  <div class="filter-cont">
      <van-cell-group>
          <van-cell
              value-class="cell-con"
              required
              title="报告状态"
              :value="getName('publishStatus')"
              is-link
              @click="handleOpenPicker('publishStatus')"
          />
      </van-cell-group>
      <van-cell-group>
          <van-cell
              value-class="cell-con"
              required
              title="推送消息状态"
              :value="getName('msgIsSend')"
              is-link
              @click="handleOpenPicker('msgIsSend')"
          />
      </van-cell-group>
      <van-cell-group>
          <van-cell
              value-class="cell-con"
              required
              title="筛选时间类型"
              :value="getName('timeType')"
              is-link
              @click="handleOpenPicker('timeType')"
          />
      </van-cell-group>
      <van-cell-group>
          <van-cell
              value-class="cell-con"
              required
              :title="getName('timeType')"
              :value="getDate()"
              is-link
              @click="handleOpenDatePicker"
          />
      </van-cell-group>


      <div class="bot-btns">
          <van-button class="bot-btn" type="default" @click="handleClose"
              >取消</van-button
          >
          <van-button class="bot-btn" type="primary" @click="handleSave"
              >确认</van-button
          >
      </div>
  </div>

    <!-- 日期筛选 -->
    <van-popup 
        v-model:show="showCalendar"
        :position="width>650?'center':'bottom'"
        :style="width>650?{ width: '400px'}:''"
        round
    >
        <van-calendar
            :default-date="selectDate"
            ref="calendarIns"
            :poppable="false"
            type="range"
            allow-same-day
            :min-date="calendarMinDate"
            @confirm="handleCalendarChange" 
            :style="{ height: '500px' }"
            class="calendar-box"
        >
            <template #title>
                <div style="position: relative;">
                    <span style="color:#666;position: absolute;left:16px" @click="handleResetCalendar">重置</span>
                    <span>日期选择</span>
                </div>
            </template>
        </van-calendar>
    </van-popup>


    <!-- 下拉选择 -->
    <van-popup 
        v-model:show="showPicker"
        :position="width>650?'center':'bottom'"
        :style="width>650?{ width: '400px'}:''"
        round
    >
        <van-picker
        v-if="selectKey==='timeType'"
        v-model="selectTimeType"
        :columns="timeTypeOpt"
        @cancel="showPicker = false"
        @confirm="handleConfirmTimeType"
        />
        <van-picker
        v-else-if="selectKey==='publishStatus'"
        v-model="selectStatus"
        :columns="publishStatusOpt"
        @cancel="showPicker = false"
        @confirm="handleConfirmStatus"
        />
        <van-picker
        v-else-if="selectKey==='msgIsSend'"
        v-model="selectMsgSend"
        :columns="reportStatusOpt"
        @cancel="showPicker = false"
        @confirm="handleConfirmMsgSend"
        />
    </van-popup>  


</template>
<style scoped lang="scss">
.filter-cont {
    .bot-btns{
        position: absolute;
        bottom: 48px;
        left: 0;
        width: 100%;
        text-align: center;
        .bot-btn{
            width: 315px;
            margin: 0 10px;
        }
    }
}
</style>