<template>
  <div>
    <div class="HeaderTop">
      <div class="he-left">
        <img
          @click="backurl"
          src="../../assets/image/header/顶部返回icon.png"
          alt=""
        />
        <img
          @click="CloseWindow"
          src="../../assets/image/header/关闭.png"
          alt=""
        />
      </div>

      <div class="title">
        <slot name="Bigtitle"> </slot>
      </div>
    </div>

    <!-- 搜索框 -->
    <div class="context">
      <div class="search">
        <van-search
          v-model="kw"
          placeholder="请输入搜索关键词"
          @search="OnSearch"
        >
        </van-search>
        <van-button @click="OnSearch" type="info">搜索</van-button>
      </div>
    </div>
  </div>
</template>

<script>
import { Toast } from "vant";

export default {
  name: "HeaderTop",
  components: {},
  data() {
    return {
      kw: "",
      isCard: false,
    };
  },
  methods: {
    // 搜索方法
    OnSearch(val) {
      if (this.kw == "") {
        Toast("请输入关键词");
      } else {
        Toast("正在检索中");
        if (this.$route.path.indexOf("Search") !== 1) {
          setTimeout(() => {
            //需要延迟跳转  可以后续优化速度 =。=
            this.$router.push("/Search/" + this.kw);
            //延迟时间：2秒
          }, 2000);
        } else {
          return false;
        }
      }

      // 点击跳转
    },

    backurl() {
      this.$router.back(-1);
    },
    CloseWindow() {
      var userAgent = navigator.userAgent;
      if (
        userAgent.indexOf("Firefox") != -1 ||
        userAgent.indexOf("Chrome") != -1
      ) {
        window.location.href = "about:blank";
        window.close();
      } else {
        window.opener = null;
        window.open("", "_self");
        window.close();
      }
      // window.location.href = "about:blank";
      // window.close();
    },
  },
  props: {},
};
</script>

<style scoped leng="sass">
.context {
  width: 90%;
  margin: 0 auto;
}
.HeaderTop {
  width: 100%;
  height: 12vw;
  background-color: rgba(22, 119, 255, 1);
  display: flex;
  line-height: 12vw;
}
.he-left {
  /* margin-right: 16vw; */
  width: 20vw;
}
.he-left img {
  margin-left: 5vw;
  width: 4vw;
  margin-bottom: -0.5vw;
}
.title {
  color: rgba(255, 255, 255, 1);

  margin: 0 auto;
  padding-right: 15vw;
}

/* 搜索 */
.search {
  display: flex;
  justify-content: space-evenly;
  padding-top: 4vw;
  margin-bottom: 5vw;
}
.van-search {
  padding: 0px;
  width: 80%;
  margin-right: 2vw;
  background-color: rgba(255, 255, 255, 1);
  border: 1px solid rgba(237, 237, 237, 1);
  border-radius: 1vw;
}
.van-search .van-cell {
  padding: 1px;
}
.van-search__content {
  background-color: rgba(255, 255, 255, 1);
}
.van-cell {
  font-size: 16px;
  line-height: 32px;
  height: 32px;
}

/* button */
.van-button {
  height: 32px;
  width: 20%;
}
</style>