<template>
  <el-row>
    <!-- 搜索用表单 -->
    <search-fold-form ref="searchForm" :max-show="4" :model="searchParams" class="search" @search="searchClick">
      <el-form-item label="操作时间" prop="timeRange">
        <el-date-picker v-model.trim="searchParams.timeRange" type="daterange" value-format="yyyy-MM-dd" align="right" range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间" />
      </el-form-item>
      <el-form-item label="操作类型" prop="type">
        <el-select ref="selectType" v-model.trim="searchParams.type" filterable placeholder="请选择操作类型" clearable>
          <el-option
            v-for="item in logTypeList"
            :key="item.key"
            :label="item.value"
            :value="item.key"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="项目编号" prop="projectNo">
        <el-input v-model.trim="searchParams.projectNo" placeholder="请输入项目编号" clearable size="small" />
      </el-form-item>
      <el-form-item label="账号" prop="createName">
        <el-input v-model.trim="searchParams.createName" placeholder="请输入账号" clearable size="small" />
      </el-form-item>
      <el-form-item>
        <el-button :loading="global.loading" type="primary" @click="search"> 查询 </el-button>
        <el-button :loading="global.loading" @click="reset">重置</el-button>
      </el-form-item>
    </search-fold-form>
  </el-row>
</template>

<script>
import { logTypeList } from './data.js'
import { deepClone } from '@/utils'
import SearchFoldForm from '@/components/SearchFoldForm/index.vue'
import dayjs from 'dayjs'
const defaultSearchParams = { // 搜索栏初始值
  createName: '',
  operatorName: '',
  timeRange: [dayjs(new Date()).format('YYYY-MM-DD'), dayjs(new Date()).format('YYYY-MM-DD')]
}
export default {
  inject: ['global'],
  components: { SearchFoldForm },
  props: {
    searchParams: {
      require: true,
      type: Object,
      default: () => deepClone(defaultSearchParams)
    }
  },
  data() {
    return {
      logTypeList
    }
  },
  created() {
  },
  mounted() {
    this.$emit('search', deepClone(defaultSearchParams))
  },
  methods: {
    search() {
      this.$emit('search', this.searchParams)
    },
    reset() {
      this.$refs.searchForm.resetFields()
      this.$emit('search', deepClone(defaultSearchParams))
    }
  }
}
</script>

<style scoped>
</style>
