<template>
  <div class="search-form">
    <a-form-model ref="form" :colon="false" :model="formModel" v-bind="$attrs">
      <a-row v-if="type == 'single-line'" :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">
            <a-checkbox v-if="item.type == 'a-checkbox'" v-model="formModel[item.name]" v-on="item.on">
                {{ item.innerLabel }}
            </a-checkbox>
            <component v-else :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>
      <!-- 多行自定义 -->
      <template v-else-if="type == 'multi-line'">
        <a-row v-for="(item, index) in items" :key="index" :gutter="20" :style="item.style">
          <a-col
            class="search-form-item"
            v-for="(child, index) in item.list"
            :key="index"
            :style="child.style"
          >
            <a-form-model-item :label="child.label" :prop="child.name" :labelCol="child.labelCol">
              <component :is="child.type" v-bind="child.props" v-model="formModel[child.name]" v-on="child.on"></component>
            </a-form-model-item>
          </a-col>
        </a-row>
      </template>
    </a-form-model>
  </div>
</template>

<script>
import { cloneDeep } from 'lodash'
export default {
  props: {
    items: {
      type: Array,
      default: () => []
    },
    value: {
      type: Object,
      default: () => ({})
    },
    type: {
      type: String,
      default: 'single-line'
    }
  },
  data() {
    return {
      formModel: cloneDeep(this.value)
    }
  },
  methods: {
    onSearch() {
      this.$emit('search', this.formModel)
    }
  },
  watch: {
    value: {
      handler(val) {
        this.formModel = val
      },
      deep: true
    },
    // 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, 0.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;
    height: 32px;
  }
  .ant-form-item-label {
    flex-shrink: 0;
    margin-right: 10px;
    label {
      font-size: 16px;
      &::after {
        display: none;
      }
    }
  }
  .ant-form-item-control-wrapper {
    width: 100%;
    overflow: hidden;
  }
}

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