<template>
  <div class="search" v-show="showSearch">
    <el-form :inline="true"
      :model="queryParams"
      class="demo-form-inline">
      <el-form-item label="计划月份">
        <el-date-picker v-model="queryParams.salesMonth"
          type="month"
          placeholder="选择计划月份"
          @change="handleChange"
          clearable />
      </el-form-item>
      <el-form-item label="大区/战区">
        <el-input v-model="queryParams.deptName"
          placeholder="请输入大区/战区"
          @input="handleChange"
          clearable />
      </el-form-item>
      <el-form-item label="经销商编码/名称">
        <el-input v-model="queryParams.dealerCN"
          placeholder="请输入经销商编码/名称"
          @input="handleChange"
          clearable />
      </el-form-item>
      <el-form-item label="系统名称">
        <el-input v-model="queryParams.lineNameLike"
          placeholder="请输入系统名称"
          @input="handleChange"
          clearable />
      </el-form-item>
      <el-form-item label="门店编码/名称" v-if="showStoreSearch">
        <el-input v-model="queryParams.storeCN"
          placeholder="请输入门店编码/名称"
          @input="handleChange"
          clearable />
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup>
const props = defineProps({
  showSearch: {
    type: Boolean,
    default: true
  },
  showStoreSearch: {
    type: Boolean,
    default: true
  }
})
const queryParams = reactive({
  // 当月
  salesMonth: new Date(),
  deptName: '',
  dealerCN: '',
  lineNameLike: '',
  storeCN: ''
})
const emits = defineEmits(['change'])

const handleChange = () => {
  emits('change', queryParams)
}
</script>

<style scoped
  lang="scss"></style>