<template>
  <div>
    <WlSearch
      :style="searchStyleExtra"
      v-model="value"
      @onChange="onChange"
      @onClear="onClear"
      :placeholder="placeholder"
    />
    <div class="search-list-container">
      <div
        class="search-list"
        v-for="(item, index) in searchList"
        :key="index"
        @click.prevent="onClick(item)"
      >
        <div class="search-list-item">
          <i class="iconfont search-list-item-search-icon" :class="searchIcon"></i>
          <div class="search-list-item-text">
            <span class="search-list-item-title">{{ titleKey ? item[titleKey] : item }}</span>
            <span class="search-list-item-subtitle" v-if="subtitleKey">{{
              item[subtitleKey]
            }}</span>
          </div>
          <i
            class="iconfont search-list-item-close-icon"
            :class="closeIcon"
            @click.stop="onClose(item)"
          ></i>
        </div>
        <div class="division"></div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "WlSearchList",
  props: {
    value: {
      type: String,
      default: "",
    },
    placeholder: {
      type: String,
      default: "搜索",
    },
    closeIcon: {
      type: String,
      default: "",
    },
    searchIcon: {
      type: String,
      default: "",
    },
    searchList: {
      type: Array,
      default: () => [],
    },
    titleKey: {
      type: String,
      default: "",
    },
    subtitleKey: {
      type: String,
      default: "",
    },
    searchListExtra: {
      type: Object,
      default: () => {},
    },
    searchStyleExtra: {
      type: Object,
      default: () => {},
    },
  },
  methods: {
    onClickEmit(data){
      this.$emit('onClick', data)
    },
    onChange(data) {
      this.$emit('onChange', data)
    },
    onClear() {
      this.$emit('onChange', '')
    },
    onClick(item) {
      this.onClickEmit({
        type: 'item',
        data: item
      })
    },
    onClose(item) {
        this.onClickEmit({
        type: 'icon',
        data: item
      })
    },
  },
};
</script>
<style lang="scss" scoped>
.search-list {
  &-container {
    box-shadow: 0px 0px j(5) rgba(0, 0, 0, 0.1);
    margin-top: j(1);
  }

  &-item {
    @extend %flex-between;
    color: rgb(207, 207, 207);
    padding: j(10) j(15);
    &-search-icon {
      margin-right: j(20);
    }
    &-close-icon {
      cursor: pointer;
    }
    &-text {
      text-align: left;
      flex: 1;
      @extend %flex-direction-column;
    }
    &-title {
      color: black;
    }
  }
}
.division {
  height: j(1);
  transform: scaleY(0.5);
  background-color: #eeeeee;
}
</style>
