<template>
  <div class="search-content-box">
    <el-form ref="ruleForm" :label-width="formdata.labelWidth" :inline="formdata.inline" class="demo-form-inline"
             :label-position="formdata.position"
             :size="formdata.size"
             :disabled="formdata.disabled"
             :rules="formdata.rules"
             :model="formdata">
      <el-form-item v-for="(item, index) in formdata.formprops" :key="'form' + index" :label="item.label"
              :rules="item.required || []" :prop="'formprops.' + index + '.value'"
              :label-width="item.labelWidth"
              :inline-message="item.inlineMessage"
              :size="item.size"
      >
        <!-- input -->
        <el-input v-if="item.formtype === 'input'" v-model="item.value"
                  :type="item.type == 'textarea' ? 'textarea' : 'input'" :clearable="item.clearable"
                  :style="item.style || ''"
                  :class="item.className || ''" :size="item.size || 'small'" :maxlength="item.maxlength || ''" :minlength="item.minlength || ''"
                  :prefix-icon="item.prefix || ''" :placeholder="item.placeholder" :disabled="item.disabled"
                  :suffix-icon="item.icon || ''"
                  :show-word-limit="item.showWordLimit"
                  @keyup.native.enter="search"
                  @change="(val) => {inputChange(val, item.change);}"
        />
        <!-- inputNumber -->
        <el-input-number v-else-if="item.formtype === 'inputNumber'" v-model="item.value" :clearable="item.clearable"
                         :controls="false" :style="item.style || ''" :min="1" :max="10"/>
        <!-- select或者远程搜索 -->
        <el-select filterable v-else-if="item.formtype === 'select'" v-model="item.value" :clearable="item.clearable"
                   :remote="item.remote" :size="item.size || 'small'"
                   :reserve-keyword="item.reserveKeyword" :remote-method="item.remoteMethod" :multiple="item.multiple" :multiple-limit="item.limit || 0"
                   :collapse-tags="item.collapseTags" :style="item.style || ''" :disabled="item.disabled"
                   :placeholder="item.placeholder" @change="(val) => {selectChange(val, item.change);}"
                   @visible-change="(val) => {selectVisibleChange(val, item.visibleChange, item.value);}">
          <el-option v-for="(selitem, idx) in item.data()" :key="idx + 'select-s'" :label="selitem.label"
                     :value="selitem.value"/>
        </el-select>
        <!-- date -->
        <el-date-picker v-else-if="item.formtype === 'date'" v-model="item.value" :clearable="item.clearable"
                        :type="item.datetype"
                        :style="item.style || ''"
                        range-separator="至"
                        :size="item.size || 'small'"
                        :class="item.datetype == 'daterange' ? 'cl-change' : 'cl-nomal'"
                        :value-format="item.format"
                        :format="item.formatInput ? item.formatInput : ''"
                        :placeholder="item.placeholder"
                        :start-placeholder="Array.isArray(item.placeholderarr) ? item.placeholderarr[0] : ''"
                        :end-placeholder="Array.isArray(item.placeholderarr) ? item.placeholderarr[1] : ''"
                        :picker-options="item.pickerOptions"/>
        <!-- cascader级联 -->
        <el-cascader v-else-if="item.formtype === 'cascader'" v-model="item.value" :clearable="item.clearable"
                     :placeholder="item.placeholder" :filterable="item.filterable" :options="item.data()"
                     :props="item.props || optionProps" :size="item.size || 'small'" :style="item.style || ''"
                     @change="(val) => { handleChange(val, item.change);}">
          <!-- <template slot-scope="{ node, data }">
            <el-tooltip
              :disabled="data.departmentName.length < 11"
              class="item"
              effect="dark"
              :content="data.departmentName"
              placement="top-start"
            >
              <span>{{ hideWords(data.departmentName) }}</span>
            </el-tooltip>
          </template> -->
        </el-cascader>
        <!-- text -->
        <span v-else-if="item.formtype === 'text'" :style="item.style || ''" v-html="item.value"/>
        <!-- 其他 -->
        <template v-else-if="item.formtype === 'render'">
          <expand-dom :column="item" :render="item.render"/>
        </template>
        <slot :name="index"/>
      </el-form-item>
      <el-form-item v-if="!formdata.bottonflag">
        <!--class="search-btn"-->
        <el-button
            type="primary"
            size="medium"
            @click="search()"
        >{{ formdata.btntext }}
        </el-button>
      </el-form-item>
      <el-form-item v-if="!formdata.resetBottonflag">
        <!-- <slot name="last" /> -->
        <!--class="reset-btn"-->
        <el-button
            size="medium"
            plain
            @click="searchReset()"
        >{{ formdata.btnResetText || '重置' }}
        </el-button>
      </el-form-item>
      <slot></slot>
    </el-form>
  </div>
</template>
<script>
import ElForm from 'modesign-ui/packages/form';
import ElFormItem from 'modesign-ui/packages/form-item';
import ElInputNumber from 'modesign-ui/packages/input-number';
import ElSelect from 'modesign-ui/packages/select';
import ElOption from 'modesign-ui/packages/option';
import ElDatePicker from 'modesign-ui/packages/date-picker';
import ElCascader from 'modesign-ui/packages/cascader';
import ElButton from 'modesign-ui/packages/button';
import ElInput from 'modesign-ui/packages/input'; 
import ElTooltip from 'modesign-ui/packages/tooltip';
export default {
  name: 'ElSearchForm',
  components: {
    expandDom: {
      functional: true,
      props: {
        render: Function,
        column: {
          type: Object,
          default: null
        }
      },
      render: (h, ctx) => {
        const params = {}
        if (ctx.props.column) params.column = ctx.props.column
        return ctx.props.render(h, params)
      }
    },
    ElForm,
    ElFormItem,
    ElInputNumber,
    ElSelect,
    ElOption,
    ElDatePicker,
    ElCascader,
    ElButton,
    ElInput,
    ElTooltip
  },
  props: ['formdata'],
  data() {
    return {
      optionProps: {
        value: 'value',
        label: 'label',
        children: 'children'
      },
      arr: {}
    }
  },
  computed: {},
  created() {
  },
  methods: {
    hideWordsItem(value, txtLength) {
      if (!value) return ''
      if (value.length >= txtLength) {
        return value.slice(0, txtLength) + '...'
      }
      return value
    },
    hideWords(val) {
      return this.hideWordsItem(val, 15)
    },
    search() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          this.formdata.formprops.map((item) => {
            if (!item.key) {
              return
            }
            if (Array.isArray(item.key)) {
              if (item.value === null) {
                item.value = []
              }
              item.key.map((arr, index) => {
                this.arr[item.key[index]] = item.value[index]
              })
            } else {
              if (item.formtype === 'cascader' && !item.level) {
                item = JSON.parse(JSON.stringify(item))
                this.arr[item.key] = item.value.length
                    ? [
                      item.value.length,
                      item.value.splice(item.value.length - 1).join()
                    ]
                    : item.value // 后期可能要传出层级按钮
              } else if (item.formtype === 'cascader' && item.level) {
                item = JSON.parse(JSON.stringify(item))
                this.arr[item.key] = item.value
              } else {
                this.arr[item.key] = item.value
              }
            }
          })
          this.$emit('searchFn', this.arr)
        } else {
          this.arr = {}
          return false
        }
      })
      return this.arr
    },
    // 重置
    searchReset() {
      this.$emit('searchReset')
    },
    filterMethod(val, filter) {
      if (filter) {
        return this.$emit('filterMethod', val)
      }
    },
    selectChange(val, change) {
      if (change) {
        return this.$emit('selectChange', val)
      }
    },
    selectVisibleChange(val, change, item) {
      if (change && !val) {
        return this.$emit('selectVisibleChange', item)
      }
    },
    inputChange(val, change) {
      if (change) {
        return this.$emit('inputChange', val)
      }
    },
    handleChange(val, change) {
      if (change) {
        return this.$emit('cascaderChange', val)
      }
    }
  }
}
</script>
<style lang='scss' scoped>
//@import "@/styles/base";
@import 'packages/theme-chalk/src/common/var.scss';
.search-content-box {
  :deep(.el-form-item__content) {
    .el-date-editor .el-range-separator {
      padding: 0px;
    }
  }

  padding: 16px 24px 0 24px;
  background: #fff;

  :deep(.el-form-item) {
    margin-bottom: 20px;
  }

  .cl-change {
    width: 310px;
  }

  .cl-nomal {
    width: 350px;
  }
}

:deep(.el-form-item__content) {
  line-height: 32px;
}

// 查询按钮
.search-btn {
  display: inline-block;
  width: 80px;
  height: 36px;
  color: #fff;
  // border-radius: 2px;
  border-radius: $--border-radius-small;
  display: flex;
  align-items: center;
  justify-content: center;

  &:hover {
    cursor: pointer;
  }
}

// 重置按钮
.reset-btn {
  display: inline-block;
  width: 80px;
  height: 36px;
  background: #ffffff;
  // border-radius: 2px;
  border-radius: $--border-radius-small;
  display: flex;
  align-items: center;
  justify-content: center;

  &:hover {
    cursor: pointer;
  }
}

// 筛选框间隔
:deep(.el-form--inline .el-form-item) {
  margin-right: 20px;
}
</style>
