<script setup lang="ts">
import { ref } from 'vue'
import { useI18n } from 'vue-i18n'
import { searchStock } from '@/api/search'
import { onLoad } from '@dcloudio/uni-app'
import { closeToast, showLoadingToast } from 'vant'
import icon1 from '@/static/4.png'

const { t } = useI18n()
const code = ref('')
const history = ref([])
const searchValue = ref([])

const search = async () => {
  showLoadingToast({
    message: t('search.tip2'),
    forbidClick: true,
    overlay: true
  })
  const res = await searchStock({ code: code.value })
  closeToast()
  if (res.code === 1) {
    if (res.data.result.length) {
      // addHistory()
      // getHistory()
      if (!history.value.find((item) => item === code.value)) {
        addHistory()
        getHistory()
      }
    }
    searchValue.value = res.data.result
  }
}

const clickSearch = (value) => {
  code.value = value
  search()
}

// 添加搜索历史
const addHistory = () => {
  history.value.push(code.value)
  console.log(history.value, 'history.value')

  uni.setStorageSync('history', history.value)
}

// 获取搜索历史
const getHistory = () => {
  history.value = uni.getStorageSync('history') || []
}

// 跳转详情
const goPage = (id: number) => {
  uni.navigateTo({
    url: '/subPackages/index/gupiaoDetail/gupiaoDetail?id=' + id
  })
}

const goBack = () => {
  uni.navigateBack({})
}

// 删除记录
const delkeyword = (value) => {
  history.value = history.value.filter((item) => item !== value)
  uni.setStorageSync('history', history.value)
}

onLoad(() => {
  getHistory()
})
</script>
<template>
  <!-- <Navigator :title="t('search.title')" /> -->
  <!-- <view class="nav">

  </view> -->
  <view class="top-box">
    <img :src="icon1" style="width: 0.625rem; height: 1.0547rem; margin-left: 1.0625rem" @click="goBack" />
    <view class="input_wrap">
      <image src="/static/image/searchNavigation/search.png" class="search-img" />
      <input v-model="code" :placeholder="t('search.tip3')" cursor-color="#ffffff" auto-focus @confirm="search" />
    </view>
    <view class="search_text" @click="search">{{ t('search.title') }}</view>
  </view>
  <view class="content">
    <!-- <view class="title">{{ t('search.sousuolishi') }}</view> -->
    <view v-if="!searchValue.length" class="keyword">
      <view v-for="item in history" :key="item" class="keyword-list">
        <view class="keyword-item">
          <view class="keyword-item-left" @click="clickSearch(item)">{{ item }}</view>
          <image src="/static/image/searchNavigation/close.png" class="keyword-close" @click="delkeyword(item)" />
        </view>
      </view>
    </view>
    <view class="list">
      <!-- <view v-if="!searchValue.length" class="not-data"> {{ t('search.tip1') }} </view> -->
      <NotData v-if="!searchValue.length" />
      <view v-for="item in searchValue" :key="item.id" class="list-item" @click="goPage(item.id)">
        <view class="item-title">
          {{ item.name }}{{ item.shuzidaima }} <span>{{ item.price }}&nbsp; {{ item.zhangdieshu }}({{ item.zhangdiebaifenbi }}%)</span>
        </view>
        <img class="arrow" src="/static/rigth.png" />
      </view>
    </view>
  </view>
</template>
<style lang="scss" scoped>
.uni-input-placeholder {
  font-size: 0.8125rem !important;
  color: #fff;
}

.nav {
  width: 100%;
  height: 3.125rem;
}
.top-box {
  width: 100%;
  height: 3.125rem;
  display: flex;
  align-items: center;

  .search {
    width: 4.375rem;
    height: 2rem;
    margin-left: 0.625rem;
    margin-right: 0.9375rem;
    // background: #07c160;
    // ::v-deep .van-button__content {
    //   color: #ffffff;
    // }
  }
  .search_text {
    color: #fff;
    font-size: 0.875rem;
    margin-left: 0.625rem;
  }
  .input_wrap {
    display: flex;
    align-items: center;
    width: 17.8125rem;
    height: 2.125rem;
    border-radius: 1.0313rem;
    // border: 0.0625rem solid #46abef;
    background-color: #08182b;
    margin-left: 0.625rem;
    .search-img {
      margin-left: 0.9375rem;
      margin-right: 0.3125rem;
      width: 0.875rem;
      height: 0.875rem;
    }
  }
}
.content {
  width: 100%;
  // display: flex;
  // flex-direction: column;
  // justify-content: center;
  // align-items: center;
  // margin-top: 0.9375rem;

  .list {
    margin-top: 0.9375rem;

    .not-data {
      text-align: center;
      margin-top: 6.25rem;
      color: #0e0e0e;
    }
    .list-item {
      height: 4.0625rem;
      width: 100%;
      padding: 0 0.9375rem;
      border-radius: 4px;
      display: -webkit-box;
      display: -webkit-flex;
      display: flex;
      -webkit-box-align: center;
      -webkit-align-items: center;
      align-items: center;
      -webkit-box-pack: justify;
      -webkit-justify-content: space-between;
      justify-content: space-between;
      background-color: $uni-bg-color;

      .arrow {
        width: 1.25rem;
        height: 1.25rem;
      }

      .item-title {
        height: 4.0625rem;
        font-weight: 600;
        font-size: $uni-font-size-lg;
        color: #333;
        display: -webkit-box;
        display: -webkit-flex;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -webkit-flex-direction: column;
        flex-direction: column;
        -webkit-box-pack: center;
        -webkit-justify-content: center;
        justify-content: center;

        span {
          font-size: $uni-font-size-lg;
          font-weight: 400;
          color: #333;
          margin-top: 0.3125rem;
        }
      }
    }
  }

  .keyword {
    margin-top: 0.4375rem;
    // padding: 0 0.9375rem;
    display: flex;
    flex-flow: wrap;
    // padding: 0 9px;
    font-size: $uni-font-size-2;
    .keyword-item {
      // width: 6.0938rem;
      width: 23.4375rem;
      height: 2.125rem;
      padding: 0.5rem 0.9375rem 0.4063rem 0.9375rem;
      height: 1.7188rem;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .keyword-item-left {
        color: #a6a6a6;
        font-size: 0.875rem;
      }

      .keyword-close {
        width: 0.6995rem;
        height: 0.6995rem;
      }
    }
  }

  .title {
    margin-top: 0.6875rem;
    margin-left: 1.25rem;
    font-size: $uni-font-size-1;
    font-weight: 600;
  }
}

::v-deep.uni-input-input {
  color: #fff !important;
  font-size: 0.8125rem !important;
}

uni-input {
  flex: 1;
}
</style>
