<template>
  <div class="search-wrapper items-center">
    <syButton @click="goPassMaker" v-if="showCreateAsset"
      >创建数字资产</syButton
    >
    <div class="choose-type ml-4">
      <syMoreOperate
        teleport
        :width="156"
        :margin-top="10"
        :list="filterOperateList"
        @click-item="handleClickFilterOperateItem"
      >
        <div class="chosen-type">
          {{ query !== undefined && types[query.type] }}
          <syIcon
            class="ml-4"
            name="iconzhankai"
            color="#1c2323"
            size="12px"
          ></syIcon>
        </div>
      </syMoreOperate>
    </div>
    <sySearch
      v-model:value="searchInput"
      placeholder="搜索资产标识"
    ></sySearch>
    <div class="sort">
      <syMoreOperate
        teleport
        :width="156"
        :margin-top="10"
        :margin-left="-15"
        :list="sortOperateList"
        @click-item="handleclickSortOperateItem"
      >
        <div class="chosen-sort whitespace-nowrap">
          <syIcon name="iconshaixuan" color="#1c2323" size="12px"></syIcon>
          <span class="mx-1">{{ query && sorts[query.amount_sort] }}</span>
          <syIcon name="iconzhankai" color="#1c2323" size="12px"></syIcon>
        </div>
      </syMoreOperate>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import { debounce, syButton, sySearch, syIcon, syMoreOperate } from "cqk-sy-ui";

export default defineComponent({
  components: {
    syButton,
    syIcon,
    sySearch,
    syMoreOperate,
  },
  props: ["query", "searchPlaceholder", "showCreateAsset"],
  emits: ["update:query"],
  data() {
    return {
      types: ["全部", "FT", "NFT"],
      sorts: ["默认排序", "数量从低到高", "数量从高到低"],
      searchInput: "",
      type: "全部",
      sort: "默认排序",
      filterOperateList: [
        {
          name: "全部",
          value: "0",
        },
        {
          name: "FT",
          value: "1",
        },
        {
          name: "NFT",
          value: "2",
        },
      ],
      sortOperateList: [
        { name: "默认排序", value: "默认排序" },
        { name: "数量从低到高", value: "数量从低到高", iconName: 'iconjiang', },
        { name: "数量从高到低", value: "数量从高到低", iconName: 'iconsheng', },
      ],
    };
  },
  watch: {
    searchInput: debounce(
      function (this: any, val: any) {
        (this as any).$emit(
          "update:query",
          Object.assign({}, (this as any).query, { identifier: val })
        );
      },
      500,
      false
    ),
  },
  methods: {
    handleclickSortOperateItem(v: any) {
      const index = this.sortOperateList.findIndex((i) => i.value === v);
      this.selectSort(index);
    },
    handleClickFilterOperateItem(v: any) {
      const index = this.filterOperateList.findIndex((i) => i.value === v);
      this.selectType(index);
    },
    selectType(index: any) {
      console.log("selectType", index);
      console.log(Object.assign({}, this.query, { type: index }), "show ");
      this.$emit(
        "update:query",
        Object.assign({}, this.query, { type: index })
      );
    },
    selectSort(index: any) {
      this.$emit(
        "update:query",
        Object.assign({}, this.query, { amount_sort: index })
      );
    },
    goPassMaker() {
      this.$router.push("/passMaker");
    },
  },
});
</script>

<style scoped lang="scss">
.search-wrapper {
  display: flex;
  margin-top: 29px;
  margin-left: 13px;
  .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 {
    font-size: 14px;
    color: var(--sy-black);
    position: relative;
    display: flex;
    margin-right: 4px;

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

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

  .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;
      }
    }
  }
}
</style>
