<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-form
            :model="state"
            :rules="queryRules"
            ref="queryRef"
            @submit.prevent
          >
            <el-input
              v-model.trim="state.currentKeyword"
              :placeholder="t('webSearch.placeholder')"
              @keyup.enter="handleQuery"
            >
              <template #suffix v-if="false">
                <el-form-item prop="queryType">
                  <el-select
                    v-model="state.queryType"
                    placeholder="请选择搜索类型"
                    class="search-type-select"
                  >
                    <el-option
                      v-for="item in queryTypeList[route.meta.searchType - 1]"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                </el-form-item>
              </template>
              <template #append>
                <el-button
                  :disabled="!state.currentKeyword"
                  icon="Search"
                  @click="handleQuery"
                  >{{ t("common.search") }}
                </el-button>
              </template>
            </el-input>
          </el-form>
        </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";
import router from "../../../../router";
import { useI18n } from "vue-i18n";

const route = useRoute();
const { t } = useI18n();
// console.log(route.query.queryType);
// const queryType = route.query.queryType;

const loading = ref(true);

const state = reactive({
  currentKeyword: "",
  queryType: route.query.queryType,
});
// state.queryType = route.query.queryType;
// state.queryType = queryType;
const queryRules = reactive({
  queryType: [{ required: true, trigger: "change", message: "请选择搜索类型" }],
  keyword: [{ required: true, trigger: "blur", message: "请选择搜索关键词" }],
});

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

const queryTypeList = [
  [
    { value: "1", label: "通过企业名称搜索" },
    { value: "2", label: "通过企业简介搜索" },
    { value: "3", label: "通过关键词搜索" },
    { value: "4", label: "通过生产方向搜索" },
    { value: "5", label: "通过产品搜索" },
  ],
  [
    {
      value: "1",
      label: "通过成果名称搜索",
    },
  ],
  [
    { value: "1", label: "通过实验室名称名称搜索" },
    { value: "2", label: "通过实验室名称简介搜索" },
  ],
  [
    { value: "1", label: "通过标题搜索" },
    { value: "2", label: "通过摘要搜索" },
    { value: "3", label: "通过主权项搜索" },
  ],
  [
    { value: "1", label: "通过专家名称搜索" },
    { value: "2", label: "通过个人简介搜索" },
    { value: "3", label: "通过关键词搜索" },
  ],
  [{ value: "1", label: "通过标题搜索" }],
  [{ value: "1", label: "通过标题搜索" }],
  [
    { value: "1", label: "通过实验室名称搜索" },
    { value: "2", label: "通过实验室简介搜索" },
  ],
];

async function handleQuery() {
  // state.queryType = route.query.queryType;
  // await queryRef.value.validate();
  router.replace({
    path: route.path,
    query: {
      ...route.query,
      keyword: state.currentKeyword,
      queryType: state.queryType,
    },
  });
  emit("handleQuery", state);
}

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>
:deep(.search-type-select) {
  box-sizing: 0 0 0 0;
}

.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 {
      ::deep(.el-input__inner) {
        border-right: 0;
      }

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

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