<template>
  <div class="title-box">
    <div class="title-box-bg">
      <img src="../../../../images/part_one/home_bg.png" alt="">
    </div>
    <div class="title-box-content">
      <div class="title-text-box">
        <div class="title-h2">慧企查</div>
        <div class="title-middle-line"></div>
        <div class="title-right-tag">
          <div>一体化企业</div>
          <div>信息查询平台</div>
        </div>
      </div>

<!--      <div class="title-h4">-->
<!--        <div class="box-line"></div>-->
<!--        <div class="title-h4-text">精准、高效的营销尽调助手</div>-->
<!--        <div class="box-line"></div>-->
<!--      </div>-->
      <div class="search-box" @click="goSearch">
        <div>
          <van-icon name="search" />
        </div>
        <div class="search-text">请输入企业名称/法人代表</div>
      </div>
      <div class="new-box">
        <div class="remen-title">历史搜索</div>
        <div class="line-vertical"></div>
        <div class="remen-keys-box">
          <div class="remen-keys" @click="goSearchHistory(remenItem)"
            v-for="(remenItem, remenIndex) in historyList" :key="remenIndex">#{{ remenItem.length > 4 ? remenItem.substring(0,4) : remenItem }}#</div>
        </div>
<!--        <van-icon @click="getPopular()" name="replay" />-->
      </div>
    </div>

  </div>
</template>

<script>
import { Icon, Divider } from 'vant';//button组件
import { Swiper, SwiperSlide, directive } from 'vue-awesome-swiper'
import 'swiper/swiper-bundle.css'
import { getQueryHotWordList } from "../../../../service/api/home";
import Swiper2, { Navigation, Pagination, Autoplay } from 'swiper'; import { changeCartNum } from "@/service/api";

Swiper2.use([Navigation, Pagination, Autoplay]);

export default {
  name: "Sowing",
  props: {
    sowing_list: Array
  },
  data() {
    return {
      remenList: [],// 热门数据列表
      swiperOptions: {
        notNextTick: true,
        pagination: { // 分页
          el: '.swiper-pagination',
          clickable: true,
          bulletActiveClass: 'my-swiper-select'
        },
        loop: true, // 循环
        autoplay: {
          delay: 1000,  // 自动播放,切换时长
        },
        speed: 600, // 速度
        direction: 'horizontal',  // 滚动方向
        on: { // 滑动后监听,回调函数
          slideChangeTransitionEnd() {
            //console.log(this.activeIndex);
          }
        }
      },
      historyList: [],
    }
  },
  computed: {
    swiper() {
      return this.$refs.mySwiper.$swiper;
    }
  },
  mounted() {
    //  进来就在一秒内滚动到第3页
    // this.swiper.slideTo(3, 1000);
    this.getPopular();
    this.historyList = JSON.parse(sessionStorage.getItem('historyList'));
  },
  methods: {
    goSearchHistory(value) {
      sessionStorage.setItem('searchValue', value);
      this.$router.push('/search');
    },

    goSearch() {
      this.$router.push('/search');
      sessionStorage.removeItem('searchValue');
    },

    // 获取热门数据
    async getPopular() {
      let result = await getQueryHotWordList();
      this.remenList = result;
    },
  },
  components: {
    VanIcon: Icon,
    Divider,
    Swiper,
    SwiperSlide
  },
  directives: {
    swiper: directive
  }
}
</script>

<style scoped>
#swiper {
  height: 14rem;
  width: 100%;
  background-color: transparent;
}

#swiper img {
  width: 100%;
  height: 100%;
}

#swiper /deep/ .my-swiper-select {
  background-color: #75a342;
  opacity: 1;
}


.title-box {
  position: relative;
}

.title-box-content {
  padding: 32px 0 30px;
  width: 100%;
  text-align: center;
  color: #ffffff;
  position: relative;
}

.title-box-bg {
  width: 100%;
  height: 200px;
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
}

.title-box-bg img {
  width: 100%;
  height: 230px;
}

.title-h2 {
  font-size: 1.4rem;
  font-weight: bold;
}

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

.title-h4-text {
  font-size: 0.9rem;
  font-weight: bold;
  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 {
  margin-left: 0.3rem;
  font-size: 0.9rem;
}

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

.new-box {
  font-size: 0.9rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

.remen-title {
  font-weight: bold;
}

.line-vertical {
  width: 2px;
  height: 1rem;
  background: #ffffff;
  margin: 1px 16px 0;
}

.remen-keys-box {
  font-size: 0.8rem;
  width: 60%;
  overflow: hidden;
  display: flex;
  justify-content: start;
  align-items: center;
}

.remen-keys {
  margin-right: 12px;
  /*overflow: hidden;*/
  white-space: nowrap;
  /*min-width: 70px;*/
}

.title-text-box{
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 20px;
}

.title-middle-line{
  width: 1px;
  height: 30px;
  background: #2372EB;
  margin: 0 16px;
}

.title-right-tag{
  padding:4px 8px;
  background: #2372eb;
  color: #ffffff;
  font-size: 0.8rem;
  border-radius: 4px;
  text-align: left;
}
</style>
