<template>
  <div class="search-div">
    <el-form ref="searchForm" :inline="true" :model="listQuery.queryCondition" class="form-container">
      <el-row>
        <el-col :span="4">
          <el-form-item class="selectForm-container-item">
            <el-input v-model="listQuery.caseid" clearable placeholder="案卷编号"/>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item class="selectForm-container-item">
            <el-select v-model="listQuery.caseLevel" clearable placeholder="请选择案卷等级">
              <el-option
                v-for="item in caseLevelList"
                :key="item.value"
                :label="item.name"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item class="selectForm-container-item">
            <el-select v-model="listQuery.source" clearable placeholder="请选择信息来源">
              <el-option
                v-for="item in caseSourceList"
                :key="item.value"
                :label="item.name"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item class="selectForm-container-item">
            <el-date-picker
              v-model="listQuery.createTimeBegin"
              popper-class="date-picker"
              type="datetime"
              value-format="yyyy-MM-dd HH:mm:ss"
              placeholder="选择上报开始时间"/>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item class="selectForm-container-item">
            <el-date-picker
              v-model="listQuery.createTimeEnd"
              type="datetime"
              popper-class="date-picker"
              value-format="yyyy-MM-dd HH:mm:ss"
              placeholder="选择上报结束时间"/>
          </el-form-item>
        </el-col>
        <el-col :span="2">
          <el-form-item>
            <el-button type="primary" @click="search">查询</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
import { getCaseSourceList, getCaseLevelList } from '@/api/coorBusiness/dict'
export default {
  name: 'SearchForm',
  props: {
    listQuery: {
      type: Object,
      default() {
        return {
          offset: 1,
          limit: 10,
          sort: '',
          order: ''
          // queryCondition: {}
        }
      }
    }
  },
  data() {
    return {
      caseSourceList: [],
      caseLevelList: []
    }
  },
  mounted() {
    this.initForm()
  },
  methods: {
    async initForm() {
      // const queryCondition = {
      //   'caseid': '',
      //   'source': '',
      //   'caseLevel': '',
      //   'createTimeBegin': '',
      //   'createTimeEnd': ''
      // }
      // this.$set(this.listQuery, 'queryCondition', queryCondition)
      // console.log('11', this.listQuery.queryCondition)
      this.$set(this.listQuery, 'caseid', '')
      this.$set(this.listQuery, 'source', '')
      this.$set(this.listQuery, 'caseLevel', '')
      this.$set(this.listQuery, 'createTimeBegin', '')
      this.$set(this.listQuery, 'createTimeEnd', '')

      const sourceRes = await getCaseSourceList()
      this.caseSourceList = sourceRes.data
      const levelRes = await getCaseLevelList()
      this.caseLevelList = levelRes.data
    },
    search() {
      this.listQuery.offset = 1
      this.$emit('searchForm', this.listQuery)
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.search-div{
  margin-top: 20px;
  margin-left: 20px;
}
.el-form-item {
  margin-bottom: 0px !important;
}
</style>

<style rel="stylesheet/scss" lang="scss">
.date-picker {
  .el-date-table td {
    padding-top: 0px !important;
    padding-bottom: 0px !important;
  }
}
</style>