<!-- 搜索表单 -->
<template>
  <div>
    <el-form
      :inline="inline"
      :label-width="labelWidth"
      :ref="searchFormRef"
      class="demo-form-inline"
      :model="searchData"
    >
      <el-form-item
        v-if="item.if==undefined||item.if==true"
        v-for="item in searchForm"
        :class="itemClass"
        :label="item.label"
        :key="item.prop"
        :prop="item.prop"
        :rules="filter_rules(item.label, item.rules)"
      >
        <!-- 输入框 -->
        <el-input
          v-if="item.type === 'Input'"
          v-model="searchData[item.prop]"
          :style="{width:item.width}"
          :placeholder="
            '请输入' + (item.placeholder ? item.placeholder : item.label)
          "
          :size="item.size"
          :readonly="item.readonly"
          @change="
            item.change && item.change(searchData[item.prop], item.params)
          "
          @input="item.input && item.input(searchData[item.prop])"
          @focus="item.focus && item.focus(searchData[item.prop])"
          :disabled="item.disabled"
        ></el-input>
        <!-- 下拉框 -->
        <el-select
          v-if="item.type === 'Select'"
          v-model="searchData[item.prop]"
          :size="item.size"
          @change="
            item.change && item.change(searchData[item.prop], item.params)
          "
          :disabled="item.disabled&&item.disabled()"
        >
          <el-option
            :label="'请选择' + item.label"
            value=""
            v-if="item.default"
          ></el-option>
          <el-option
            v-for="op in item.options"
            :label="item.props ? op[item.props.label] : op.label"
            :value="item.props ? op[item.props.value] : op.value"
            :key="item.props ? op[item.props.value] : op.value"
          ></el-option>
        </el-select>
        <!-- 单选 -->
        <el-radio-group
          v-if="item.type === 'Radio'"
          v-model="searchData[item.prop]"
          @change="
            item.change && item.change(searchData[item.prop], item.params)
          "
          :disabled="item.disabled && item.disabled(searchData[item.prop])"
        >
          <el-radio
            v-for="ra in item.radios"
            :label="ra.value"
            :key="ra.value"
            >{{ ra.label }}</el-radio
          >
        </el-radio-group>
        <!-- 单选按钮 -->
        <el-radio-group
          v-if="item.type === 'RadioButton'"
          v-model="searchData[item.prop]"
          @change="
            item.change && item.change(searchData[item.prop], item.params)
          "
          :disabled="item.disabled && item.disabled(searchData[item.prop])"
        >
          <el-radio-button
            v-for="ra in item.radios"
            :label="ra.value"
            :key="ra.value"
            >{{ ra.label }}</el-radio-button
          >
        </el-radio-group>
        <!-- 复选框 -->
        <el-checkbox-group
          v-if="item.type === 'Checkbox'"
          v-model="searchData[item.prop]"
          @change="
            item.change && item.change(searchData[item.prop], item.params)
          "
          :disabled="item.disabled && item.disabled(searchData[item.prop])"
        >
          <el-checkbox
            v-for="ch in item.checkboxs"
            :label="ch.value"
            :key="ch.value"
            >{{ ch.label }}</el-checkbox
          >
        </el-checkbox-group>
        <!-- 级联选择器 -->
        <el-cascader
          :size="item.size"
          v-if="item.type === 'Cascader'"
          v-model="searchData[item.prop]"
          :show-all-levels="item.showAllLevels?item.showAllLevels:true"
          :options="item.data"
          :props="
            Object.assign(item.props ? item.props : {}, {
              expandTrigger: 'hover',
            })
          "
          v-on="item.event"
          filterable
        ></el-cascader>
        <!-- 树 -->
        <el-tree
          v-if="item.type === 'Tree'"
          :data="item.data"
          show-checkbox
          :default-expand-all="defaultexpandall"
          :node-key="item.key"
          :ref="item.ref"
          :default-checked-keys="item.checked"
          highlight-current
          :props="item.props"
          :check-strictly="item.checktrictly"
        >
        </el-tree>
        <!-- 日期 -->
        <el-date-picker
          :size="item.size"
          v-if="item.type === 'Date'"
          v-model="searchData[item.prop]"
          format="yyyy-MM-dd"
          value-format="yyyy-MM-dd"
          @change="
            item.change && item.change(searchData[item.prop], item.params)
          "
          :disabled="item.disabled && item.disabled(searchData[item.prop])"
        ></el-date-picker>
        <!-- 月份 -->
        <el-date-picker
          :size="item.size"
          v-if="item.type === 'Month'"
          format="yyyy-MM"
          value-format="yyyy-MM"
          v-model="searchData[item.prop]"
          type="month"
          placeholder="选择月"
          @change="
            item.change && item.change(searchData[item.prop], item.params)
          "
          :disabled="item.disabled && item.disabled(searchData[item.prop])"
        ></el-date-picker>
        <!-- 日期范围 -->
        <el-date-picker
          :size="item.size"
          v-if="item.type === 'DateRange'"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          v-model="searchData[item.prop]"
          format="yyyy-MM-dd"
          value-format="yyyy-MM-dd"
          @change="
            item.change && item.change(searchData[item.prop], item.params)
          "
          :disabled="item.disabled && item.disabled(searchData[item.prop])"
        ></el-date-picker>
        <!-- 时间 -->
        <el-time-picker
          :size="item.size"
          v-if="item.type === 'Time'"
          v-model="searchData[item.prop]"
          format="HH:mm:ss"
          value-format="HH:mm:ss"
          @change="
            item.change && item.change(searchData[item.prop], item.params)
          "
        ></el-time-picker>
        <!-- 时间范围 -->
        <el-time-picker
          :size="item.size"
          v-if="item.type === 'TimeRange'"
          v-model="searchData[item.prop]"
          is-range
          format="HH:mm:ss"
          value-format="HH:mm:ss"
          range-separator="至"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          @change="
            item.change && item.change(searchData[item.prop], item.params)
          "
          :disabled="item.disabled && item.disabled(searchData[item.prop])"
        ></el-time-picker>
        <!-- 日期时间 -->
        <el-date-picker
          :size="item.size"
          v-if="item.type === 'DateTime'"
          type="datetime"
          v-model="searchData[item.prop]"
          format="yyyy-MM-dd HH:mm:ss"
          value-format="yyyy-MM-dd HH:mm:ss"
          @change="
            item.change && item.change(searchData[item.prop], item.params)
          "
          :disabled="item.disabled && item.disabled(searchData[item.prop])"
        ></el-date-picker>
        <!-- 日期范围 -->
        <el-date-picker
          :size="item.size"
          v-if="item.type === 'DateTimeRange'"
          type="datetimerange"
          v-model="searchData[item.prop]"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          format="yyyy-MM-dd HH:mm:ss"
          value-format="yyyy-MM-dd HH:mm:ss"
          :default-time="['00:00:00', '23:59:59']"
          :disabled="item.disabled && item.disabled(searchData[item.prop])"
          @change="(val)=>changeDate(val,item)
            
          "
        ></el-date-picker>
        <!-- 滑块 -->
        <!-- <el-slider v-if="item.type==='Slider'" v-model="searchData[item.prop]"></el-slider> -->
        <!-- 开关 -->
        <el-switch
          v-if="item.type === 'Switch'"
          v-model="searchData[item.prop]"
        ></el-switch
        ><!-- 文件上传 -->
        <!--           {type: "Upload",label: "封面",fileUrl:"imageUrl" 单个文件地址,prop:"fileList",accept:".jpg,.jpeg,.png,.JPG,.JPEG",width: "300px",}, -->
        <fileUpload
          :style="'width:' + item.width"
          v-if="item.type === 'Upload'"
          :file-list="searchData[item.prop]"
          :fileUrl.sync="searchData[item.fileUrl]"
          :fileList.sync="searchData[item.prop]"
          :accept="item.accept"
          :tips="item.tips"
          :limit="item.limit"
          :multiple="item.multiple"
          :readonly="item.readonly"
          :filesize="item.filesize"
        ></fileUpload>

        <!-- 按钮-->
        <el-button
          v-if="item.type === 'Button'"
          :type="item.style"
          :size="item.size"
          :disabled="item.disabled&&item.disabled()"
          @click="item.handle()"
          >{{ item.name }}</el-button
        >
      </el-form-item>
      <span
        :style="{ 'text-align': inline ? 'center' : 'inherit' }"
        v-if="hasBottomButton"
      >
        <!-- <el-form-item v-for='item in searchHandle' :key="item.label">
                <el-button :type="item.type"  @click='item.handle()' v-has="item.auth">{{item.label}}</el-button>
            </el-form-item> -->
        <el-form-item>
          <el-button
            v-for="item in searchHandle"
            :key="item.label"
            :type="item.type"
            :size="item.size"
            :icon="item.icon"
            @click="item.handle()"
            >{{ item.label }}</el-button
          >
        </el-form-item>
      </span>
    </el-form>
  </div>
</template>

<script>
import fileUpload from '../upload/fileUpload.vue';
export default {
  components:{
fileUpload
  },
  props: {
    inline: {
      type: Boolean,
      default: true,
    },
    searchFormRef: {
      type: String,
      default: "searchFormRef",
    },
    itemClass: {
      type: String,
      default: "form_input",
    },
    isHandle: {
      type: Boolean,
      default: true,
    },
    labelWidth: {
      type: String,
      default: "100px",
    },
    size: {
      type: String,
      default: "mini",
    },
    searchForm: {
      type: Array,
      default: () => [],
    },
    searchHandle: {
      type: Array,
      default: () => [],
    },
    searchData: {
      type: Object,
      default: () => ({}),
    },
    hasBottomButton: {
      type: Boolean,
      default: true,
    },
    defaultexpandall: {
      type: Boolean,
      default: false,
    },
  },
  name: "searchForm",
  data() {
    return {};
  },
  methods:{
    changeDate(val,item){
      if(!val){
        this.searchData[item.prop]=[]
      }
      item.change && item.change(val, item.params)
    }
  }
};
</script>
<style>
</style>