<template>
  <div class="search fx">
    <div class="fx">
      <span v-if="props.isShowMecSect" style="color: #ffffff;line-height: 40px;font-size: 20px;margin-right: 10px;">
        {{ props.sectMecName }}
      </span>
      <el-select v-if="props.isShowMecSect" v-model="sectMecValue" style="width: 150px;" @change="sectMecChange">
        <el-option v-for="item in props.sectMecOption" :key="item.value" :label="item.label" :value="item.value" />
      </el-select>
      <span v-if="props.isShowVarDictSect" style="color: #ffffff;line-height: 40px;font-size: 20px;margin-right: 10px; margin-left: 25px;">
        {{ props.sectVarDictName }}
      </span>
      <el-select v-if="props.isShowVarDictSect" v-model="sectVarDictValue" style="width: 180px;">
        <el-option v-for="item in props.sectVarDictOption" :key="item.value" :label="item.label" :value="item.value" />
      </el-select>
      <div class="time" v-if="props.isShowDate">
        <el-date-picker 
          v-model="dateValue.arr"
          type="datetimerange"
          format="YYYY-MM-DD HH:mm:ss"
          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 v-if="props.isShowExport" 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'

// 定义选项项的类型
interface OptionItem {
  value: string | number
  label: string
}

const sectMecValue = ref('')
const sectVarDictValue = ref('')

let dateValue: any = reactive({
  arr: []
})
const props = defineProps({
  isShowDate: {
    type: Boolean,
    default: true
  },
  isShowExport:{
    type: Boolean,
    default: true
  },
  dateValue: {
    type: Array,
    default: () => ['', '']
  },  
  isShowMecSect: {
    type: Boolean,
    default: true
  },  
  sectMecName: {
    type: String,
    default: ''
  },
  sectMecValue: {
    type: String,
    default: ''
  },
  sectMecOption: {
    type: Array as () => OptionItem[],
    default: () => [
      {
        value: '',
        label: '',
      },
    ]
  },  
  isShowVarDictSect: {
    type: Boolean,
    default: false
  },  
  sectVarDictName: {
    type: String,
    default: ''
  },
  sectVarDictValue: {
    type: String,
    default: ''
  },
  sectVarDictOption: {
    type: Array as () => OptionItem[],
    default: () => [
      {
        value: '',
        label: '',
      },
    ]
  }
})
watchEffect(() => {
  dateValue.arr = props.dateValue
  sectMecValue.value = props.sectMecValue
  sectVarDictValue.value = props.sectVarDictValue
})

const sectMecChange = (v: any) => {
  emit('sectMecChange', {
    sectMecValue: sectMecValue.value
  })
}

const emit = defineEmits(['on-search','reset','sectMecChange','exportToExcel'])
const reset = () => {
  sectMecValue.value = ''
  sectVarDictValue.value = ''
  dateValue.arr = []
  emit('reset')
}
const onSearch = () => {
  emit('on-search', {
    dateValue: dateValue.arr,
    sectMecValue: sectMecValue.value,
    sectVarDictValue: sectVarDictValue.value
  })
}

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>
