<template>
  <div class="search-wrapper">
    <div class="choose-type">
      <div class="chosen-type" @click="show('showChooseType')">
        {{types[query.type]}}
        <svg-icon class="arrow-down" icon-class="down"/>
      </div>
      <ul v-if="showChooseType" class="type-ul" @mousedown.stop>
        <li
            @click="selectType(index)"
            :key="type"
            v-for="(type, index) in types">
          {{type}}
        </li>
      </ul>
    </div>
    <div class="input">
      <input type="text" v-model="searchInput" :placeholder="searchPlaceholder || '搜索通证标识'">
      <svg-icon class="icon-search" icon-class="search"></svg-icon>
    </div>
    <div class="sort">
      <div class="chosen-sort" @click="show('showChangeSort')">
        <svg-icon class="icon-sort" icon-class="sort"/>
        {{sorts[query.amount_sort]}}
        <svg-icon class="arrow-down" icon-class="down"/>
      </div>
      <ul v-if="showChangeSort" class="sort-ul" @mousedown.stop>
        <li
            @click="selectSort(index)"
            :key="sort"
            v-for="(sort, index) in sorts">
          {{sort}}
          <svg-icon
              v-if="index !== 0"
              class="icon-arrow"
              :class="{reverse: index === 1}"
              icon-class="arrow" />
        </li>
      </ul>
    </div>

  </div>
</template>

<script>
import {debounce} from "../../utils/tool/debounce";

export default {
  name: "Search",
  props: ['query', 'searchPlaceholder'],
  model: {
    prop: 'query',
    event: 'update'
  },
  data() {
    return {
      types: ['全部', 'FT', 'NFT'],
      sorts: ['默认排序', '数量从低到高', '数量从高到低'],
      searchInput: '',
      type: '全部',
      sort: '默认排序',
      showChooseType: false,
      showChangeSort: false,

    }
  },
  watch: {
    searchInput: debounce(function (val) {
      this.$emit('update', Object.assign({}, this.query, {identifier: val}))
    }, 500, false)
  },
  methods: {
    selectType(index) {
      this.$emit('update', Object.assign({}, this.query, {type: index}))
      this.showChooseType = false;
    },
    selectSort(index) {
      this.$emit('update', Object.assign({}, this.query, {amount_sort: index}))
      this.showChangeSort = false;
    },
    show(tag) {
      this[tag] = true;
      document.addEventListener("mousedown", this.onMenuBlur);
    },
    onMenuBlur() {
      this.showChooseType = false;
      this.showChangeSort = false;
      document.removeEventListener("mousedown", this.onMenuBlur);
    },
  }
}
</script>

<style scoped lang="less">
.search-wrapper {
  display: flex;

  .choose-type {
    text-indent: 17px;
    font-size: 14px;
    color: #353535;
    position: relative;
    display: flex;
    margin-right: 15px;

    .chosen-type {
      display: flex;
      flex-direction: row;
      align-items: center;
      width: 56px;
      &:hover {
        cursor: pointer;
      }
    }

    .arrow-down {
      margin-left: auto;
      width: 9px;
      height: 4px;
    }

    .type-ul {
      position: absolute;
      left: 0;
      top: 40px;
      width: 154px;
      padding: 7px 0;
      background: #FFFFFF;
      box-shadow: 0 2px 11px 0 rgba(82, 66, 108, 0.16);
      border-radius: 4px;
      border: 1px solid #DDDDDD;
      z-index: 2;

      li {
        line-height: 35px;
        color: black;
        font-size: 14px;
        padding-left: 19px;
        list-style: none;

        &:hover {
          background-color: #F5F6FA;
        }
      }
    }
  }

  .input {
    position: relative;
    input {
      width: 239px;
      height: 35px;
      border-radius: 20px;
      padding-left: 27px;
      font-size: 14px;
      border: none;
      outline: transparent;
    }
    .icon-search {
      position: absolute;
      right: 21px;
      top: 9px;
      width: 19px;
      height: 19px;
    }
  }

  .sort {
    margin-left: auto;
    margin-right: 23px;
    font-size: 14px;
    color: #1C2323;
    display: flex;
    position: relative;

    .chosen-sort {
      display: flex;
      align-items: center;
      cursor: pointer;

      .icon-sort {
        width: 12px;
        height: 12px;
        margin-right: 10px;
      }

      .arrow-down {
        width: 9px;
        height: 4px;
        margin-left: 8px;
      }
    }

    .sort-ul {
      position: absolute;
      right: -23px;
      top: 40px;
      width: 154px;
      padding: 7px 0;
      background: #FFFFFF;
      box-shadow: 0 2px 11px 0 rgba(82, 66, 108, 0.16);
      border-radius: 4px;
      border: 1px solid #DDDDDD;
      z-index: 2;

      li {
        line-height: 35px;
        color: black;
        font-size: 14px;
        padding-left: 19px;
        list-style: none;
        display: flex;
        align-items: center;

        &:hover {
          background-color: #F5F6FA;
        }

        .icon-arrow {
          width: 10px;
          height: 12px;
          margin-left: 15px;

          &.reverse {
            transform: rotate(180deg);
          }
        }
      }
    }
  }
}

</style>
