<template>
  <div class="search-case-box">
    <navbar title="查失信"></navbar>
    <div class="title-box">
      <div class="title-h2">快速识别身边失信群体</div>
      <div class="search-box" @click="goSearch('')">
        <div>
          <van-icon name="search" />
        </div>
        <div class="search-text">请输入公司名称 / 案号等关键词</div>
      </div>
    </div>

    <div class="hot-search-box">
      <div class="hot-search-title">热门搜索</div>
      <div>
        <van-tag @click="goSearch(tagItem)" v-for="(tagItem, tagIndex) in hotTagList" :key="tagItem" type="primary"
          color="#f2f3f5" text-color="#5c5c5c">{{ tagItem }}</van-tag>
      </div>
    </div>
    <search-result-content class="padding-1rem" :caseInfoList="caseInfoList"></search-result-content>
  </div>
</template>

<script>
import { Icon, Divider, Tag } from 'vant';//button组件
import navbar from '../../../components/navbar/navbar.vue';
import SearchResultContent from './components/searchResultContent/searchResultContent.vue'
import { getQueryShixin, getQueryShiXinHotWordList } from "@/service/api/home";

export default {
  name: "Sowing",
  data() {
    return {
      caseInfoList: [],
      hotTagList: []

    }
  },
  mounted() {
    this.getQueryShixinData();
    this.getQueryShiXinHotWordList();
  },
  methods: {
    goSearch(value) {
      this.$router.push('/dashboard/home/searchDishonesty/result');
      sessionStorage.setItem('searchValue', value);
    },

    async getQueryShixinData() {
      let params = {
        keyword: '',// 搜索关键字
        pageNum: 1,
        pageSize: 10,
      }
      let result = await getQueryShixin(params);
      this.caseInfoList = result.records;
    },

    async getQueryShiXinHotWordList() {
      let params = {};
      let result = await getQueryShiXinHotWordList(params);
      this.hotTagList = result;
    },

    // 刷新热门
    refresh() {

    },
  },
  components: {
    VanIcon: Icon,
    Divider,
    navbar: navbar,
    VanTag: Tag,
    SearchResultContent: SearchResultContent,
  },
}
</script>

<style scoped>
.title-box {
  height: 12rem;
  text-align: center;
  color: #ffffff;
  margin-bottom: 16px;
  padding-top: 82px;
  background: url(../../../images/part_one/search-bg.png) no-repeat;
  background-size: 100% 100%;
}

.title-h2 {
  font-size: 1.2rem;
  font-weight: bold;
  margin-bottom: 24px;
}

.title-h4 {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 16px;
}

.title-h4-text {
  margin: 0 6px;
}

.search-box {
  width: calc(100% - 2rem);
  margin: 0 auto 16px;
  height: 2.6rem;
  background: #ffffff;
  color: #999999;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  border-radius: 6px;
  font-size: 1rem;
  padding-left: 0.625rem;
}

.search-text {
  font-size: 0.9rem;
  margin-left: 0.3rem;
}

.box-line {
  width: 30px;
  height: 1px;
  background: #ffffff;
}

.padding-1rem {
  padding: 1rem;
}

.hot-search-box {
  background: #ffffff;
  margin-bottom: 16px;
  padding: 1rem 1rem 6px;
}

.hot-search-title {
  font-size: 0.9rem;
  font-weight: bold;
  margin-bottom: 10px;
}

.van-tag {
  font-size: 0.8rem !important;
  padding: 4px 10px;
  margin: 0 10px 10px 0;
}
</style>
