<template>
  <div :class="['ps-search', 'ps-search-group' + searchLen]" ref="psSearchRef">
    <slot></slot>
  </div>
</template>

<script>
export default {
  name: "PsSearch",
  props: {},
  data() {
    return {
      searchLen: 0,
    };
  },
  computed:{
    getChildrenLen(){
      return this.$refs.psSearchRef.children.length
    }
  },
  watch: {
    getChildrenLen(val){
      if(val < 1){
        return false
      }
      this.operaInit();
    }
  },
  created() {},
  mounted() {
    this.operaInit();
  },
  methods: {
    operaInit() {
      let LEN = this.$refs.psSearchRef.children.length
      this.searchLen = LEN > 3 ? parseInt(LEN % 4) : (LEN < 2 ? '0n' : 4 - LEN);
    },
  },
};
</script>

<style>
</style>
