<!--简易搜索框-->
<template>
  <div class="search-div">
    <search-area :need-clear="true" :need-search-more="true" type="seperate" size="small" search-more-type="dialog" @search="search" @clear="clearInput">
      <search-item>
        <el-input v-model="listQuery.caseid" size="small" clearable placeholder="案卷编号"/>
      </search-item>
      <search-item>
        <el-input v-model="listQuery.description" size="small" clearable placeholder="案卷描述"/>
      </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-select v-model="listQuery.caseState" size="small" clearable placeholder="请选择案卷状态">
          <el-option
            v-for="item in caseStateList"
            :key="item.value"
            :label="item.name"
            :value="item.value"
          />
        </el-select>
      </search-item>
      <div slot="searchMore">
        <search-more/>
      </div>

    </search-area>
    <!--<search-more v-show="searchMoreShow" ref="searchMore" @searchMore="searchMore"/>-->
  </div>
</template>

<script>
import { getCaseSourceList, getCaseStateList } from '@/api/seo/seo'
import SearchMore from './searchMore'

export default {
  name: 'SearchDiv',
  components: { SearchMore },
  props: {
    listQuery: {
      type: Object,
      default() {
        return {
          caseid: '',
          description: '',
          source: '',
          caseState: '',
          offset: 1,
          limit: 10,
          sort: '',
          order: ''
        }
      }
    }
  },
  data() {
    return {
      searchMoreShow: false, // 高级检索弹窗是否显示
      caseSourceList: [],
      caseStateList: []
    }
  },
  mounted() {
    this.getCaseSource()
    this.getCaseState()
  },
  methods: {
    // 获取案卷来源列表
    getCaseSource() {
      getCaseSourceList().then(response => {
        this.caseSourceList = response.data
      })
    },
    // 获取案卷状态列表
    getCaseState() {
      getCaseStateList().then(response => {
        this.caseStateList = response.data
      })
    },
    // 查询条件
    search() {
      this.listQuery.offset = 1
      this.$emit('searchForm', this.listQuery)
    },
    // 执行高级查询
    searchMore(listQuery) {
      this.$emit('searchForm', listQuery)
    },
    openSearchMore() {
      this.searchMoreShow = true
      this.$refs.searchMore.initDialog(this.searchMoreShow)
    },
    // 重置后的操作， 若不需要显示重置按钮则不需要写
    clearInput() {
      this.$message.success('clearInput')
    }
  }
}
</script>

<style scoped>
  .search-div{
    /* padding-top: 50px; */
    /* padding-bottom: -40px; */
    /*margin-top: 20px;*/
    /*margin-left: 20px;*/
  }
  .el-form-item {
    margin-bottom: 5px !important;
  }
</style>