<template>
  <div class="xy-table-search-form">
    <el-form
      ref="searchForm"
      :model="form.formData"
      :inline="true"
      :label-width="form.formLabelWidth"
    >
      <!-- 只有一个搜索条件并且是输入框 -->
      <template v-if="form.fieldList.length === 1 && form.fieldList[0].type === 'input'">
        <el-form-item
          v-for="(item, index) in form.fieldList"
          :key="index"
          :prop="item.prop"
          :class="item.className"
          :rules="item.rules"
          :label-width="item.formLabelWidth"
        >
          <!-- input -->
          <el-input
            v-model="form.formData[item.prop]"
            class="data-search-input"
            :size="item.size || 'small'"
            :type="item.type"
            :disabled="item.disabled"
            :clearable="item.clearable === false ? item.clearable : true"
            :placeholder="getPlaceholder(item)"
            :style="item.style || { width: '300px' }"
            @change="handleEvent($event, item.prop)"
          />
          <el-button class="data-search-btn" size="small" type="primary" icon="el-icon-search" @click="handleQuery" />
        </el-form-item>
      </template>
      <template v-else>
        <el-form-item
          v-for="(item, index) in form.fieldList"
          :key="index"
          :prop="item.prop"
          :label="item.label"
          :class="item.className"
          :rules="item.rules"
          :label-width="item.formLabelWidth"
        >
          <!-- input -->
          <el-input
            v-if="item.type === 'input' || item.type === 'password'"
            v-model="form.formData[item.prop]"
            :size="item.size || 'small'"
            :type="item.type"
            :disabled="item.disabled"
            :clearable="item.clearable === false ? item.clearable : true"
            :placeholder="getPlaceholder(item)"
            :style="item.style || { width: '216px' }"
            @change="handleEvent($event, item.prop)"
          >
            <!-- 前置文本 -->
            <template v-if="item.prepend" #prepend>{{ item.prepend }}</template>
            <!-- 后置文本 -->
            <template v-if="item.append" #append>{{ item.append }}</template>
          </el-input>

          <!-- 选择框数组 -->
          <el-select
            v-if="item.type === 'select'"
            v-model="form.formData[item.prop]"
            :size="item.size || 'small'"
            :disabled="item.disabled"
            :clearable="item.clearable === false ? item.clearable : true"
            :filterable="item.filterable === false ? item.filterable : true"
            :placeholder="getPlaceholder(item)"
            :style="item.style || { width: '216px' }"
            @change="handleEvent($event, item.prop)"
          >
            <el-option
              v-for="childItem in form.listOptions[item.options]"
              :key="childItem[item.arrValue || 'value']"
              :label="childItem[item.arrLabel || 'label']"
              :value="childItem[item.arrValue || 'value']"
            />
          </el-select>

          <!-- 复选框 -->
          <el-checkbox-group
            v-if="item.type === 'checkbox'"
            v-model="form.formData[item.prop]"
            @change="handleEvent($event, item.prop)"
          >
            <el-checkbox
              v-for="childItem in form.listOptions[item.options]"
              :key="childItem[item.arrValue || 'value']"
              :label="childItem[item.arrValue || 'value']"
              :disabled="childItem.disabled"
            >{{ childItem[item.arrLabel || 'label'] }}</el-checkbox>
          </el-checkbox-group>

          <!-- 单个日期选择框 -->
          <el-date-picker
            v-if="item.type === 'date'"
            v-model="form.formData[item.prop]"
            type="date"
            :size="item.size || 'small'"
            :picker-options="item.pickerOptions || {}"
            :disabled="item.disabled"
            :clearable="item.clearable === false ? item.clearable : true"
            :value-format="item.valueFormat || 'yyyy-MM-dd'"
            :style="item.style || { width: '216px' }"
            :placeholder="getPlaceholder(item)"
            @change="handleEvent($event, item.prop)"
          />

          <!-- 开始——结束日期选择框 -->
          <el-date-picker
            v-if="item.type === 'daterange'"
            v-model="form.formData[item.prop]"
            type="daterange"
            :size="item.size || 'small'"
            :disabled="item.disabled"
            :value-format="item.valueFormat || 'yyyy-MM-dd'"
            :clearable="item.clearable === false ? item.clearable : true"
            :style="item.style || { width: '216px' }"
            :range-separator="item.rangeSeparator || '-'"
            :start-placeholder="item.startPlaceholder || '开始日期'"
            :end-placeholder="item.endPlaceholder || '结束日期'"
            @change="handleEvent($event, item.prop)"
          />

          <!-- 级联下拉 -->
          <el-cascader
            v-if="item.type === 'cascader'"
            :ref="item.ref"
            v-model="form.formData[item.prop]"
            :options="form.listOptions[item.options]"
            :show-all-levels="item.showAllLevels === undefined ? true : false"
            :filterable="item.filterable"
            :filter-method="item.filterMethod"
            :props="item.props || {
              children: 'children',
              value: 'value',
              label: 'label'
            }"
            :size="item.size || 'small'"
            :placeholder="getPlaceholder(item)"
            :disabled="item.disabled"
            :clearable="item.clearable === false ? item.clearable : true"
            :style="item.style || { width: '216px' }"
            @change="handleEvent($event, item.prop)"
          />

        </el-form-item>
        <el-form-item>
          <el-button type="primary" plain icon="el-icon-search" size="small" @click="handleQuery">查询</el-button>
          <el-button type="primary" plain icon="el-icon-refresh" size="small" @click="resetQuery">重置</el-button>
        </el-form-item>
      </template>
    </el-form>
  </div>
</template>

<script>
export default {
  name: 'XyTableSearchForm',
  props: {
    form: {
      required: true,
      type: Object
    }
  },
  methods: {
    // 得到placeholder的显示
    getPlaceholder(row) {
      let placeholder
      // 请输入type
      const inputArr = ['input', 'textarea']
      // 请选择type
      const selectArr = ['select', 'time', 'select-obj', 'date', 't-date', 'cascader']
      if (inputArr.includes(row.type)) {
        placeholder = '请输入' + row.label
      } else if (selectArr.includes(row.type)) {
        placeholder = '请选择' + row.label
      } else {
        placeholder = row.label
      }
      return placeholder
    },
    // 绑定的相关事件
    handleEvent(val, prop) {
      this.$emit('handleEvent', val, prop)
    },
    // 查询
    handleQuery() {
      this.$emit('handleQuery', this.form.formData)
    },
    // 重置
    resetQuery() {
      this.$refs['searchForm'].resetFields()
      this.$emit('resetQuery')
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
