<template>
  <div class="search-form">
    <a-form-model ref="form" :model="formModel" v-bind="$attrs" @keyup.enter.native="onSearch">
      <a-row :gutter="20" style="margin-right: 0 !important;">
        <a-col
          class="search-form-item"
          v-for="(item, index) in items"
          :key="index"
          :span="item.span || 6"
          :style="item.style"
        >
          <a-form-model-item :label="item.label" :prop="item.name" :labelCol="item.labelCol">
            <component :is="item.type" v-bind="item.props" v-model="formModel[item.name]" v-on="item.on"></component>
          </a-form-model-item>
        </a-col>
        <a-button class="search-btn" type="primary" @click="onSearch">
          <img src="@/assets/images/global/search.png" alt="" />
          search
        </a-button>
        <slot name="additional"></slot>
      </a-row>
    </a-form-model>
  </div>
</template>

<script>
import { cloneDeep } from 'lodash'
export default {
  props: {
    items: {
      type: Array,
      default: () => []
    },
    value: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      formModel: cloneDeep(this.value)
    }
  },
  methods: {
    onSearch() {
      this.$emit('search', this.formModel)
    }
  },
  watch: {
    value(val) {
      this.formModel = val
    },
    formModel: {
      handler(val) {
        this.$emit('input', val)
      },
      deep: true
    }
  }
}
</script>

<style lang="less" scoped>
.search-form {
  padding: 10px;
  padding-bottom: 0;
  border-top: 1px solid rgba(12, 235, 201, 0.3);
  border-bottom: 1px solid rgba(12, 235, 201, 0.3);
  margin-bottom: 18px;
  background-color: rgba(12, 235, 201, .05);
  &-item {
    margin-bottom: 10px;
  }
}
::v-deep .ant-form-item {
  display: flex;
  margin-bottom: 0;
  .ant-form-item-label,
  .ant-form-item-control {
    line-height: 32px;
  }
  .ant-form-item-label {
    flex-shrink: 0;
  }
  .ant-form-item-control-wrapper {
    width: 100%;
  }
}

.search-btn {
  img {
    width: 16px;
    height: 17px;
    margin-right: 9px;
  }
}
</style>
