<!--简易搜索框-->
<template>
  <div class="search-div">
    <el-form ref="searchForm" :inline="true" :model="listQuery.queryCondition" class="form-container">
      <el-row>
        <el-form-item class="selectForm-container-item">
          <el-input v-model="listQuery.caseid" clearable placeholder="案卷编号"/>
        </el-form-item>
        <el-form-item class="selectForm-container-item">
          <el-input v-model="listQuery.description" clearable placeholder="案卷描述"/>
        </el-form-item>
        <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-form-item class="selectForm-container-item">
          <el-select v-model="listQuery.caseState" clearable placeholder="请选择案卷状态">
            <el-option
              v-for="item in caseStateList"
              :key="item.value"
              :label="item.name"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="search">查询</el-button>
          <el-button @click="openSearchMore">高级检索</el-button>
        </el-form-item>
      </el-row>
    </el-form>
    <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)
    }
  }
}
</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>