<template>
  <div class="page">
    <div class="search-box flex">
      <van-search
        left-icon="/img/search/search.png"
        v-model="value"
        :placeholder="$t('common.l23')"
        @input="onSearch"
      />
      <div class="cancel" @click="onCancel">
        <!-- 取消 -->
        {{ $t('common.l2') }}
      </div>
    </div>
    <template v-if="value.trim()">
      <div class="list">
        <van-loading v-if="loading" type="spinner" color="#FF6F30" />
        <div
          class="item"
          v-for="item in list"
          :key="item.id"
          @click="checkDetail(item.symbol)"
        >
          <div class="tag-box">
            <div class="tag" :class="getTagName(item)">{{ getTagName(item) }}</div>
          </div>
          <div class="body">
            <div>
              <div class="title">{{ item.title }}</div>
              <div class="symbol">{{ item.symbol }}</div>
            </div>
          </div>
        </div>
      </div>
      <NoData
        v-if="noData && list.length == 0 && !loading"
      ></NoData>
    </template>
    <div v-show="!value.trim()">
      <hotList :market="market" @back="checkDetail" />
    </div>
  </div>
</template>
<script>
import { getProductList } from "@/api/product";
import hotList from "./hotList.vue";
export default {
  props: ['market'],
  components: {
    hotList,
  },
  data() {
    return {
      value: "",
      list: [],
      searchList: [],
      loading: false,
      noData: false,
      timer: null,
    };
  },
  computed: {},
  created() {},
  methods: {
    onSearch() {
      this.timer && clearTimeout(this.timer);
      this.noData = false;
      if (this.value.trim()) {
        this.timer = setTimeout(() => {
          this.getProductList();
        }, 1000);
      }
    },
    onCancel() {
      this.$emit("cancel");
    },
    checkDetail(symbol) {
      this.$emit("success", symbol);
    },
    searchItem(val) {
      this.value = val;
      this.getProductList();
    },
    getProductList() {
      this.loading = true;
      getProductList({
        symbol_title: this.value.trim(),
        pageNum: 1,
        pageSize: 20,
        market: this.market,
        client: 'H5'
      })
        .then((res) => {
          var list1 = res.list || [];
          var list = list1;
          if (!this.appParams.uncrypto) {
            list = list1.filter(item => item.market !== 'CFD')
          }
          this.list = list;
        })
        .catch(() => {})
        .finally(() => {
          this.noData = true;
          this.loading = false;
        });
    },
    getTagName(item) {
      if (item.market == 'CN') {
        var list = item.symbol.split('.')
        return list[1]
      }
      return item.market
    }
  },
};
</script>
<style lang="less" scoped>
.page {
  min-height: 100vh;
}
.search-box {
  position: sticky;
  top: 0;
  z-index: 10;
  background-color: #fff;
  padding: 6px 0 10px 18px;
  column-gap: 13px;
  border-bottom: 1px solid #EBEBEB;
  .van-search {
    flex: 1;
    min-width: 10%;
    max-width: 100%;
    padding: 0px;
  }
  .cancel {
    font-size: 18px;
    padding-right: 17px;
  }
}
::v-deep {
  .van-search__content {
    background-color: #f6fafe;
    border-radius: 7px;
  }
  .van-search {
    .van-cell {
      padding: 10px 8px 10px 0;
      .van-field__left-icon {
        display: flex;
        align-items: center;
        .van-icon__image {
          width: 20px;
          height: auto;
        }
      }
    }
    .van-field__control {
      font-size: 18px;
    }
  }
}
.list {
  position: relative;
  background-color: #fff;
  padding-bottom: 12px;
}
.van-loading {
  text-align: center;
}
.tag-box {
  padding-top: 14px;
  font-size: 10px;
  color: #fff;
  width: 33px;
  display: flex;
  .tag {
    padding: 2px 3px;
    border-radius: 2px;
  }
  .US {
    background-color: #FFF1F1;
    color: #EA4A45;
  }
  .HK {
    background-color: #EDF6FF;
    color: #1989FF;
  }
  .SZ,.SH {
    background-color: #FFEEE7;
    color: #FF6F30;
  }
  .CFD {
    background-color: rgb(94, 199, 250);
    color: #fff;
  }
}
.item {
  display: flex;
  align-items: flex-start;
  padding: 0 18px;
  & + .item {
    .body {
      border-top: 1px solid #f5f5f5;
    }
  }
  .body {
    justify-content: space-between;
    min-width: 10%;
    max-width: 100%;
    flex: 1;
    padding: 12px 0;
  }
  .title {
    font-size: 16px;
    font-weight: 500;
    color: var(--color-1-);
    margin-bottom: 4px;
  }
  .symbol {
    font-size: 12px;
    color: #959697;
  }
  .icon {
    width: 24px;
    display: block;
    cursor: pointer;
  }
}
</style>