<template>
  <search-area :need-clear="true" :need-search-more="true" type="seperate" search-more-type="default" @search="search" @clear="clearInput">
    <!--一般查询条件-->
    <search-item>
      <el-input v-model.trim="listQuery.caseId" placeholder="事件编号" size="small" clearable/>
    </search-item>
    <search-item/>
    <search-item>
      <el-input v-model.trim="listQuery.title" placeholder="事件标题" size="small" clearable/>
    </search-item>
    <search-item>
      <el-input v-model.trim="listQuery.description" placeholder="事件内容" size="small" clearable/>
    </search-item>
    <search-item>
      <el-input v-model.trim="listQuery.reporterPhone" placeholder="联系方式" size="small" clearable/>
    </search-item>
    <search-item>
      <el-input v-model.trim="listQuery.reporterName" placeholder="联系人" size="small" clearable/>
    </search-item>
    <search-item>
      <el-date-picker
        v-model="timeRange"
        size="small"
        type="datetimerange"
        range-separator="至"
        value-format="yyyy-MM-dd HH:mm:ss"
        start-placeholder="来电开始时间"
        end-placeholder="来电结束时间"/>
    </search-item>
    <!--高级检索-->
    <div slot="searchMore">
      <search-item>
        <el-select v-model="listQuery.caseState" placeholder="处理方式" size="small" clearable>
          <el-option v-for="item in caseStateList" :key="'caseState_'+item.value" :label="item.name" :value="item.value"/>
        </el-select>
      </search-item>
      <search-item>
        <el-select v-model="listQuery.state" placeholder="处理状态" size="small" clearable>
          <el-option v-for="item in processStateList" :key="'processState_'+item.value" :label="item.name" :value="item.value"/>
        </el-select>
      </search-item>
      <search-item>
        <el-select v-model="listQuery.isDelay" placeholder="事件状态" size="small" clearable>
          <el-option label="超期未办" value="1"/>
        </el-select>
      </search-item>
      <search-item>
        <el-select v-model="listQuery.source" placeholder="事件来源" size="small" clearable>
          <el-option v-for="item in caseSourceList" :key="'caseSource_'+item.value" :label="item.name" :value="item.value"/>
        </el-select>
      </search-item>
      <search-item>
        <el-select v-model="listQuery.caseLevel" placeholder="紧急程度" size="small" clearable>
          <el-option v-for="item in caseLevelList" :key="'caseLevel_'+item.value" :label="item.name" :value="item.value"/>
        </el-select>
      </search-item>
    </div>
  </search-area>
</template>

<script>
import SearchArea from '@/components/SearchArea/SearchArea'
import SearchItem from '@/components/SearchArea/SearchItem'
import { getCaseState, getProcessState, getCaseSource, getCaseLevel } from '@/api/allDict'
export default {
  name: 'CaseSearch',
  components: { SearchItem, SearchArea },
  props: {
    listQuery: {
      type: Object,
      default: null
    }
  },
  data() {
    return {
      timeRange: [], // 时间范围
      caseStateList: [],
      caseSourceList: [],
      processStateList: [],
      caseLevelList: []
    }
  },
  watch: {
    timeRange(val) {
      if (val && val.length > 0) {
        this.listQuery.startTime = val[0]
        this.listQuery.endTime = val[1]
      } else {
        this.listQuery.startTime = ''
        this.listQuery.endTime = ''
      }
    }
  },
  mounted() {
    this.fetchCaseStateList()
    this.fetchCaseSourceList()
    this.fetchProcessStateList()
    this.fetchCaseLevelList()
  },
  methods: {
    fetchCaseStateList() {
      getCaseState().then(response => {
        this.caseStateList = response.data
      })
    },
    fetchProcessStateList() {
      getProcessState().then(repsonse => {
        this.processStateList = repsonse.data
      })
    },
    fetchCaseSourceList() {
      getCaseSource().then(response => {
        this.caseSourceList = response.data
      })
    },
    fetchCaseLevelList() {
      getCaseLevel().then(response => {
        this.caseLevelList = response.data
      })
    },
    // 重置后的操作， 若不需要显示重置按钮则不需要写
    clearInput() {
      this.listQuery.caseId = ''
      this.listQuery.title = ''
      this.listQuery.description = ''
      this.listQuery.reporterPhone = ''
      this.listQuery.reporterName = ''
      this.listQuery.state = ''
      this.listQuery.caseState = ''
      this.listQuery.isDelay = ''
      this.listQuery.source = ''
      this.listQuery.caseLevel = ''
      this.timeRange = []

      // this.$message.success('clearInput')
    },
    search() {
      this.$emit('search', this.listQuery)
    }
  }
}
</script>