<template>
  <ElPopover placement="bottom" popper-class="global-input-search-popover" :popperOptions="popperOptions"
    :visibleArrow="false" :width="this.width" trigger="hover" @show="handleShow">
    <div class='InputSearch' slot="reference" ref="ReferenceInputRef">
      <span>{{ placeholder }}</span>
      <img src="./search.svg">
    </div>

    <div style="width: 100%">
      <slot>
        <Form v-if="formList && formList.length" class="form" ref="FormConfigRef" :formList="formList"
          v-bind="getFormConfigOptions" />
        <ElEmpty v-else description="暂无搜索内容"></ElEmpty>
      </slot>

      <div class="footer">
        <Button style="background-color: rgba(0, 179, 204, .3);" @click.native="handleResetForm">
          重置
        </Button>
        <Button @click.native="handleSearch">
          搜索
        </Button>
      </div>
    </div>
  </ElPopover>
</template>

<script>
import Button from '@screen/components/Buttons/Button.vue';
import Form from '@screen/components/FormConfig';
import { cloneDeep } from "lodash"

export default {
  name: 'InputSearch',
  components: {
    Button,
    Form
  },
  props: {
    placeholder: {
      type: String,
      default: "请点击右侧图标筛选"
    },
    formConfigOptions: {
      type: Object,
      default: null
    },
    formList: {
      type: Array,
      default: () => []
    },
  },
  data() {
    return {
      width: null,
      popperOptions: {}
    }
  },
  emit: [
    "handleSearch"
  ],
  computed: {
    getFormConfigOptions() {
      return {
        column: "1",
        labelWidth: "120px",
        ...this.formConfigOptions
      }
    }
  },
  methods: {
    handleShow() {
      if (this.width) return;

      this.width = this.$refs.ReferenceInputRef.getBoundingClientRect().width
    },
    handleResetForm() {
      this.$refs.FormConfigRef?.reset();

      this.$emit('handleSearch', cloneDeep(this.$refs.FormConfigRef?.formData));
    },
    handleSearch() {
      this.$emit('handleSearch', cloneDeep(this.$refs.FormConfigRef?.formData));
    }
  }
}
</script>

<style lang='scss' scoped>
.InputSearch {
  height: 26px;
  background: linear-gradient(180deg, #005C79 0%, #009BCC 100%) !important;
  color: #fff;
  border-radius: 2px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 3px 15px;
  padding-right: 9px;
  cursor: pointer;

  font-size: 12px;
  font-family: PingFang SC, PingFang SC;
  font-weight: 400;
  color: #FFFFFF;
  line-height: 14px;
}
</style>
