<template>
  <div class="absolute search-modal" v-if="vDraw" v-show="vValue" @click.stop>
    <tab
      :data="tabData"
    >
      <template v-slot:header="{data,trigger,select}">
        <header class="search-header rowACenter">
          <aside
            v-for="(item,index) in data"
            :key="'search-tab-'+index"
            @click="trigger(index)"
            class="search-tab-item flex-1 center relative"
            :class="{
              'cursor-pointer': select !== index
            }"
          >
            {{item.label}}
            <div v-if="select === index" class="absolute search-line center">
              <div></div>
            </div>
          </aside>
        </header>
      </template>

      <template
          v-slot:[item.slot]
          v-for="(item,index) in tabData"
      >
        <search-list
          :key="'search-list-'+index"
          :data="data"
          :type="item.type"
        ></search-list>
      </template>
    </tab>
  </div>
</template>

<script>
import {
  Popup,
  tab
} from '$components';
import mixins from '../mixins';
import searchList from '../components/search-list';
import props from '../props';
export default {
  name: "search-modal",

  components:{
    Popup,
    tab,
    searchList
  },

  props,

  mixins
}
</script>

<style scoped lang="scss" src="../style.scss"></style>