<template>
  <div class="search-wrapper">
    <div class="add-goods" @click="goPassMaker" v-if="$route.path == '/passList'">
      <i class="iconfont iconjiahao"></i>铸造通证
    </div>
    <div class="choose-type">
      <div class="chosen-type" @click="show('showChooseType')">
        {{types[query.type]}}
        <!-- <svg-icon class="arrow-down" icon-class="down"/> -->
        <Icon name="iconzhankai" color="#1c2323" size="12px"></Icon>

        <!-- <i class="iconfont iconxiangxia select-icon"></i> -->
      </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 || '搜索通证标识'">
      <Icon name="iconzuzhigoujia-chengyuanguanli-chaxunchengyuan" color="#1c2323" size="12px" class="icon-search"></Icon>
      <!-- <svg-icon class="icon-search" icon-class="search"></svg-icon> -->
    </div>
    <div class="sort">
      <div class="chosen-sort" @click="show('showChangeSort')">
        <!-- <svg-icon class="iconshaixuan" icon-class="iconshaixuan" className="iconshaixuan"/> -->
        <Icon name="iconshaixuan" color="#1c2323" size="12px" class="icon-sort"></Icon>

        {{sorts[query.amount_sort]}}
        <!-- <svg-icon class="arrow-down" icon-class="down"/> -->
        <Icon name="iconzhankai" color="#1c2323" size="12px" class="arrow-down"></Icon>
        <!-- <i class="iconfont iconxiangxia select-icon"></i> -->
      </div>
      <ul v-if="showChangeSort" class="sort-ul" @mousedown.stop>
        <li
            @click="selectSort(index)"
            :key="sort"
            v-for="(sort, index) in sorts">
          {{sort}}
          <Icon v-if="index !== 0" :name="index == 1? 'iconjiang' : 'iconsheng'" color="#1c2323" size="14px" style="margin-left:5px;"></Icon> 
          <!-- <svg-icon
              v-if="index !== 0"
              class="icon-arrow"
              :class="{reverse: index === 1}"
              icon-class="arrow" /> -->
        </li>
      </ul>
    </div>

  </div>
</template>

<script>
import Icon from "@/components/Icon.vue"
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)
  },
  components: {
    Icon
  },
  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);
    },
    goPassMaker(){
      this.$router.push('/passMaker')
    }
  }
}
</script>

<style scoped lang="less">
.select-icon {
  display: inline-block;
  // margin-left: 4px;
  font-size: 8px;
  color: #1c2323;
  transform: scale(0.62);
  text-align: left;
}
.search-wrapper {
  display: flex;
  .add-goods {
    float: left;
    margin-left: 21px;
    width: 120px;
    height: 36px;
    cursor: pointer;
    background: rgba(30, 15, 255, 1);
    box-shadow: 0px 2px 10px 0px rgba(30, 15, 255, 0.14),
      0px 2px 10px 0px rgba(30, 15, 255, 0.07);
    border-radius: 18px;
    padding: 0;
    line-height: 36px;
    text-align: center;
    color: white;
    font-size: 14px;
    transition: 0.3s;
    &:hover {
      transform: scale(1.1);
      overflow: hidden;
    }
    .iconfont {
      font-size: 14px;
      margin-right: 8px;
      color: white;
      vertical-align: top;
    }
  }

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

    .chosen-type {
      display: flex;
      flex-direction: row;
      align-items: center;
      width: 90px;
      &: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;
      justify-content: space-between;
      align-items: center;
      min-width: 100px;
      cursor: pointer;

      .icon-sort {
        width: 12px;
        height: 16px;
        margin-right: 8px;
      }
      .arrow-down {
        width: 9px;
        height: 16px;
        margin-left: 5px;
      }
    }

    .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>
