<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>
    <div class="list-box" 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, item.title)">
          <div class="tag-box">
            <div class="tag" :class="getTagName(item)">{{ getTagName(item) }}</div>
          </div>
          <div class="body flex">
            <div>
              <div class="title">{{ item.title }}</div>
              <div class="symbol">{{ item.symbol }}</div>
            </div>
            <img class="icon" v-show="favoritelist.indexOf(item.symbol) === -1" @click.stop="isFavorite(item.symbol)" src="/img/icon/like.png?1" alt="极度证券">
            <img class="icon" v-show="favoritelist.indexOf(item.symbol) !== -1" @click.stop="isFavorite(item.symbol)" src="/img/icon/like_a.png?1" alt="极度证券">
          </div>
        </div>
      </div>
      <NoData v-if="noData && list.length == 0 && !loading"></NoData>
    </div>
    <div v-show="!value.trim()">
      <div class="history-box" v-if="searchList.length">
        <div class="delete-box">
          <div class="title">
            <!-- 搜索历史 -->
            {{ $t('about.l24') }}
          </div>
          <div class="delete" @click="deleteSearch">
            <van-icon name="delete-o" />
          </div>
        </div>
        <div class="his-list">
          <div class="his-item" @click="searchItem(item)" v-for="(item, index) in searchList" :key="index">{{ item }}</div>
        </div>
      </div>
      <van-swipe :loop="false" indicator-color="#2B2B2D">
        <van-swipe-item>
          <hotList :list="allObj[13] || []" market="13"/>
        </van-swipe-item>
        <van-swipe-item>
          <hotList :list="allObj[15] || []" market="15"/>
        </van-swipe-item>
        <van-swipe-item>
          <hotList :list="allObj[14] || []" market="14"/>
        </van-swipe-item>
        <van-swipe-item>
          <hotList :list="allObj[11] || []" market="11"/>
        </van-swipe-item>
      </van-swipe>
    </div>
  </div>
</template>
<script>
import { insertProductUser, deleteProductUser } from "@/api/user";
import { getProductList, getProductShowList } from "@/api/product";
import { getStorage, setStorage, delStorage } from "@/utils/localStorage";
import { mapGetters } from "vuex";
import hotList from "./components/hotList.vue";
import bus from "@/utils/bus";
export default {
  components: {
    hotList,
  },
  data () {
    return {
      value: '',
      list: [],
      allObj: {},
      searchList: [],
      loading: false,
      noData: false,
      timer: null,
    }
  },
  computed: {
    ...mapGetters(["myFavoriteList"]),
    favoritelist() {
      return this.myFavoriteList.map(item => item.symbol)
    }
  },
  created () {
    this.getProductUserList()
    this.searchList = getStorage('searchList') || []
    this.getProductShowList()
  },
  methods: {
    onSearch() {
      this.timer && clearTimeout(this.timer)
      this.noData = false
      if (this.value.trim()) {
        this.timer = setTimeout(() => {
          this.getProductList()
        }, 1000)
      }
    },
    onCancel() {
      this.$router.back()
    },
    checkDetail(symbol, title) {
      if (this.searchList.indexOf(title) === -1) {
        this.searchList.unshift(title)
        if (this.searchList.length > 10) {
          this.searchList.pop()
        }
        setStorage('searchList', this.searchList)
      }
      this.$router.push('/product-detail/' + symbol)
    },
    deleteSearch() {
      this.searchList = []
      delStorage('searchList')
    },
    searchItem(val) {
      this.value = val
      this.getProductList()
    },
    getProductList() {
      this.loading = true
      getProductList({
        symbol_title: this.value.trim(),
        pageNum: 1,
        pageSize: 20,
        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
      })
    },
    getProductUserList() {
      this.$store.dispatch('getProductUserList')
    },
    isFavorite(symbol) {
      var index = this.favoritelist.indexOf(symbol)
      if (this.isLogin) {
        if (index === -1) {
          this.insertProductUser(symbol)
        } else {
          this.deleteProductUser(symbol)
        }
      } else {
        var myFavoriteList = this.myFavoriteList
        if (index !== -1) {
          myFavoriteList.splice(index, 1)
          localStorage.removeItem('myFavoriteList')
          localStorage.setItem('myFavoriteList', JSON.stringify(myFavoriteList))
        } else {
          myFavoriteList.unshift({
            symbol: symbol,
            fixed: 0,
            num: 0
          })
          localStorage.setItem('myFavoriteList', JSON.stringify(myFavoriteList))
        }
        this.getProductUserList()
      }
    },
    insertProductUser(symbol) {
      insertProductUser({
        symbol: symbol
      }).then(res => {
        this.getProductUserList()
      }).catch(() => {})
    },
    deleteProductUser(symbol) {
      deleteProductUser({
        symbol: symbol
      }).then(res => {
        this.getProductUserList()
      }).catch(() => {})
    },
    getTagName(item) {
      if (item.market == 'CN') {
        var list = item.symbol.split('.')
        return list[1]
      }
      return item.market
    },
    getProductShowList() {
      getProductShowList({
        groupList: JSON.stringify([13, 14, 15, 11]),
      }).then(res => {
        var groupList = (res.list || []);
        var symbols = [];
        var obj = {}
        groupList.forEach(group => {
          if (!obj[group.id]) {
            obj[group.id] = []
          }
          var productList = (group.productList || []).slice(0, 5);
          productList.forEach(item => {
            obj[group.id].push(item.symbol)
            symbols.push(item.symbol)
          })
        })
        this.allObj = obj
        if (symbols.length == 0) {
          return
        }
        getProductList({
          symbol: JSON.stringify(symbols)
        }).then((res) => {
          var list = res.list || []
          bus.$emit("alterProductData", {
            setData: list,
            subscribeList: symbols,
          });
        })
        .catch(() => {
        })
      }).catch(() => {
      })
    },
  }
}
</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-box {
  background-color: #fff;
  min-height: calc(100vh - 60px);
}
.list {
  position: relative;
  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;
  }
}
.history-box {
  padding: 24px 18px 0;
  .title {
    font-weight: 500;
    font-size: 16px;
    color: var(--color-1-);
  }
  .his-list {
    display: flex;
    column-gap: 6px;
    row-gap: 6px;
    flex-wrap: wrap;
    padding-top: 13px;
    .his-item {
      padding: 7px 12px;
      background: #F7F8FA;
      border-radius: 4px;
      color: var(--color-1-);
      line-height: 18px;
      font-size: 14px;
      cursor: pointer;
    }
  }
}
.delete-box {
  display: flex;
  align-items: center;
  color: #A1A1A1;
  justify-content: space-between;
  .delete {
    cursor: pointer;
    font-size: 20px;
  }
}
::v-deep {
  .van-swipe__indicator {
    background-color: #CECED0;
    opacity: 1;
  }
}
</style>