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

    <div class="relationship-img-box">
      <div class="relationship-title">
        关联穿透示例图：
      </div>
      <div class="relation-map-box">
        <img src="../../../images/part_one/relation_map@1x.png" alt="">
      </div>
    </div>
  </div>
</template>

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

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

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

    // 热门搜索
    async getQueryRelationHotWordList() {
      let params = {};
      let result = await getQueryRelationHotWordList(params);
      this.hotTagList = result;
    },


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

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

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

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

.relationship-img-box {
  padding: 1rem;
  background: #ffffff;
}

.relationship-title {
  font-size: 1rem;
  margin-bottom: 10px;
}

.relation-map-box img {
  width: 100%;
}
</style>
