<!--
 * @Date: 2024-10-20 09:59:52
 * @LastEditors: hookehuyr hookehuyr@gmail.com
 * @LastEditTime: 2024-10-21 09:35:58
 * @FilePath: /hager/src/components/common/hagerInput.vue
 * @Description: 文件描述
-->
<template>
  <div :class="['hager-input-page', required ? 'required': 'normal']">
    <div :class="['input-box', disable ? 'disable': '']">
      <div class="typeIcon" :style="{backgroundImage: 'url('+typeIcon+')'}"></div>
      <input :value="value" @input="onInput" :disabled="disable" :placeholder="placeholder" />
    </div>
  </div>
</template>

<script>
import mixin from 'common/mixin';

export default {
  mixins: [mixin.init],
  props: {
    value: {
      type: String,
      default: ''
    },
    placeholder: {
      type: String,
      default: '请输入内容'
    },
    type: {
      type: String,
      default: 'email'
    },
    required: {
      type: Boolean,
      default: false
    },
    disable: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {

    }
  },
  computed: {
    typeIcon () {
      switch (this.type) {
        case 'email':
          return 'https://cdn.ipadbiz.cn/hager/icon/input/%E9%82%AE%E7%AE%B1@2x.png';
        case 'pwd':
          return 'https://cdn.ipadbiz.cn/hager/icon/input/%E5%AF%86%E7%A0%81@2x.png';
        case 'username':
          return 'https://cdn.ipadbiz.cn/hager/icon/input/%E5%A7%93%E5%90%8D@2x.png';
        case 'tel':
          return 'https://cdn.ipadbiz.cn/hager/icon/input/%E7%94%B5%E8%AF%9D@2x.png';
        case 'corp':
          return 'https://cdn.ipadbiz.cn/hager/icon/input/%E5%85%AC%E5%8F%B8@2x.png';
        case 'department':
          return 'https://cdn.ipadbiz.cn/hager/icon/input/%E8%81%8C%E4%BD%8D@2x.png';
      }
    }
  },
  mounted () {

  },
  methods: {
    // 当输入框内容发生变化时，触发父组件的 `input` 事件
    onInput(event) {
      // 使用 $emit 触发 input 事件，传递新的输入值
      this.$emit('input', event.target.value);
    }
  }
}
</script>

<style lang="less" scoped>
  .hager-input-page {
    display: flex;
    align-items: center;
    &.required::before {
      content: '*';
      color: #FF0000;
      margin-right: 0.5rem;
    }
    &.normal {
      margin-left: 1rem;
    }

    .input-box {
      background: #FFFFFF;
      border-radius: 5px;
      border: 1px solid #DADADA;
      padding: 0.5rem 0.75rem;
      width: 100%;
      margin: 0.5rem 0;
      display: flex;
      align-items: center;
      justify-content: space-between;
      box-sizing: border-box; /* 确保内边距和边框不会增加总宽度 */
      &.disable {
        background-color:#F9F9F9;
        border: 1px solid #F9F9F9;
        input {
          background-color:#F9F9F9;
          color: #666;
        }
      }
      .typeIcon {
        width: 1rem;
        height: 0.9rem;
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        margin-right: 0.5rem;
      }
      input {
        border: 0;
        width: calc(100% - 2rem); /* 调整输入框的宽度 */
      }
    }
  }
</style>