<template>
  <view class="search">
    <u-icon name="search" color="#009C77!important" size="40"></u-icon>

    <u-input
      v-model="dec"
      style="width: 100%"
      type="text"
      :placeholder="placeholder"
      :clearable="false"
      @blur="blur"
    />
    <view class="shaixuan" @click="open" id="search">
      <text style="white-space: nowrap">{{$t('homePage.alarm.sift')}}</text>
      <u-icon name="arrow-right" color="#009C77!important" size="30"></u-icon>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    placeholder: {
      type: String,
      default: "请输入告警内容筛选",
    },
  },
  data() {
    return {
      dec: "",
      value1: 1,
      value2: 2,
      show_: false,
    };
  },
  methods: {
    open() {
      this.show_ = true;
      this.$emit("custom");
    },
    blur() {
      this.$emit("blur", this.dec);
    },
  },
};
</script>

<style lang="scss" scoped>
.search {
  background-color: #ffffff;
  width: 100%;
  height: 80rpx;
  border-radius: 10rpx;
  box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-left: 20rpx;
  padding-right: 20rpx;
  position: relative;

  .shaixuan {
    white-space: nowrap;

    display: flex;
    // float: right;
    // display: flex;
    // flex:1;
    // justify-content:flex-end;
    align-items: center;
    color: #009c77;
  }

  .proper {
    position: absolute;
    left: 0;
    right: 0;
    top: 80rpx;
    height: 500rpx;
    background-color: red;
  }
}

::v-deep .u-dropdown__content {
  position: fixed;
}
</style>
