<!--
* @FileDescription: input
* @Author: 黄琪勇
* @Date:2024-03-28 17:22:38
-->
<template>
   <el-input class="h_myInput" v-bind="$attrs" @focus="handleInputFocus" @blur="handleInputBlur" :class="{ isInputFocus: isInputFocus }">
      <template #prepend>
         <slot v-if="$slots.prepend" name="prepend"></slot>
         <img v-else class="imgSs" src="./img/ss.png" />
      </template>
      <template #append>
         <slot v-if="$slots.append" name="append"></slot>
         <div v-else class="btnSelect" @click="handleQuery">搜索</div>
      </template>
   </el-input>
</template>

<script setup lang="ts">
import { computed, ref } from "vue"
import { baseSize } from "@/libs/rem"

const props = defineProps<{
   width?: number
   height?: number
}>()
const emits = defineEmits<{
   (e: "handleQuery"): void
}>()

const _h_width = computed(() => {
   return props.width ? (props.width / baseSize).toFixed(5) + "rem" : "100%"
})
const _h_height = computed(() => {
   return ((props.height || 32) / baseSize).toFixed(5) + "rem"
})

// 选中样式
const isInputFocus = ref(false)
function handleInputFocus() {
   isInputFocus.value = true
}
function handleInputBlur() {
   isInputFocus.value = false
}

function handleQuery() {
   emits("handleQuery")
}
</script>

<style lang="scss">
.h_myInput {
   &.el-input {
      flex-shrink: 0;
      width: v-bind(_h_width);
      height: v-bind(_h_height);
      --el-input-text-color: #333;
      font-size: 16px;
      border: 1px solid transparent;
      background: #fff;
      border-radius: 21px;
      & .isInputFocus {
         border-color: #ff8057 !important;
         box-shadow: 0px 0px 4px 0px rgba(255, 155, 109);
      }
      &.is-disabled {
         cursor: not-allowed;
         .el-input__wrapper {
            background-color: transparent;
            box-shadow: none;
         }

         .btnSelect {
            opacity: $opacity-disabled;
         }
      }
   }
   .el-input-group__prepend {
      background-color: transparent;
      box-shadow: none;
      padding: 0 0 0 15px;
   }
   .el-input-group__append {
      background-color: transparent;
      box-shadow: none;
      padding: 0 4px;
   }
   .el-input__wrapper {
      box-shadow: none;
      border-radius: 21px;
   }
   .imgSs {
      width: 20px;
      height: 20px;
   }
   .btnSelect {
      width: 70px;
      height: 36px;
      background: linear-gradient(180deg, #ffab71 0%, #ff6e45 100%), #ffad49;
      border-radius: 21px;
      font-weight: 500;
      font-size: 16px;
      color: #ffffff;
      line-height: 36px;
      text-align: center;
      cursor: pointer;
      &:hover {
         opacity: $opacity-hover;
      }
   }
}
</style>
