<!--
 * @Author: YLZH   
 * @Date: 2023-06-12 10:58:27
 * @LastEditors: YLZH   
 * @LastEditTime: 2023-06-15 10:03:02
 * @FilePath: \purchase\purchase_ao\src\views\directional\components\Search.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: 
-->
<template>
  <div class="search-data">
    <el-form :model="searchData" inline size="small">
      <el-form-item :label="item.title" v-for="(item, i) in config" :key="i">
        <template v-if="item.type == 'String'">
          <el-input
            v-model="searchData[item.key]"
            :placeholder="item.placeholder"
          ></el-input>
        </template>
        <template v-if="item.type == 'select'">
          <el-select
            v-model="searchData[item.key]"
            :placeholder="item.placeholder"
          >
            <el-option
              v-for="(val, i1) in item.option"
              :key="i1"
              :value="val.value"
              :label="val.label"
            ></el-option>
          </el-select>
        </template>
        <template v-if="item.type == 'date'">
          <el-date-picker
            v-model="searchData[item.key]"
            :placeholder="item.placeholder"
            :type="item.config.type"
            :range-separator="item.config.rangeSeparator || '-'"
            :start-placeholder="item.config.startPlaceholder || '开始时间'"
            :end-placeholder="item.config.endPlaceholder || '结束时间'"
            :format="item.config.format || 'yyyy-MM-dd'"
            :value-format="item.config.valueFormat || 'yyyy-MM-dd'"
          >
          </el-date-picker>
        </template>
      </el-form-item>
      <slot></slot>
    </el-form>
  </div>
</template>
<script>
export default {
  props: ["config", "value"],
  model: {
    prop: "value",
    event: "input",
  },
  data() {
    return {
      searchData: this.value,
    };
  },
  watch: {
    searchData: {
      handler(val) {
        this.$emit("input", val);
      },
      deep: true,
    },
  },
};
</script>
