<template>
  <div class="page" :class="{ homeStyle: props.showView == 'IPP' }">
    <div class="searchBox" v-if="props.showView != 'IPP'">
      <input
        type="text"
        maxlength="50"
        v-model="searchVal"
        placeholder="请输入关键字"
        @keyup.enter="chkSearch"
      />
      <button @click="chkSearch">
        <span class="iconfont icon-jyh-search"></span>搜 索
      </button>
    </div>
    <div class="bottomView">
      <menuModule :showView="showView" />
      <div class="contentView">
        <slot name="routerView" />
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref } from "vue";
import { useRouter } from "vue-router";
import menuModule from "@/views/zwgk/modules/menuModule.vue";
const router = useRouter();
const props = defineProps({
  showView: String,
});
const searchVal = ref();
function chkSearch() {
  router.push({
    path: "/search",
    query: {
      value: searchVal.value,
    },
  });
}
</script>
<style scoped lang="less">
.page {
  width: 1128px;
  height: 100%;
  overflow: hidden;
  background-color: rgb(242, 242, 242);
  margin: 0 auto;
  padding: 20px 36px 20px 36px;

  .searchBox {
    display: block;
    z-index: 9;
    line-height: 0;
    text-align: center;
    font-size: 0;
    position: relative;
    margin-top: 84px;
    margin-bottom: 84px;

    input {
      width: 510px;
      height: 26px;
      line-height: 26px;
      font-size: 16px;
      padding: 10px;
      border: none;
      background: #fff;
      outline: none;
      border-radius: 9px;
      margin-left: -2%;
      border: 2px solid #2c66a4;
    }

    button {
      width: 40px;
      height: 50px;
      border: none;
      cursor: pointer;
      text-align: center;
      line-height: 0;
      font-size: 0;
      margin-left: -60px;
      color: transparent;
      background: url(@/assets/logo/q.png) 0px 0px no-repeat;
    }
  }

  .searchBox:before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0px;
    width: 22%;
    height: 0;
    border-bottom: 2px solid #ccc;
  }

  .searchBox:after {
    content: "";
    position: absolute;
    top: 50%;
    right: 0px;
    width: 20%;
    height: 0;
    border-bottom: 2px solid #ccc;
  }

  .bottomView {
    height: 100%;

    .contentView {
      display: block;
      float: left;
      width: calc(100% - 310px);
      background-color: #fff;
      border: 1px solid #dfdfdf;
      padding: 0px 20px;
      margin-left: 18px;
    }
  }
}

.homeStyle {
  background: #fff;

  ::v-deep(.featureBox) {
    .el-menu {
      background: #fff !important;
    }
  }
}
</style>
