<template>
  <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" @search="search" @clear="clearInput">
    <search-item>
      <el-input v-model="listQuery.caseid" size="small" clearable placeholder="案卷编号"/>
    </search-item>
    <search-item>
      <el-select v-model="listQuery.caseLevel" size="small" clearable placeholder="请选择案卷等级">
        <el-option
          v-for="item in caseLevelList"
          :key="item.value"
          :label="item.name"
          :value="item.value"
        />
      </el-select>
    </search-item>
    <search-item>
      <el-select v-model="listQuery.source" size="small" clearable placeholder="请选择信息来源">
        <el-option
          v-for="item in caseSourceList"
          :key="item.value"
          :label="item.name"
          :value="item.value"
        />
      </el-select>
    </search-item>
    <search-item>
      <el-date-picker
        v-model="listQuery.createTimeBegin"
        popper-class="date-picker"
        type="datetime"
        size="small"
        value-format="yyyy-MM-dd HH:mm:ss"
        placeholder="选择上报开始时间"/>
    </search-item>
    <search-item>
      <el-date-picker
        v-model="listQuery.createTimeEnd"
        type="datetime"
        size="small"
        popper-class="date-picker"
        value-format="yyyy-MM-dd HH:mm:ss"
        placeholder="选择上报结束时间"/>
    </search-item>
  </search-area>
</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)
    },
    // 重置后的操作， 若不需要显示重置按钮则不需要写
    async clearInput() {
      this.listQuery = {
        offset: 1,
        limit: 10,
        sort: '',
        order: ''
      }
      await this.initForm()
      this.search()
    }
  }
}
</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>-->