<template>
  <div class="searchContainer" v-loading="loading">
    <div class="wrap">
      <div
        class="banner"
        style="height: 394px; background-size: cover; background-color: #ccc"
        :style="{ backgroundImage: state.banner ? `url(${state.banner})` : '' }"
      >
        <div class="conter1000">
          <div class="tit">{{ title }}</div>
          <el-input
            v-model.trim="state.currentKeyword"
            placeholder="请输入检索词"
          >
            <template #append>
              <el-button icon="Search" @click="handleQuery">搜索</el-button>
            </template>
          </el-input>
        </div>
      </div>
      <div class="conter1000">
        <slot></slot>
      </div>
    </div>
    <webFooter></webFooter>
  </div>
</template>
<script setup>
import webFooter from "@/components/webFooter/index.vue";
import { banner } from "@/api/website/home/index";
import { useRoute, useRouter } from "vue-router";
import { reactive, ref } from "vue";
const route = useRoute();
const loading = ref(true);

const state = reactive({
  currentKeyword: "",
});
const props = defineProps({
  title: {
    type: String,
    required: true,
  },
  bannerKey: {
    required: true,
    type: String,
    default: "",
  },
});
const emit = defineEmits();

function handleQuery() {
  emit("handleQuery", state.currentKeyword);
}

onMounted(() => {
  state.currentKeyword = route.query.keyword;
  handleQuery();
  banner({ locals: props.bannerKey })
    .then((resp) => {
      state.banner = resp.data[0].images;
      loading.value = false;
    })
    .catch(() => {
      loading.value = false;
    });
});
</script>
<style lang="scss" scoped>
.searchContainer {
  width: 100%;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  .wrap {
    flex: 1;
    background: #f2f6ff;
  }
  .banner {
    display: flex;
    align-items: center;
    justify-content: center;
    .tit {
      text-align: center;
      font-size: 34px;
      line-height: 80px;
      font-family: Source Han Sans CN;
      font-weight: bold;
      color: #ffffff;
      text-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
    }
    .el-input {
      ::v-deep(.el-input__inner) {
        border-right: 0;
      }
      ::v-deep(.el-input-group__append) {
        overflow: hidden;
        font-size: 16px;
        color: #fff;
        border-top-color: #0054ff;
        border-right-color: #0054ff;
        border-bottom-color: #0054ff;
        background-color: #0054ff;
      }
    }

    ::v-deep(.el-input__inner),
    ::v-deep(.el-input-group__append) {
      height: 50px !important;
      border-radius: 0;
    }
  }
}
</style>
