<template>
  <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @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>

  <!--<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)
    },
    // 重置后的操作， 若不需要显示重置按钮则不需要写
    clearInput() {
      this.$message.success('clearInput')
    }
  }
}
</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>-->