<template>
  <div class="search-wrap"
       :id="theme==='light'?'':'dark-search-wrap'"
       :style="formStyle">
    <el-form :model="form"
             ref="formRef"
             label-position="left"
             :rules="formRules">
      <el-form-item v-for="(item,index) in formJson"
                    :label="item&&item.label"
                    :prop="(item&&item.fields)"
                    :key="item&&item.type+index">
        <template v-if="(item&&item.type)==='textInput'">
          <el-input :clearable="clearable"
                    type="text"
                    :placeholder="(item&&item.placeholder)"
                    v-model.trim="form[(item&&item.fields)]">
            <i v-if="(item&&item.prefixIcon)"
               slot="prefix"
               :class="(item&&item.prefixIcon)"></i>
            <i v-if="(item&&item.suffixIcon)"
               slot="suffix"
               :class="(item&&item.suffixIcon)"></i>
          </el-input>
        </template>
        <template v-if="(item&&item.type)==='numberInput'">
          <el-input :clearable="clearable"
                    :placeholder="(item&&item.placeholder)"
                    @input="numInputHandler((item&&item.fields))"
                    v-model.trim="form[(item&&item.fields)]">
            <i v-if="(item&&item.prefixIcon)"
               slot="prefix"
               :class="(item&&item.prefixIcon)"></i>
            <i v-if="(item&&item.suffixIcon)"
               slot="suffix"
               :class="(item&&item.suffixIcon)"></i>
          </el-input>
        </template>
        <template v-if="(item&&item.type)==='selectInput'">
          <el-select v-model="form[(item&&item.fields)]"
                     :clearable="clearable"
                     :placeholder="$t('ht.common.pleaseSelect')">
            <el-option v-for="item in (item&&item.options)"
                       :key="item.value"
                       :label="item.label"
                       :value="item.value">
            </el-option>
          </el-select>
        </template>
        <template v-if="(item&&item.type)==='date'">
          <el-date-picker v-model="form[(item&&item.fields)]"
                          :clearable="clearable"
                          type="daterange"
                          :range-separator="$t('ht.common.date_1')"
                          :start-placeholder="$t('ht.common.startDate')"
                          :end-placeholder="$t('ht.common.endDate')">
          </el-date-picker>
        </template>

      </el-form-item>
      <slot>
        <el-form-item></el-form-item>
      </slot>
    </el-form>
    <el-button type="primary"
               icon="el-icon-search"
               @click.stop.prevent="searchHandler">{{btnText}}</el-button>
    <el-button v-if="showResetBtn"
               icon="el-icon-refresh"
               @click.stop.prevent="resetHandler">{{$t('ht.common.reset')}}</el-button>

  </div>
</template>
<script>
export default {
  name: 'htSearch',
  data () {
    return {
      form: {},
      formRules: {}
    }
  },
  props: {
    curFormValue: {
      type: Object,
      default: () => {
        return {}
      }
    },
    theme: {
      type: String,
      default: 'light',
      validate: (value) => {
        return ['light', 'dark'].includes(value)
      }
    },
    // 按钮文本
    btnText: {
      type: String,
      default: '查询'
    },
    formJson: {
      type: Array,
      default: () => {
        return [
          {
            label: '名称',
            type: 'textInput',
            placeholder: '请输入',
            prefixIcon: 'el-icon-search',
            fields: 'name'
          },
          {
            label: '年龄',
            placeholder: '请输入',
            type: 'numberInput',
            fields: 'age'
          },
          {
            label: '部门',
            type: 'selectInput',
            fields: 'dept',
            options: [
              {
                label: '技术中台1',
                value: 1
              },
              {
                label: '技术中台2',
                value: 2
              }
            ]
          },
          {
            label: '日期',
            type: 'date',
            fields: 'date'
          }
        ]
      }
    },
    clearable: {
      type: Boolean,
      default: true
    },
    showResetBtn: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    formStyle () {
      let theme = this.theme === 'light' ? '#fff' : '#000'
      return {
        '--theme': theme
      }
    }
  },
  watch: {
    form: {
      handler (val) {
        if (!val) return
        this.inputForm()
      },
      deep: true
    },
    formJson: {
      handler (val) {
        if (!val) return
        this.setDefaultForm()
      },
      immediate: true
    }
  },
  methods: {
    async numInputHandler (fields) {
      let value = this.form[fields]
      let temp = value && value.split('.')
      if (Number.isInteger(+value)) return
      let isIntenger = temp && temp.shift()
      const flotStr = temp && temp.join('')
      const result = `${isIntenger}.${flotStr}`
      this.form[fields] = result
      this.form[fields] =
        this.form[fields] && this.form[fields].replace(/[^\d.]/gi, '')
    },
    async resetHandler () {
      this.resetForm()
    },
    setDefaultForm () {
      let jsonLength = this.formJson || []
      for (let i = 0; i < jsonLength; i++) {
        const { fields } = this.formJson && this.formJson[i] && this.formJson[i]
        this.form[fields] = ''
      }
    },
    inputForm () {
      this.$emit('update:curFormValue', this.form)
    },
    async queryFormat () {
      if (!this.form || !Object.keys(this.form)?.length) return
      let arr = Object.keys(this.form)
      arr = arr?.map((item) => {
        const value = this.form?.[item]
        let obj = {
          property: item,
          value,
          group: 'advance',
          relation: 'AND',
          operation: 'LIKE'
        }
        return obj
      })
      this.$emit('query', arr)
    },
    searchHandler () {
      this.$emit('searchCb', this.form)
      this.queryFormat()
    },
    // 重置表单
    resetForm () {
      const dom = this.$refs['formRef']
      if (!dom) return
      dom.resetFields()
    }
  }
}
</script>
<style lang="scss" scoped>
#dark-search-wrap {
  /deep/.el-input__inner {
    background: #e5e5e5;
    color: #e5e5e5;
    border: 1px solid #e5e5e5;
  }
  /deep/.el-range-input {
    background: #e5e5e5;
  }
  /deep/.el-form-item__label {
    color: #fff;
  }
}
.search-wrap {
  display: flex;
  justify-content: flex-start;
  background: var(--theme);
  min-height: fit-content;
  padding: 0 20px;
  box-sizing: border-box;
  /deep/.el-form {
    display: flex;
    flex-wrap: wrap;

    .el-form-item {
      display: flex;
      margin-bottom: 20px;
      margin-top: 20px;
      &:not(:last-child) {
        margin-right: 10px;
      }
    }
    .el-input__inner,
    .el-range-input {
      background: var(--theme);
    }
  }
  /deep/.el-button {
    height: min-content;
    align-self: flex-end;
    margin-left: 20px;
    margin-bottom: 20px;
  }
}
</style>
