<template>
  <div class="search">
    <div class="search-bar">
      <el-input placeholder="请输入内容" v-model="inputValue">
        <template #prepend>
          <el-dropdown trigger="click" placement="bottom" @command="e => selectValue = e">
            <el-button type="primary" class="dropdown-button">
              <div style="display: flex;align-items: center;">
                <i class="el-icon-search el-icon--left"></i><p class="dropdown-button__text">{{selectValue}}</p><i class="el-icon-arrow-down el-icon--right"></i>
              </div>
            </el-button>
            <template #dropdown>
              <el-dropdown-menu style="width: 235px;">
                <el-dropdown-item command="部门工作职责">
                  <div style="text-align: center">部门工作职责</div>
                </el-dropdown-item>
                <el-dropdown-item command="制度文件">
                  <div style="text-align: center">制度文件</div>
                </el-dropdown-item>
                <el-dropdown-item command="工作流程">
                  <div style="text-align: center">工作流程</div>
                </el-dropdown-item>
                <el-dropdown-item command="岗位工作及标准">
                  <div style="text-align: center">岗位工作及标准</div>
                </el-dropdown-item>
                <el-dropdown-item command="表单中心">
                  <div style="text-align: center">表单中心</div>
                </el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </template>
      </el-input>
    </div>
    <div class="search__bottom">

    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectValue: '搜索内部资料',
      inputValue: ''
    }
  },
  methods: {},
  computed: {},
}
</script>

<style scoped lang="scss">
.search {
  width: 100%;
  height: 295px;

  padding: 33px 18.75% 38px 18.75%;
  overflow: hidden;
  position: relative;

  &::before {
    content: '';
    background: #1e9fff;
    filter: blur(8px);

    z-index: 0;
    position: absolute;
    top: -10px;
    right: -10px;
    bottom: -10px;
    left: -10px;
  }

  &__bottom {
    width: 100%;
    height: 179px;
    background: url("../../assets/reception/search-bottom-bkg.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;

    position: relative;
  }
}

.dropdown-button {
  width: 235px;
  background: #376BA3!important;
  color: #fff!important;
  border: none!important;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;

  margin-left: -22px !important;
  padding-left: 29px !important;
  padding-right: 18px !important;

  &__text {
    flex: 1;
    font-size: 16px;
  }
}

::v-deep div[x-arrow] {
  display: none;
}
::v-deep .el-input__inner {
  border: none;
}

</style>

<style>
.el-dropdown-menu[x-placement^=bottom] {
  padding: 0!important;
  border: none;
  transform: translateX(-1px);
}
.el-dropdown-menu__item:not(.is-disabled):hover, .el-dropdown-menu__item:focus {
  background: #247EC3!important;
  color: #fff!important;
}
.el-dropdown-menu > li:nth-child(1):hover {
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}
.el-dropdown-menu > li:nth-child(5):hover {
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
}
</style>
