<template>
  <el-space class="space" :size="20">
    <div class="search">
      <el-dropdown>
        <span class="el-dropdown-link">
          {{ selectValue }}
          <el-icon class="el-icon--right">
            <arrow-down />
          </el-icon>
        </span>
        <template #dropdown>
          <el-dropdown-menu @click="handleDrop">
            <el-dropdown-item>近一个月</el-dropdown-item>
            <el-dropdown-item>近三个月</el-dropdown-item>
            <el-dropdown-item>近六个月</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
      <el-date-picker v-model="date" type="datetimerange" start-placeholder="开始日期" end-placeholder="结束日期" />
    </div>
    <pro-input style="width: 249px" v-model="iptValue"></pro-input>
    <pro-button style="height: 45px" type="primary" @click="onSearch">搜索</pro-button>
    <pro-button style="height: 45px" @click="onReset">重置</pro-button>
  </el-space>
</template>

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

  const selectValue = ref('近一个月')
  const date: any = ref('')
  const iptValue: any = ref('')
  const emits = defineEmits(['onReset', 'onSearch'])
  const onReset = () => {
    selectValue.value = '近一个月'
    date.value = ''
    iptValue.value = ''
    emits('onReset')
  }
  const onSearch = () => {
    emits('onSearch', {
      StartTime: !date.value ? undefined : dayjs(date.value[0]).format('YYYY-MM-DD HH:mm:ss'),
      EndTime: !date.value ? undefined : dayjs(date.value[1]).format('YYYY-MM-DD HH:mm:ss'),
      Filter: iptValue.value
    })
  }
  const handleDrop = (e) => {
    const target = e.target || e.srcElement //
    const value = target.innerText
    selectValue.value = value
    // 获取当前日期
    const currentDate = dayjs()
    let now
    const obj = {
      近一个月: () => {
        now = currentDate.subtract(30, 'day')
      },
      近三个月: () => {
        now = currentDate.subtract(90, 'day')
      },
      近六个月: () => {
        now = currentDate.subtract(180, 'day')
      }
    }
    obj[value]?.()
    const startTime = dayjs(now).format('YYYY-MM-DD')
    const endTime = dayjs(currentDate).format('YYYY-MM-DD')
    date.value = [dayjs(`${startTime} 00:00:00`), dayjs(`${endTime} 23:59:59`)]
  }

  onMounted(()=>{
    date.value=[dayjs().subtract(30, 'day').format('YYYY-MM-DD HH:mm:ss'),dayjs().format('YYYY-MM-DD HH:mm:ss')]
  })


</script>

<style scoped lang="less">
  .search {
    display: flex;
    align-items: center;
    width: 520px;
    .el-dropdown {
      height: 45px;
      border-right: 0;
      line-height: 45px;
      padding: 0 15px;
      border: 1px solid var(--el-border-color);
      border-bottom-left-radius: 5px;
      border-right: 0;
      border-top-left-radius: 5px;
    }
  }
  :deep(.search) {
    .el-date-editor {
      height: 45px;
      border-radius: 5px;
      border-bottom-left-radius: 0;
      border-top-left-radius: 0;
      border-left: 0;
    }
    .el-range__icon {
      order: 3;
      margin-left: 5px;
      color: #3f794f;
      font-size: 18px;
      font-weight: bold;
    }
  }
</style>
