<template>
  <el-form ref="searchForm" :model="searchForm" inline label-width="100px">
    <el-form-item label="门店" label-width="90px">
      <el-input v-model="searchForm.shop" placeholder="请输入" />
    </el-form-item>
    <el-form-item label="报销人：" label-width="90px">
      <el-select v-model="searchForm.createUser" placeholder="请选择" filterable clearable>
        <el-option v-for="dict in userOptions" :key="dict.id" :label="dict.name" :value="dict.id" />
      </el-select>
    </el-form-item>
    <el-form-item label="报销时间：">
      <el-date-picker v-model="searchForm.createTimeRange" value-format="yyyy-MM-dd" type="daterange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" @change="$emit('update:value', searchForm)" />
    </el-form-item>
    <el-form-item label-width="0">
      <el-button type="primary" icon="el-icon-search" @click="$emit('search')">搜索</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  props: {
    value: {
      type: Object,
      default: () => ({})
    },
    userOptions: {
      type: Array,
      default: []
    }
  },
  data() {
    return {
      searchForm: {}
    };
  },
  watch: {
    value: {
      handler(val) {
        this.searchForm = this.deepClone(val);
      },
      deep: true,
      immediate: true
    }
  }
};
</script>

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