<template>
  <div class="search-list-header-con">
    <div class="search-bar-con flex-default">
      <div class="search-bar flex-default" @click="handleSearch(false)">
        <m-icon icon="icon-search2" :size="15" />
        <div class="content flex-default"  v-if="searchForm.searchKey">
          <span>{{ searchForm.searchKey }}</span>
          <m-icon
            icon="icon-delete"
            :size="14"
            class="icon"
            @click.native.stop="handleSearch(true)"
          />
        </div>
        <div class="placeholder-txt" v-else>
          搜索数字藏品
        </div>
      </div>
    </div>
    <div class="search-opt-con flex-default">
      <div class="filter flex-default">
        <div
          class="item flex-default"
          v-for="(item, index) of filterList"
          :key="'sort-item-' + index"
          :class="filterData.index == index ? 'active' : ''"
          @click="handleFilterChange(item, index)"
        >
          <div class="text flex-default" v-if="item.type == 'sort'">
            <span>{{ item.label }}</span>
            <m-icon :icon="sortIconMap[item.val]" :size="8" class="icon" />
          </div>
          <div class="text flex-default" v-else>{{ item.label }}</div>
          <div class="line" />
        </div>
      </div>
    </div>
    <div class="dropdown-list" v-if="false">
      <div class="item">综合排序</div>
      <div class="item">评论数从高到低</div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    searchForm: {
      type: Object,
      default: () => {
        return {
          searchKey: "",
        };
      },
    },
    currentIndex: 0,
  },
  computed: {
    sortIconMap() {
      let map = {};
      this.filterList.forEach((f) => {
        if (f.type == "sort") {
          if (f.val == this.filterData.val) {
            map[f.val] =
              this.filterData.subVal == "asc"
                ? "icon-sort-asc"
                : "icon-sort-desc";
          } else {
            map[f.val] = "icon-sort-default";
          }
        }
      });
      return map;
    },
  },
  data() {
    return {
      filterList: [
        {
          label: "综合",
          val: "mix",
          type: "default",
        },
        {
          label: "销量",
          val: "sale",
          subVal: "desc",
          type: "sort",
        },
        {
          label: "价格",
          val: "price",
          subVal: "asc",
          type: "sort",
        },
        // {
        //   label: "价格",
        //   val: "price",
        //   type: "option",
        //   option: [
        //     {
        //       label: "价格从高到低",
        //       val: "asc",
        //     },
        //     {
        //       label: "价格从低到高",
        //       val: "desc",
        //     },
        //   ],
        // },
      ],
      filterData: {
        index: 0,
        val: "mix",
        subVal: "",
      },
    };
  },
  methods: {
    handleSearch(clear) {
      this.$emit("search", clear);
    },
    handleFilterChange(item, index) {
      let repeat = this.filterData.index == index;

      this.filterData.index = index;
      this.filterData.val = item.val;

      if (item.type == "default") {
        if (repeat) return;
      } else if (item.type == "sort") {
        let nVal = repeat
          ? item.subVal == "desc"
            ? "asc"
            : "desc"
          : item.subVal;
        item.subVal = nVal;
        this.filterData.subVal = nVal;
      } else if (item.type == "option") {
      }

      this.$emit("filterChange", this.filterData);
    },
  },
};
</script>

<style lang="less">
.search-list-header-con {
  background: #ffffff;
  margin-bottom: 1px;
  top: @mall-nav-bar-height;
  position: sticky;

  > .search-bar-con {
    padding: 8px;

    .search-bar {
      width: 100%;
      height: 36px;
      border-radius: 100px;
      padding: 0 15px;
      align-items: center;
      background: #f8f8f8;
      .content {
        margin-left: 10px;
        align-items: center;
        background: #aeaeae;
        color: #ffffff;
        height: 24px;
        padding: 0 13px;
        border-radius: 15px;
      }
      .content .icon {
        margin-left: 8px;
      }
      .placeholder-txt{
        color: #aeaeae;
        margin-left: 5px;
        font-size: 14px;
      }
    }
  }

  > .search-opt-con {
    height: 40px;

    > .filter {
      width: 100%;
      height: 100%;
    }

    > .filter .item {
      flex: 1;
      text-align: center;
      margin-left: 10px;
      border-bottom: 2px solid transprant;
      flex-direction: column;
      height: 100%;
    }

    > .filter .item:nth-of-type(1) {
      margin-left: 0;
    }

    > .filter .item .text {
      flex: 1;
      align-items: center;
      font-size: 14px;
      .icon {
        margin-left: 5px;
      }
    }

    > .filter .item .line {
      width: 20%;
      height: 3px;
      background: transprant;
      border-radius: 20px;
    }

    .active .text {
      font-weight: bold;
    }

    .active .line {
      background: #2C66F5;
    }
  }

  > .dropdown-list {
    z-index: 10;
    position: absolute;
    top: 93px;
    width: 100%;
    height: 300px;
    background: rgba(0, 0, 0, 0.4);

    .item {
      background: #ffffff;
    }
  }
}
</style>
