<template>
  <div class="search g-fx">
    <div class="time" v-if="props.isShowDate">
      <el-date-picker
        v-model="dateValue.arr"
        :value-format="props.dateType === 'daterange' ? 'YYYY-MM-DD' : 'YYYY-MM-DD HH:mm:ss'"
        :type="props.dateType"
        @change="onDateChange"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
      />
    </div>
    <pro-input
      v-if="props.isShowIpt"
      class="input"
      @input="onInput"
      :style="{ width: width + 'px' }"
      v-model="iptValue"
      placeholder="请输入关键字搜索"
      :disabled="props.isDisabledIpt"
      clearable
    ></pro-input>
    <slot></slot>
    <el-button
      :icon="Search"
      style="margin-left: 15px; background-color: #597fda; border-color: #597fda"
      type="primary"
      @click="onSearch"
    ></el-button>
    <el-button type="primary" @click="reset" style="font-size: 14px; background-color: #597fda; border-color: #597fda"
      >重置</el-button
    >
  </div>
</template>

<script setup lang="ts">
  import { Search } from '@element-plus/icons-vue'
  let dateValue: any = reactive({
    arr: []
  })
  const iptValue = ref('')
  const defaultTime1 = new Date(2000, 1, 1, 12, 0, 0) // '12:00:00'
  const props = defineProps({
    isShowDate: {
      type: Boolean,
      default: false
    },
    isShowIpt: {
      type: Boolean,
      default: true
    },
    /** 是否禁用输入框 */
    isDisabledIpt: {
      type: Boolean,
      default: false
    },
    width: {
      type: String,
      default: ''
    },
    dateType: {
      type: String,
      default: 'daterange'
    },
    fields: {
      type: Array,
      default: () => ['time1', 'time2']
    },
    dateValue: {
      type: Array,
      default: () => ['time1', 'time2']
    }
  })
  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 onInput = (v: string) => {
    emit('input', v)
  }
  const emit = defineEmits(['on-search', 'clear', 'reset', 'update-dateValue', 'input', 'dateChange'])
  const reset = () => {
    iptValue.value = ''
    dateValue.arr = []
    emit('clear')
    emit('reset')
  }
  const onSearch = () => {
    if (props.isShowDate) {
      emit('on-search', {
        // [props.fields[0] as string]: dateValue.value[0],
        // [props.fields[1] as string]: dateValue.value[1],
        iptValue: iptValue.value,
        dateValue: dateValue.arr
      })
    } else {
      emit('on-search', iptValue.value)
    }
  }
</script>

<style lang="less" scoped>
  .search {
    height: 70px;
    width: 100%;
    position: relative;
    .input {
      width: 30%;
      min-width: 150px;
      max-width: 300px;
      height: 50px;
      // margin: 0 20px;
    }

    .el-button {
      height: 50px;
      width: 70px;
      border-radius: 10px;
      font-size: 20px;
    }
  }
  :deep(.time) {
    margin-right: 25px;
    min-width: 370px;
    max-width: 370px;
    .el-range-editor.el-input__wrapper {
      height: 50px;
      border-radius: 10px;
      width: 100%;
    }
    .el-icon {
      margin-left: 10px;
    }
  }
  :deep(.input) {
    .el-input__wrapper {
      border-radius: 10px;
    }
  }
</style>
