<template>
  <div class="search fx">
    <div class="fx">
      <div class="time" v-if="props.isShowDate">
        <el-date-picker 
          v-model="dateValue.arr"
          type="datetimerange"
          format="YYYY-MM-DD HH:mm:ss"
          @change="onDateChange" 
          range-separator="至"
          start-placeholder="开始日期" 
          end-placeholder="结束日期" />
      </div>
      <slot></slot>
      <el-button :icon="Filter" style="margin-left: 15px;" type="primary" @click="onSearch">筛选</el-button>
      <el-button type="primary" :icon="RefreshRight" @click="reset">重置</el-button>      
    </div>
    <div>
      <el-button style="float: right;" :icon="Download" type="primary" @click="exportToExcel">导出</el-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { watchEffect, reactive, ref } from 'vue'
import { Filter, RefreshRight, Download } from '@element-plus/icons-vue'
let dateValue: any = reactive({
  arr: []
})
const props = defineProps({
  isShowDate: {
    type: Boolean,
    default: true
  },
  dateValue: {
    type: Array,
    default: () => ['', '']
  }
})
watchEffect(() => {
  dateValue.arr = props.dateValue
})
const onDateChange = (v: any) => {
  if (v) {
    emit('update-dateValue', [...v])
  }

  emit('dateChange', {
    StartTime: dateValue.arr?.[0],
    EndTime: dateValue.arr?.[1]
  })
}
const emit = defineEmits(['on-search', 'clear', 'reset', 'update-dateValue', 'dateChange', 'exportToExcel'])
const reset = () => {
  dateValue.arr = []
  emit('clear')
  emit('reset')
}
const onSearch = () => {
  if (props.isShowDate) {
    emit('on-search', {
      dateValue: dateValue.arr
    })
  }
}

const exportToExcel = () => {
  emit('exportToExcel')
}
</script>

<style lang="less" scoped>
.search {
  height: 50px;
  width: 100%;

  :deep(.el-button) {
    height: 40px;
    width: 100px;
    font-size: 18px;
    background-image: url('../../assets/images/button-bg.png');
    border-radius: 5px;
    border: 0px;
  }

}
.fx {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

:deep(.time) {
  margin-left: 25px;
  min-width: 530px;
  max-width: 530px;
  --el-font-size-base: 18px;
  --el-fill-color-blank: #121F34;
  --el-border-color: #2353AE;
  --el-text-color-regular: #ffffff;
  --el-text-color-primary: #ffffff;

  .el-range-editor.el-input__wrapper {
    height: 40px;
    border-radius: 10px;
    width: 100%;
  }

  .el-icon {
    --el-text-color-placeholder: #5080da;
    margin-right: 10px;
  }
}

:deep(.input) {
  .el-input__wrapper {
    border-radius: 10px;
  }
}

:deep(.el-select__wrapper) {
  height: 40px;
  font-size: 20px;
  --el-text-color-regular: #ffffff;
  --el-fill-color-blank: #121F34;
  --el-border-color: #2353AE;
}
</style>
